Grid Field Rows with Expandable/Collapsible Section

Certified Senior Developer

Hi! Has anyone implemented an interface with a similar visual style? A grid field with rows and the rows have an icon that when you click expands a section.

I could be wrong, but I think Appian doesn't currently have an out-of-the-box component/layout for this, hence I'm trying to find a workaround. 

I am looking for ideas on how I can at least mimic a fraction of this style in Appian.

  Discussion posts and replies are publicly visible

Parents
  • Try this. 

    a!localVariables(
      local!expandedIndex,
      a!forEach(
        items: enumerate(10),
        expression: {
          a!cardLayout(
            contents: {
              a!richTextDisplayField(
                labelPosition: "COLLAPSED",
                value: {
                  a!richTextItem(
                    text: fv!index
                  )
                }
              ),
              a!sectionLayout(
                showWhen: tointeger(local!expandedIndex)=fv!index,
                label: "Transaction History"
              )
            },
            link: a!dynamicLink(
              value: if(tointeger(local!expandedIndex)=fv!index,null,fv!index),
              saveInto: local!expandedIndex
            )
          )
        }
      )
    )

Reply
  • Try this. 

    a!localVariables(
      local!expandedIndex,
      a!forEach(
        items: enumerate(10),
        expression: {
          a!cardLayout(
            contents: {
              a!richTextDisplayField(
                labelPosition: "COLLAPSED",
                value: {
                  a!richTextItem(
                    text: fv!index
                  )
                }
              ),
              a!sectionLayout(
                showWhen: tointeger(local!expandedIndex)=fv!index,
                label: "Transaction History"
              )
            },
            link: a!dynamicLink(
              value: if(tointeger(local!expandedIndex)=fv!index,null,fv!index),
              saveInto: local!expandedIndex
            )
          )
        }
      )
    )

Children
No Data