Create Accordion Like UI using Box Layouts

Unfortunately the Box Layout component doesn't have any external way of controlling its "collapsed state" (like setting the value of a parameter or variable to something).  However I think if you feel like doing a little tinkering, you could develop a similar-looking layout that's actually a stack of two cards, where the bottom card "collapses" via just being not shown under certain conditions, which you could set to observe the state of an external variable.  You would put the code for this special component all in its own interface, then call it several times from your parent form, which would also contain the logic surrounding collapsing other boxes when you expand a box.

Yea, I've been hoping we see a way to force boxes/sections collapsing for a while now, such as an isCollapsed parameter which overrides user control when <> null.  Fingers crossed..

In the interim, you can do this manually as Mike mentions with a!cardLayout().  Sample interface:

a!localVariables(
  local!boxes: a!forEach(
    items: enumerate(5),
    expression: a!map(
      label: concat("Box ",fv!index),
      visible: fv!isFirst
    )
  ),
  a!forEach(
    items: local!boxes,
    expression: {
      a!cardLayout(
        style: "ACCENT",
        marginBelow: if(fv!item.visible,"NONE","STANDARD"),
        showBorder: false,
        contents: {
          a!columnsLayout(
            columns: {
              a!columnLayout(
                contents: {
                  a!richTextDisplayField(
                    labelPosition: "COLLAPSED",
                    value: a!richTextItem(
                      text: fv!item.label,
                      style: "STRONG"
                    )
                  )
                }
              ),
              a!columnLayout(
                contents: {
                  a!richTextDisplayField(
                    align: "RIGHT",
                    labelPosition: "COLLAPSED",
                    value: a!richTextIcon(
                      icon: if(fv!item.visible,"angle-down","angle-right"),
                      size: "MEDIUM"
                    )
                  )
                }
              )
            }
          )
        },
        link: a!dynamicLink(
          value: not(fv!item.visible),
          saveInto: {
            a!localVariables(
              local!clickIndex: fv!index,
              a!save(
                local!boxes,
                a!forEach(
                  items: local!boxes,
                  expression: a!map(
                    label: fv!item.label,
                    visible: fv!index=local!clickIndex
                  )
                )
              )
            )
          }
        )
      ),
      a!cardLayout(
        showWhen: fv!item.visible,
        marginBelow: "STANDARD",
        contents: {
          a!textField(label: concat("Data ",fv!index))
        }
      )
    }
  )
)

Chris said:

such as an isCollapsed parameter which overrides user control when <> null

this has been on my "backlog of things to file a feature request whenever i get a slow day" for a while now, but alas.  If they haven't taken care of actual critical issues yet like "allow us to use a base excel template in the Export DSE to Excel node", i'm not sure when they'd get around to little things like this.

Chris said:

such as an isCollapsed parameter which overrides user control when <> null

this has been on my "backlog of things to file a feature request whenever i get a slow day" for a while now, but alas.  If they haven't taken care of actual critical issues yet like "allow us to use a base excel template in the Export DSE to Excel node", i'm not sure when they'd get around to little things like this.

Mike Schmitt said:

allow us to use a base excel template in the Export DSE to Excel node

If you hear this question in the 21.3 webinar, it probably came from my keyboard ;)

Chris said:

If you hear this question in the 21.3 webinar

trust me, i've tried :o)

Thank You all for this amazing work. 

Worked like a Charm