How to create custom grid

RE: How to create custom grid

Mike Schmitt — Mon, 04 Oct 2021 18:42:02 GMT

The primary reason for using local data in the above sample code is for ease of portability (i.e. anyone here can copy/paste that into their interface designer and see what i did, as long as they have a reasonably modern version of Appian). In a normal use case data would be coming from the database, but the above example would still work pending adjustments to account for the particular configuration of your data.

RE: How to create custom grid

shubhamy0001 — Mon, 04 Oct 2021 18:24:26 GMT

Hi Mike,

Thank you for the explanation. But my data is coming from database view insted of local array. However I tried to use the above code but it does not seem to work in grid. Could you please suggest on this.

RE: How to create custom grid

Mike Schmitt — Mon, 27 Sep 2021 13:14:33 GMT

There's no exact solution for this available in base Appian. My first approach would be to build a Read-Only Grid where the Name and Code column values are Rich Text, and iterate over all the values that belong in that primary row, separating them with line returns. There are other possible "approximate" approaches too, like perhaps building a quasi-grid using stacked Cards, etc.

Here's a "portable" example of my primary suggestion above, using your example data structure:

a!localVariables(
  local!array: {
    a!map(
      date: today() - 5,
      people: {
        a!map(name: "Dave", code: 1122),
        a!map(name: "Frank", code: 1133)
      }
    ),
    a!map(
      date: today() - 4,
      people: {
        a!map(name: "Maria", code: 3322),
        a!map(name: "John", code: 1324),
        a!map(name: "Joe", code: 3444)
      }
    ),
    a!map(
      date: today() - 3,
      people: { a!map(name: "Adam", code: 3432) }
    )
  },
  a!gridField(
    data: local!array,
    spacing: "DENSE",
    columns: {
      a!gridColumn(
        label: "Date",
        sortField: "date",
        value: fv!row.date
      ),
      a!gridColumn(
        label: "Name",
        value: a!richTextDisplayField(
          value: {
            a!forEach(
              fv!row.people,
              fv!item.name & if(fv!isLast, "", char(10))
            )
          }
        )
      ),
      a!gridColumn(
        label: "Code",
        value: a!richTextDisplayField(
          value: {
            a!forEach(
              fv!row.people,
              fv!item.code & if(fv!isLast, "", char(10))
            )
          }
        )
      )
    }
  )
)