Grid Field Rows with Expandable/Collapsible Section

RE: Grid Field Rows with Expandable/Collapsible Section

luism5749 — Fri, 31 Jan 2025 20:20:25 GMT

Hello, can you please share how you did this using columns layout?

RE: Grid Field Rows with Expandable/Collapsible Section

Abhay Dalsaniya — Mon, 05 Feb 2024 19:31:35 GMT

Absolutely!

RE: Grid Field Rows with Expandable/Collapsible Section

Dabs Medina — Mon, 05 Feb 2024 00:26:02 GMT

Yeah, I've built a custom grid (image below). But I think the level of effort to maintain/scale this would be higher compare to when we use an OOTB component and I also think that this kind of design is not ideal for large grids, not sure how it would accommodate large number of columns.

RE: Grid Field Rows with Expandable/Collapsible Section

Abhay Dalsaniya — Fri, 02 Feb 2024 17:13:35 GMT

As suggested by other members, no OOTB component to address this requirement, however it can be built easily by using other components with show/hide on condition.

RE: Grid Field Rows with Expandable/Collapsible Section

Stefan Helzle — Wed, 31 Jan 2024 09:03:12 GMT

OK. Appian does not support that in the OOTB grid component. But you could build a custom grid using columns layouts and then do whatever you want or need to do.

IMHO, I would try to challenge that requirement and try to find a solution that provides the same UX but using a slightly different UI. Staying with the OOTB components saves you a ton of effort and ensures a more consistent UI across apps.

RE: Grid Field Rows with Expandable/Collapsible Section

Dabs Medina — Wed, 31 Jan 2024 07:50:51 GMT

This is how they want it to look. They want to show/hide the section below the selected row itself and still list the unselected ones.

RE: Grid Field Rows with Expandable/Collapsible Section

Stefan Helzle — Tue, 30 Jan 2024 09:02:18 GMT

There is no OOTB component, but you can easily built such.

RE: Grid Field Rows with Expandable/Collapsible Section

Harshit Bumb (Appyzie) — Tue, 30 Jan 2024 07:25:52 GMT

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