• State Not Answered
  • Replies 6 replies
  • Subscribers 12 subscribers
  • Views 6854 views
  • Users 0 members are here
Related Discussions
Home » Discussions » Data and Records

Need Tree View structure like component

viveku3486
Certified Associate Developer

Hello All,

 

We have a requirement to provide tree view like component as shown in the attached image to users. As we all know appian doesn't provide any such components as of now, I implemented some logic using richtextfield,checkbox and sidebyside component to accomplish this functionality. The problem we are having with this approach is related to performance. It takes significant amount of time to check and uncheck particular item, As the design includes recursion of loops. 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. Is there a way to accomplish such functionality in more efficient manner? Or is there an alternative to this use case? Any suggestion here would be highly appreciated. Thanks in advance

 

 

  Discussion posts and replies are publicly visible

  • 0
    A Score Level 2
    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
  • 0
    Certified Associate Developer
     in reply to jacobm579
    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
  • 0
    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.
  • 0

    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)
                             ),
                             {}
                      )
               }
            ),
        },
    )

  • 0
    Certified Associate Developer
     in reply to jeanalainb0001

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

© 2024 Appian. All rights reserved.