Collapsible Rows in a Grid

This preset includes a collapsible grid that can be used to beautifully show the nested relationship between parent and child records. All the child records can be accessed by clicking on the parent label.

This has been implemented using an editable grid as it provides more control over every row which was much needed here for adding the right padding and managing the chevron icons on every grid level. Another best part of it is, the links and icons will only appear where there are any children available. And once you close the parent, all the nested records will be collapsed.

The data sits in a flat structure, hence making it extremely simple to change it with your actual business data.

Below is the attached code for the above pre-set. Happy Lowcoding!

Pre-requisites

Expression rule – AS_findAllParentsOfChild

/*This code has been written by Harshit Bumb and taken from AppianSpace.com */
a!localVariables(
  local!immediateParent: index(
    ri!data,
    wherecontains(
      tointeger(
        index({ ri!currentElement }, 1, "parentId", {})
      ),
      tointeger(ri!data.id)
    ),
    {}
  ),
  local!newCurrentElement: insert(
    { ri!currentElement },
    local!immediateParent,
    1
  ),
  if(
    a!isNullOrEmpty(local!immediateParent),
    local!newCurrentElement,
    rule!AS_findAllParentsOfChild(
      data: ri!data,
      currentElement: local!newCurrentElement
    )
  )
)

Expression rule – AS_findAllChildrenOfParent

/*This code has been written by Harshit Bumb and taken from AppianSpace.com */
a!localVariables(
  local!ids: a!refreshVariable(
    value: union(
      ri!currentElement.id,
      ri!currentElement.id
    ),
    refreshAlways: true
  ),
  local!child: a!refreshVariable(
    value: index(
      ri!data,
      wherecontains(
        tointeger(local!ids),
        tointeger(ri!data.parentId)
      ),
      {}
    ),
    refreshAlways: true
  ),
  local!currentElement: insert({ ri!currentElement }, local!child, 1),
  local!newCurrentElement: union(
    local!currentElement,
    local!currentElement
  ),
  if(
    count(local!newCurrentElement) = count(ri!currentElement),
    rdrop(local!newCurrentElement, 1),
    rule!AS_findAllChildrenOfParent(
      data: ri!data,
      currentElement: local!newCurrentElement
    )
  ),

)

Code Block

/*This code has been written by Harshit Bumb and taken from AppianSpace.com */
a!localVariables(
  local!data: {
    { id: 1, name: "Category 1", parentId: null },
    { id: 2, name: "Category 2", parentId: null },
    { id: 3, name: "Category 3", parentId: null },
    {
      id: 4,
      name: "Sub category 1.1",
      parentId: 1
    },
    {
      id: 5,
      name: "Sub category 1.2",
      parentId: 1
    },
    {
      id: 6,
      name: "Sub category 1.1.1",
      parentId: 4
    },
    {
      id: 7,
      name: "Sub category 1.1.1.1",
      parentId: 6
    }
  },
  local!visibleData: index(
    local!data,
    wherecontains(
      tointeger(null),
      tointeger(local!data.parentId)
    ),
    {}
  ),
  a!gridLayout(
    headerCells: {
      a!gridLayoutHeaderCell(label: "Categories")
    },
    rows: a!forEach(
      items: local!visibleData,
      expression: a!gridRowLayout(
        id: fv!item.id,
        contents: {
          a!richTextDisplayField(
            labelPosition: "COLLAPSED",
            value: {
              a!richTextItem(
                text: "   ",
                showWhen: not(
                  contains(
                    tointeger(local!data.parentId),
                    tointeger(fv!item.id)
                  )
                )
              ),
              a!richTextItem(
                text: repeat(
                  count(
                    rule!AS_findAllParentsOfChild(data: local!data, currentElement: fv!item)
                  ) - 1,
                  "     "
                ),

              ),
              a!richTextIcon(
                icon: if(
                  contains(
                    tointeger(local!visibleData.parentId),
                    tointeger(fv!item.id)
                  ),
                  "chevron-down",
                  "chevron-right"
                ),
                size: "SMALL",
                color: "ACCENT",
                showWhen: contains(
                  tointeger(local!data.parentId),
                  tointeger(fv!item.id)
                )
              ),
              " ",
              a!richTextItem(
                text: fv!item.name,
                link: a!dynamicLink(
                  showWhen: contains(
                    tointeger(local!data.parentId),
                    tointeger(fv!item.id)
                  ),
                  saveInto: a!save(
                    local!visibleData,
                    if(
                      contains(
                        tointeger(local!visibleData.parentId),
                        tointeger(fv!item.id)
                      ),
                      remove(
                        local!visibleData,
                        wherecontains(
                          rule!AS_findAllChildrenOfParent(
                            data: local!visibleData,
                            currentElement: local!visibleData[fv!index]
                          ),
                          local!visibleData
                        )
                      ),
                      insert(
                        local!visibleData,
                        index(
                          local!data,
                          wherecontains(
                            tointeger(fv!item.id),
                            tointeger(local!data.parentId)
                          ),
                          {}
                        ),
                        fv!index + 1,

                      )
                    )
                  )
                )
              ),

            }
          )
        }
      )
    )
  )
)

✍🏼 Feel free to post any questions about this preset or request any new presets in the comments below. Thank you for checking out!