Grid in Appian

RE: Grid in Appian

Harshit Bumb (Appyzie) — Fri, 01 Mar 2024 10:05:47 GMT

Yes and No. Yes you can create something like this but No it can't be done using a grid. You will have to build a grid like layout using the card layouts.

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

RE: Grid in Appian

Rahul009 — Fri, 01 Mar 2024 09:25:01 GMT

Thanks Harshit Bumb (Appyzie) ,

I have one other grid design which I am not sure how to build it.

Is it possible to have a down arrow at the right of grid row to display meta of the record.

RE: Grid in Appian

Konduru Chaitanya — Wed, 28 Feb 2024 11:49:08 GMT

I would recommend use the 2nd way for your requirement as it would have better readability and understanding for the user. For the 1st Approach you need to have a separate legend on what color is for what as you cannot have both the header and the grid column labels. Only one can be accommodated.

RE: Grid in Appian

Harshit Bumb (Appyzie) — Wed, 28 Feb 2024 10:37:22 GMT

You can't display the header groups (eg. Team Member, Overall Competency). That is what we're using colors for.

For displaying headers, you can simply use the 'label' property in a!gridColumn()

RE: Grid in Appian

Rahul009 — Wed, 28 Feb 2024 10:35:30 GMT

Harshit Bumb (Appyzie) , If we go by 1st way, how to display the headers in the grid.

RE: Grid in Appian

Harshit Bumb (Appyzie) — Wed, 28 Feb 2024 10:03:39 GMT

You can do it in two ways.

Simple way - Just add all of it in the same grid and use the background color of the cells to create visual groups. You can then define the label of these colors in the legends below the grid.
Add 4 grids adjacent to each other, with every row having the same height, and then you will be able to achieve this. (This adds a lot of configurations that you will manually have to adjust and control to ensure that the symmetry never breaks.