How to create custom grid

Question

Hi, 
 I have a requirement to create a grid something like the one below : 
 first row first column has one cell, first row second column has two cells and first row third column has two cells.

Date

Name

Code

Monday September 20, 2021

Dave

1122

Frank

1133

Tuesday September 21, 2021

Maria

3322

John

1324

Joe

3444

Thursday September 23, 2021

Adam

3432

Please suggest

Mike Schmitt · Answer

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.

Mike Schmitt · Answer

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

How to create custom grid

Top Replies