Need Tree View structure like component

RE: Need Tree View structure like component

juanFerrer — Mon, 27 Jun 2022 14:54:21 GMT

it helps, thanks!

RE: Need Tree View structure like component

Pierre Baekelmans — Tue, 27 Apr 2021 10:20:16 GMT

THis is also what I have in mind a few weeks ago. Expand collapdse rows in a grid using richtext and recursivity through expression

RE: Need Tree View structure like component

jeanalainb0001 — Mon, 19 Apr 2021 09:50:19 GMT

Hi,

Sorry for the late response but it can help others.

it is possible to create a tree view base on a hierarchical array and using the grid layout component. This sample is based on the pattern Expand/Collapse Rows in a Tree Grid - Appian 20.4. As you can see, to solve the problem of hierarchy, I use the recursivity. Because it is based on the grid layout component, you should easily extend this sample to do anything you want.

Interface:

a!localVariables(
local!data: {{id: 1,value: "un",childs: {{id: 11,value: "onze",childs: {{ id: 111, value: "cent onze" },{ id: 112, value: "cent douze" }}},{ id: 12, value: "douze" }}},{ id: 2, value: "deux" },{ id: 3, value: "trois" }},
{
a!gridLayout(
headerCells: {
a!gridLayoutHeaderCell(label: "Id"),
a!gridLayoutHeaderCell(label: "Text", align: "RIGHT")
},
columnConfigs: {
a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight: 4),
a!gridLayoutColumnConfig(width: "DISTRIBUTE")
},
rows: rule!createGridRowLayoutForTreeview(
data: local!data,
level: 0
)
)
}
)

Expression rule createGridRowLayoutForTreeview:

a!forEach(
items: ri!data,
expression: {
a!localVariables(
local!expanded: false,
{
a!gridRowLayout(
contents: {
a!richTextDisplayField(
label: "row " & fv!index,
value: {
a!richTextItem(text: repeat(ri!level, " ")),
a!richTextIcon(
icon: if(isnull(fv!item.childs),
"square-o",
if(local!expanded,
"minus-square-o",
"plus-square-o"
)
),
link: a!dynamicLink(
value: not(local!expanded),
saveInto: local!expanded
)
),
a!richTextItem(text: " " & fv!item.id, )
}
),
a!textField(
label: "value " & fv!index,
value: fv!item.value,
readOnly: true
)
}
),
if(local!expanded,
if(isnull(fv!item.childs),
{},
rule!JAB_Expression_createGridRowLayoutForTreeview(data: fv!item.childs, level: ri!level + 1)
),
{}
)
}
),
},
)

RE: Need Tree View structure like component

Lakshmi Meyyappan — Fri, 07 Dec 2018 18:44:58 GMT

There's a great field called a!hierarchyBrowserFieldColumns() that can re-create the tree view you're looking for. You'll need to be creative about how you save values so that you can select more than one option.

RE: Need Tree View structure like component

viveku3486 — Fri, 07 Dec 2018 12:19:01 GMT

Hi Jake,

Thanks for your reply. My quoted statement is basically a part of tree view control in any other language. In short, I need tree view controls which enables the user to perform exactly the same functionality which Tree view control has. Be it like multi level selection or deselection etc

RE: Need Tree View structure like component

jacobm579 — Thu, 06 Dec 2018 16:21:27 GMT

Hey Viveku0001,

I've built a similar component for a client before, though not identical. I would recommend maintaining a list of the selected indices at the top level rule, and using that list to determine the selected state of the checkbox.

However, If I'm not misunderstanding the quoted statement, then it seems as though you wouldn't need this component at all, and could just allow the user to select the Continent. This statement makes me believe you would only ever be able to select all or none of the children within Asia, North America, South America, and/or Europe.

"Also it includes various operations like when user selects the parent item then all the child item inside it is getting checked. Similarly if any child item is being unchecked then parent is also getting unchecked."

Thanks,
Jake