Split Grid

RE: Split Grid

Ram — Wed, 04 Jun 2025 18:13:41 GMT

Hi AbduI,

I have created something similar which uses card layouts and custom paging. This will render a grid which allows you to split rows, make individual selection and also has the ability to select or deselect all. You can add sort as shown in the shared split grid example and feed that value to the sort info of query record or entity which populates the grid data.

RSA_customGridFromColumnAndCardLayouts:
a!localVariables(
  local!mainHeaders: if(
    a!isNullOrEmpty(ri!gridHeaders),
    {},
    ri!gridHeaders
  ),
  local!cardData: if(
    a!isNullOrEmpty(ri!gridData),
    {},
    ri!gridData
  ),
  local!selectedRow,
  local!viewDetails,
  local!pagingInfo: a!pagingInfo(startIndex: 1, batchSize: 3),
  local!data: todatasubset(local!cardData, local!pagingInfo),
  local!cardDataKeys: if(
    a!isNullOrEmpty(local!cardData),
    {},
    a!keys(index(local!cardData, 1, {}))
  ),
  {
    a!columnsLayout(
      columns: {
        a!columnLayout(
          contents: {
            a!sideBySideLayout(
              items: {
                a!sideBySideItem(
                  item: a!richTextDisplayField(
                    value: {
                      a!richTextItem(
                        text: "Select All (" & if(
                          a!isNullOrEmpty(local!selectedRow),
                          0,
                          count(local!selectedRow)
                        ) & ")",
                        link: a!dynamicLink(
                          value: index(local!cardData, "a", {}),
                          saveInto: local!selectedRow,
                          showWhen: if(
                            a!isNullOrEmpty(local!cardData),
                            false,
                            count(local!cardData) <> count(local!selectedRow)
                          )
                        )
                      ),
                      a!richTextItem(text: " | "),
                      a!richTextItem(
                        text: "Deselect All (" & if(
                          a!isNullOrEmpty(local!selectedRow),
                          0,
                          count(local!selectedRow)
                        ) & ")",
                        link: a!dynamicLink(
                          value: null,
                          saveInto: local!selectedRow,
                          showWhen: if(
                            a!isNullOrEmpty(local!cardData),
                            false,
                            or(
                              if(
                                a!isNullOrEmpty(local!selectedRow),
                                false,
                                count(local!selectedRow) > 0
                              ), 
                              count(local!cardData) = count(local!selectedRow)
                            )
                          )
                        )
                      )
                    },
                    align: "LEFT"
                  )
                )
              }
            )
          }
        ),
        a!columnLayout(contents: {}),
        a!columnLayout(contents: {})
      }
    ),
    a!columnsLayout(
      columns: {
        a!forEach(
          items: local!mainHeaders,
          expression: a!columnLayout(
            contents: {
              a!cardLayout(
                contents: {
                  a!richTextDisplayField(
                    value: a!richTextItem(text: fv!item, style: "STRONG")
                  )
                },
                height: "AUTO"
              )
            }
          )
        )
      },
      marginAbove: "NONE",
      marginBelow: "NONE",
      spacing: "NONE"
    ),
    a!cardLayout(
      contents: {
        a!richTextDisplayField(
          value: a!richTextItem(text: "No items available"),
          align: "CENTER",
          marginAbove: "NONE"
        )
      },
      showWhen: a!isNullOrEmpty(local!data.data)
    ),
    a!forEach(
      items: local!data.data,
      expression: {
        a!columnsLayout(
          columns: {
            a!localVariables(
              local!externalItem: fv!item,
              a!forEach(
                items: touniformstring(
                  fn!apply(
                    index(local!externalItem, _, null),
                    local!cardDataKeys
                  )
                ),
                expression: {
                  a!columnLayout(
                    contents: {
                      a!cardLayout(
                        contents: {
                          a!richTextDisplayField(value: a!richTextItem(text: fv!item))
                        },
                        link: a!dynamicLink(
                          label: "Dynamic Link",
                          value: local!externalItem.a,
                          saveInto: {
                            a!save(
                              local!selectedRow,
                              if(
                                contains(
                                  { touniformstring(local!selectedRow) },
                                  tostring(local!externalItem.a)
                                ),
                                difference(
                                  local!selectedRow,
                                  { local!externalItem.a }
                                ),
                                fn!append(local!selectedRow, local!externalItem.a)
                              )
                            )
                          }
                        ),
                        height: "AUTO",
                        style: if(
                          contains(
                            { touniformstring(local!selectedRow) },
                            tostring(local!externalItem.a)
                          ),
                          "ACCENT",
                          "NONE"
                        )
                      )
                    },
                    showWhen: fv!index <= 10
                  ),
                  a!columnLayout(
                    contents: {
                      a!cardLayout(
                        contents: {
                          a!richTextDisplayField(
                            value: a!richTextIcon(
                              icon: if(
                                a!isNullOrEmpty(local!viewDetails),
                                "caret-square-right",
                                if(
                                  contains(
                                    { touniformstring(local!viewDetails) },
                                    tostring(local!externalItem.a)
                                  ),
                                  "caret-square-down",
                                  "caret-square-right"
                                )
                              ),
                              link: a!dynamicLink(
                                value: local!externalItem.a,
                                saveInto: {
                                  a!save(
                                    local!viewDetails,
                                    if(
                                      contains(
                                        { touniformstring(local!viewDetails) },
                                        tostring(local!externalItem.a)
                                      ),
                                      difference(
                                        touniformstring(local!viewDetails),
                                        { tostring(local!externalItem.a) }
                                      ),
                                      local!externalItem.a
                                    )
                                  )
                                }
                              )
                            )
                          )
                        },
                        height: "AUTO",
                        style: if(
                          contains(
                            { touniformstring(local!selectedRow) },
                            tostring(local!externalItem.a)
                          ),
                          "ACCENT",
                          "NONE"
                        )
                      )
                    },
                    showWhen: fv!index = 10
                  )
                }
              )
            )
          },
          showWhen: a!isNotNullOrEmpty(local!cardData),
          marginAbove: "NONE",
          marginBelow: "NONE",
          spacing: "NONE"
        ),
        
        a!columnsLayout(
          columns: {
            a!columnLayout(
              contents: {
                a!richTextDisplayField(
                  labelPosition: "COLLAPSED",
                  value: {
                    a!richTextIcon(
                      icon: "level-down",
                      color: "ACCENT"
                    )
                  },
                  align: "CENTER"
                )
              },
              width: "EXTRA_NARROW"
            ),
            a!columnLayout(
              contents: {
                a!boxLayout(
                  label: "This section is part of grid row : " & tostring(fv!item.a),
                  contents: {
                    a!richTextDisplayField(
                      value: a!richTextBulletedList(
                        items: tostring(fv!item.a)
                      )
                    ),
                    a!richTextDisplayField(
                      value: a!richTextItem(
                        text: "Close",
                        link: a!dynamicLink(
                          value: null,
                          saveInto: local!viewDetails
                        )
                      ),
                      align: "RIGHT"
                    )
                  },
                  style: "INFO",
                  shape: "SEMI_ROUNDED"
                )
              }
            )
          },
          showWhen: and(
            contains(
              { touniformstring(local!viewDetails) },
              tostring(fv!item.a)
            ),
            a!isNotNullOrEmpty(local!cardData)
          ),
          marginBelow: "NONE",
          spacing: "NONE"
        )
      }
    ),
    rule!RSA_customPaginationComponent(
      gridData: local!data,
      gridPagingInfo: local!pagingInfo
    )
  }
)
========================================================================================
RSA_customPaginationComponent
a!richTextDisplayField(
  value: {
    a!richTextItem(
      text: "<<",
      link: if(
        ri!gridPagingInfo.startIndex = 1,
        {},
        a!dynamicLink(
          value: 1,
          saveInto: ri!gridPagingInfo.startIndex
        )
      ),
      showWhen: and(
        ri!gridData.totalCount > 0,
        ri!gridPagingInfo.startIndex > 1
      ),
      size: "MEDIUM",
      style: "STRONG"
    ),
    a!richTextItem(text: "  "),
    a!richTextItem(
      text: "<",
      link: if(
        ri!gridPagingInfo.startIndex = 1,
        {},
        a!dynamicLink(
          value: if(
            ri!gridPagingInfo.startIndex - ri!gridPagingInfo.batchSize < 1,
            1,
            ri!gridPagingInfo.startIndex - ri!gridPagingInfo.batchSize
          ),
          saveInto: ri!gridPagingInfo.startIndex
        )
      ),
      showWhen: and(
        ri!gridData.totalCount > 0,
        ri!gridPagingInfo.startIndex > 1
      ),
      size: "MEDIUM",
      style: "STRONG"
    ),
    a!richTextItem(text: "  "),
    a!richTextItem(text: "Showing "),
    a!richTextItem(
      text: ri!gridPagingInfo.startIndex & " - " & if(
        ri!gridPagingInfo.startIndex + ri!gridPagingInfo.batchSize > ri!gridData.totalCount,
        ri!gridData.totalCount,
        ri!gridPagingInfo.startIndex + ri!gridPagingInfo.batchSize - 1
      ),
      style: "STRONG"
    ),
    a!richTextItem(text: " of " & ri!gridData.totalCount),
    a!richTextItem(text: "  "),
    a!richTextItem(
      text: ">",
      link: if(
        ri!gridPagingInfo.startIndex + ri!gridPagingInfo.batchSize > ri!gridData.totalCount,
        {},
        a!dynamicLink(
          value: ri!gridPagingInfo.startIndex + ri!gridPagingInfo.batchSize,
          saveInto: ri!gridPagingInfo.startIndex
        )
      ),
      showWhen: and(
        ri!gridData.totalCount > 0,
        ri!gridPagingInfo.startIndex + ri!gridPagingInfo.batchSize <= ri!gridData.totalCount
      ),
      size: "MEDIUM",
      style: "STRONG"
    ),
    a!richTextItem(text: "  "),
    a!richTextItem(
      text: ">>",
      link: if(
        ri!gridPagingInfo.startIndex + ri!gridPagingInfo.batchSize > ri!gridData.totalCount,
        {},
        a!dynamicLink(
          value: (
            fn!quotient(
              ri!gridData.totalCount,
              ri!gridPagingInfo.batchSize
            ) * ri!gridPagingInfo.batchSize
          ) + 1,
          saveInto: ri!gridPagingInfo.startIndex
        )
      ),
      showWhen: and(
        ri!gridData.totalCount > 0,
        ri!gridPagingInfo.startIndex + ri!gridPagingInfo.batchSize <= ri!gridData.totalCount
      ),
      size: "MEDIUM",
      style: "STRONG"
    ),
    a!richTextItem(text: "  ")
  },
  showWhen: AND(
    a!isNotNullOrEmpty(ri!gridData),
    ri!gridData.totalCount > 0
  ),
  align: "RIGHT"
)
========================================================================================
gridHeaders (List of Text String): {
  "Header1",
  "Header2",
  "Header3",
  "Header4",
  "Header5",
  "Header6",
  "Header7",
  "Header8",
  "Header9",
  "Header10",
  "Expand"
}

gridData (Any Type): {
  {
    a: "AAA",
    b: 1,
    c: "BBB",
    d: "AB1",
    e: "AB2",
    f: "AB3",
    g: "AB4",
    h: "AB5",
    i: "AB6",
    j: "AB7",
    k: "AB8",
    l: "AB9",
    m: "AB10",
    n: "AB11",
    o: "AB12",
    p: "AB13",
    q: "AB14",
    r: "AB15",
    s: "AB16",
    t: "AB17"
  },
  {
    a: "CCC",
    b: 2,
    c: "DDD",
    d: "CD1",
    e: "CD2",
    f: "CD3",
    g: "CD4",
    h: "CD5",
    i: "CD6",
    j: "CD7",
    k: "CD8",
    l: "CD9",
    m: "CD10",
    n: "CD11",
    o: "CD12",
    p: "CD13",
    q: "CD14",
    r: "CD15",
    s: "CD16",
    t: "CD17"
  },
  {
    a: "EEE",
    b: 3,
    c: "FFF",
    d: "EF1",
    e: "EF2",
    f: "EF3",
    g: "EF4",
    h: "EF5",
    i: "EF6",
    j: "EF7",
    k: "EF8",
    l: "EF9",
    m: "EF10",
    n: "EF11",
    o: "EF12",
    p: "EF13",
    q: "EF14",
    r: "EF15",
    s: "EF16",
    t: "EF17"
  },
  {
    a: "GGG",
    b: 4,
    c: "HHH",
    d: "GH1",
    e: "GH2",
    f: "GH3",
    g: "GH4",
    h: "GH5",
    i: "GH6",
    j: "GH7",
    k: "GH8",
    l: "GH9",
    m: "GH10",
    n: "GH11",
    o: "GH12",
    p: "GH13",
    q: "GH14",
    r: "GH15",
    s: "GH16",
    t: "GH17"
  },
  {
    a: "III",
    b: 5,
    c: "JJJ",
    d: "IJ1",
    e: "IJ2",
    f: "IJ3",
    g: "IJ4",
    h: "IJ5",
    i: "IJ6",
    j: "IJ7",
    k: "IJ8",
    l: "IJ9",
    m: "IJ10",
    n: "IJ11",
    o: "IJ12",
    p: "IJ13",
    q: "IJ14",
    r: "IJ15",
    s: "IJ16",
    t: "IJ17"
  },
  {
    a: "KKK",
    b: 6,
    c: "LLL",
    d: "KL1",
    e: "KL2",
    f: "KL3",
    g: "KL4",
    h: "KL5",
    i: "KL6",
    j: "KL7",
    k: "KL8",
    l: "KL9",
    m: "KL10",
    n: "KL11",
    o: "KL12",
    p: "KL13",
    q: "KL14",
    r: "KL15",
    s: "KL16",
    t: "KL17"
  },
  {
    a: "MMM",
    b: 7,
    c: "NNN",
    d: "MN1",
    e: "MN2",
    f: "MN3",
    g: "MN4",
    h: "MN5",
    i: "MN6",
    j: "MN7",
    k: "MN8",
    l: "MN9",
    m: "MN10",
    n: "MN11",
    o: "MN12",
    p: "MN13",
    q: "MN14",
    r: "MN15",
    s: "MN16",
    t: "MN17"
  },
  {
    a: "OOO",
    b: 8,
    c: "PPP",
    d: "OP1",
    e: "OP2",
    f: "OP3",
    g: "OP4",
    h: "OP5",
    i: "OP6",
    j: "OP7",
    k: "OP8",
    l: "OP9",
    m: "OP10",
    n: "OP11",
    o: "OP12",
    p: "OP13",
    q: "OP14",
    r: "OP15",
    s: "OP16",
    t: "OP17"
  },
  {
    a: "QQQ",
    b: 9,
    c: "RRR",
    d: "QR1",
    e: "QR2",
    f: "QR3",
    g: "QR4",
    h: "QR5",
    i: "QR6",
    j: "QR7",
    k: "QR8",
    l: "QR9",
    m: "QR10",
    n: "QR11",
    o: "QR12",
    p: "QR13",
    q: "QR14",
    r: "QR15",
    s: "QR16",
    t: "QR17"
  },
  {
    a: "SSS",
    b: 10,
    c: "TTT",
    d: "ST1",
    e: "ST2",
    f: "ST3",
    g: "ST4",
    h: "ST5",
    i: "ST6",
    j: "ST7",
    k: "ST8",
    l: "ST9",
    m: "ST10",
    n: "ST11",
    o: "ST12",
    p: "ST13",
    q: "ST14",
    r: "ST15",
    s: "ST16",
    t: "ST17"
  }
}

RE: Split Grid

osanchea — Wed, 04 Jun 2025 17:15:08 GMT

Hi. I tried to replicate it. Refer this code.

a!localVariables(
  local!data: {
    {
      "first_name": "Grata",
      "last_name": "Sprigging",
      "age": 19,
      "gender": "Female",
      "email": "gsprigging0@webnode.com",
      "phone_number": "591-489-7807",
      "address": "1147 Springs Center",
      "city": "Moshiyi",
      "state": null,
      "country": "China",
      "birthdate": "4/9/1972",
      "occupation": "Biostatistician IV",
      "education_level": "PhD"
    },
    {
      "first_name": "Becca",
      "last_name": "Backen",
      "age": 38,
      "gender": "Female",
      "email": "bbacken1@aol.com",
      "phone_number": "516-801-6756",
      "address": "75976 Brentwood Drive",
      "city": "Dalarik",
      "state": null,
      "country": "Armenia",
      "birthdate": "3/11/1977",
      "occupation": "Marketing Assistant",
      "education_level": "High School"
    },
    {
      "first_name": "Bernete",
      "last_name": "Shaylor",
      "age": 56,
      "gender": "Female",
      "email": "bshaylor2@tuttocitta.it",
      "phone_number": "665-166-6231",
      "address": "3 Westport Lane",
      "city": "Tangxi",
      "state": null,
      "country": "China",
      "birthdate": "9/13/1961",
      "occupation": "Recruiter",
      "education_level": "Associate's Degree"
    },
    {
      "first_name": "Elbertina",
      "last_name": "Zuann",
      "age": 22,
      "gender": "Female",
      "email": "ezuann3@zimbio.com",
      "phone_number": "469-480-1524",
      "address": "9756 Judy Park",
      "city": "Brudzew",
      "state": null,
      "country": "Poland",
      "birthdate": "1/17/1982",
      "occupation": "Pharmacist",
      "education_level": "High School"
    },
    {
      "first_name": "Davin",
      "last_name": "Medcalf",
      "age": 24,
      "gender": "Male",
      "email": "dmedcalf4@mysql.com",
      "phone_number": "923-661-2407",
      "address": "67996 Forest Run Circle",
      "city": "Ganyi",
      "state": null,
      "country": "China",
      "birthdate": "1/23/1985",
      "occupation": "Engineer IV",
      "education_level": "Associate's Degree"
    },
    {
      "first_name": "Sandy",
      "last_name": "Penwright",
      "age": 81,
      "gender": "Female",
      "email": "spenwright5@ed.gov",
      "phone_number": "151-768-3300",
      "address": "63 Cardinal Lane",
      "city": "Faaone",
      "state": null,
      "country": "French Polynesia",
      "birthdate": "6/18/1982",
      "occupation": "Automation Specialist I",
      "education_level": "High School"
    },
    {
      "first_name": "Chrysa",
      "last_name": "Macilhench",
      "age": 67,
      "gender": "Female",
      "email": "cmacilhench6@miitbeian.gov.cn",
      "phone_number": "172-720-0782",
      "address": "878 Menomonie Center",
      "city": "Kufayrit",
      "state": null,
      "country": "Palestinian Territory",
      "birthdate": "7/13/1982",
      "occupation": "Project Manager",
      "education_level": "Master's Degree"
    },
    {
      "first_name": "Gayel",
      "last_name": "Painter",
      "age": 38,
      "gender": "Female",
      "email": "gpainter7@archive.org",
      "phone_number": "542-334-4340",
      "address": "987 Lerdahl Parkway",
      "city": "Ochër",
      "state": null,
      "country": "Russia",
      "birthdate": "8/17/1964",
      "occupation": "Executive Secretary",
      "education_level": "PhD"
    },
    {
      "first_name": "Evanne",
      "last_name": "Norway",
      "age": 43,
      "gender": "Female",
      "email": "enorway8@buzzfeed.com",
      "phone_number": "227-304-1738",
      "address": "402 Warrior Street",
      "city": "Cañasgordas",
      "state": null,
      "country": "Colombia",
      "birthdate": "8/5/1980",
      "occupation": "Recruiting Manager",
      "education_level": "PhD"
    },
    {
      "first_name": "Letti",
      "last_name": "Haydon",
      "age": 27,
      "gender": "Bigender",
      "email": "lhaydon9@chron.com",
      "phone_number": "562-850-5581",
      "address": "3 Crest Line Drive",
      "city": "Wudian",
      "state": null,
      "country": "China",
      "birthdate": "6/27/1968",
      "occupation": "Physical Therapy Assistant",
      "education_level": "Associate's Degree"
    },
    {
      "first_name": "Claiborne",
      "last_name": "Balk",
      "age": 24,
      "gender": "Male",
      "email": "cbalka@desdev.cn",
      "phone_number": "427-904-2405",
      "address": "90264 Union Park",
      "city": "Bulihan",
      "state": null,
      "country": "Philippines",
      "birthdate": "8/12/1974",
      "occupation": "Operator",
      "education_level": "Associate's Degree"
    },
    {
      "first_name": "Hansiain",
      "last_name": "Guiett",
      "age": 18,
      "gender": "Genderqueer",
      "email": "hguiettb@house.gov",
      "phone_number": "113-672-2759",
      "address": "62018 Sundown Road",
      "city": "Senglea",
      "state": null,
      "country": "Malta",
      "birthdate": "6/22/1972",
      "occupation": "Food Chemist",
      "education_level": "PhD"
    },
    {
      "first_name": "Fax",
      "last_name": "Birchenough",
      "age": 73,
      "gender": "Male",
      "email": "fbirchenoughc@cbsnews.com",
      "phone_number": "441-797-6950",
      "address": "2349 Dexter Avenue",
      "city": "Shashūbay",
      "state": null,
      "country": "Kazakhstan",
      "birthdate": "6/8/1958",
      "occupation": "Project Manager",
      "education_level": "Master's Degree"
    },
    {
      "first_name": "Sigfrid",
      "last_name": "Verdun",
      "age": 85,
      "gender": "Male",
      "email": "sverdund@techcrunch.com",
      "phone_number": "639-450-7393",
      "address": "66 Walton Circle",
      "city": "Ipatinga",
      "state": null,
      "country": "Brazil",
      "birthdate": "1/13/1987",
      "occupation": "Speech Pathologist",
      "education_level": "Master's Degree"
    },
    {
      "first_name": "Erinn",
      "last_name": "Carl",
      "age": 72,
      "gender": "Female",
      "email": "ecarle@webmd.com",
      "phone_number": "374-587-9504",
      "address": "562 Armistice Pass",
      "city": "Talabaan",
      "state": null,
      "country": "Philippines",
      "birthdate": "12/31/1975",
      "occupation": "Human Resources Manager",
      "education_level": "High School"
    },
    {
      "first_name": "Mamie",
      "last_name": "Atto",
      "age": 48,
      "gender": "Genderfluid",
      "email": "mattof@ifeng.com",
      "phone_number": "562-471-4576",
      "address": "26070 Waxwing Alley",
      "city": "Banjar Tegal Belodan",
      "state": null,
      "country": "Indonesia",
      "birthdate": "10/23/1988",
      "occupation": "Structural Engineer",
      "education_level": "Associate's Degree"
    },
    {
      "first_name": "Barbabas",
      "last_name": "Gateland",
      "age": 30,
      "gender": "Male",
      "email": "bgatelandg@homestead.com",
      "phone_number": "731-946-6786",
      "address": "125 Wayridge Trail",
      "city": "Ô Môn",
      "state": null,
      "country": "Vietnam",
      "birthdate": "9/14/1956",
      "occupation": "Research Nurse",
      "education_level": "High School"
    },
    {
      "first_name": "Dot",
      "last_name": "Millberg",
      "age": 29,
      "gender": "Agender",
      "email": "dmillbergh@google.nl",
      "phone_number": "423-990-2042",
      "address": "3164 Bartelt Trail",
      "city": "Mont-de-Marsan",
      "state": "Aquitaine",
      "country": "France",
      "birthdate": "7/24/1959",
      "occupation": "Programmer Analyst II",
      "education_level": "Associate's Degree"
    },
    {
      "first_name": "Ivett",
      "last_name": "Hosby",
      "age": 32,
      "gender": "Female",
      "email": "ihosbyi@ox.ac.uk",
      "phone_number": "831-498-8244",
      "address": "98 High Crossing Road",
      "city": "Daidaon",
      "state": null,
      "country": "China",
      "birthdate": "4/5/1969",
      "occupation": "Electrical Engineer",
      "education_level": "PhD"
    },
    {
      "first_name": "Barthel",
      "last_name": "Norvel",
      "age": 54,
      "gender": "Male",
      "email": "bnorvelj@cdc.gov",
      "phone_number": "273-397-2673",
      "address": "41881 Westport Place",
      "city": "Druzhny",
      "state": null,
      "country": "Belarus",
      "birthdate": "12/8/1984",
      "occupation": "Electrical Engineer",
      "education_level": "Master's Degree"
    }
  },
  local!paging: a!pagingInfo(startIndex: 1, batchSize: 10),
  local!dataSubsetTemp: todatasubset(
    arrayToPage: local!data,
    pagingConfiguration: local!paging
  ),
  local!selectionId: tointeger(null),
  {
    a!cardLayout(
      contents: {
        a!columnsLayout(
          columns: {
            a!columnLayout(
              contents: {
                a!dropdownField(
                  choiceLabels: {"Option 1", "Option 2", "Option 3", "Option 4",
                                  "Option 5", "Option 6", "Option 7", "Option 8",
                                  "Option 9", "Option 10", "Option 11", "Option 12"},
                  choiceValues: {1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12},
                  label: "City",
                  labelPosition: "ABOVE",
                  placeholder: "--- Select a Value ---",
                  saveInto: {},
                  searchDisplay: "AUTO",
                  validations: {}
                )
              }
            ),
            a!columnLayout(
              contents: {
                a!dropdownField(
                  choiceLabels: {"Option 1", "Option 2", "Option 3", "Option 4",
                                  "Option 5", "Option 6", "Option 7", "Option 8",
                                  "Option 9", "Option 10", "Option 11", "Option 12"},
                  choiceValues: {1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12},
                  label: "Country",
                  labelPosition: "ABOVE",
                  placeholder: "--- Select a Value ---",
                  saveInto: {},
                  searchDisplay: "AUTO",
                  validations: {}
                )
              }
            ),
            a!columnLayout(
              contents: {}
            ),
            a!columnLayout(
              contents: {}
            ),
            a!columnLayout(
              contents: {}
            ),
            a!columnLayout(
              contents: {}
            )
          }
        )
      },
      height: "AUTO",
      style: "NAVY_SCHEME",
      marginBelow: "STANDARD"
    ),
    a!columnsLayout(
      columns: {
        a!columnLayout(
          contents: {
          },
          width: "EXTRA_NARROW"
        ),
        a!columnLayout(
          contents: {
            a!richTextDisplayField(
              labelPosition: "COLLAPSED",
              value: {
                a!richTextItem(
                  text: {
                    "Name"
                  },
                  style: { "STRONG" }
                )
              }
            )
          }
        ),
        a!columnLayout(
          contents: {
            a!richTextDisplayField(
              labelPosition: "COLLAPSED",
              value: { a!richTextItem(text: { "Email" }, style: "STRONG") }
            )
          }
        ),
        a!columnLayout(
          contents: {
            a!richTextDisplayField(
              labelPosition: "COLLAPSED",
              value: { a!richTextItem(text: { "Address" }, style: "STRONG") }
            )
          }
        ),
        a!columnLayout(
          contents: {
            a!richTextDisplayField(
              labelPosition: "COLLAPSED",
              value: { a!richTextItem(text: { "City" }, style: "STRONG") }
            )
          }
        ),
        a!columnLayout(
          contents: {
            a!richTextDisplayField(
              labelPosition: "COLLAPSED",
              value: { a!richTextItem(text: { "Country" }, style: "STRONG") }
            )
          }
        )
      }
    ),
    a!forEach(
      items: local!dataSubsetTemp.data,
      expression: {
        a!horizontalLine(marginAbove: "NONE", marginBelow: "LESS"),
        a!columnsLayout(
          columns: {
            a!columnLayout(
              contents: {
                a!imageField(
                  images: { a!userImage() },
                  size: "ICON_PLUS",
                  style: "AVATAR",
                  align: "CENTER"
                )
              },
              width: "EXTRA_NARROW"
            ),
            a!columnLayout(
              contents: {
                a!richTextDisplayField(
                  labelPosition: "COLLAPSED",
                  value: {
                    a!richTextItem(
                      text: {
                        concat(
                          fv!item.first_name,
                          " ",
                          fv!item.last_name
                        )
                      },
                      link: a!dynamicLink(
                        saveInto: {
                          a!save(local!selectionId, fv!index)
                        }
                      ),
                      linkStyle: "STANDALONE",
                      style: { "STRONG" }
                    )
                  }
                )
              }
            ),
            a!columnLayout(
              contents: {
                a!richTextDisplayField(
                  labelPosition: "COLLAPSED",
                  value: { a!richTextItem(text: { fv!item.email }) }
                )
              }
            ),
            a!columnLayout(
              contents: {
                a!richTextDisplayField(
                  labelPosition: "COLLAPSED",
                  value: { a!richTextItem(text: { fv!item.address }) }
                )
              }
            ),
            a!columnLayout(
              contents: {
                a!richTextDisplayField(
                  labelPosition: "COLLAPSED",
                  value: { a!richTextItem(text: { fv!item.city }) }
                )
              }
            ),
            a!columnLayout(
              contents: {
                a!richTextDisplayField(
                  labelPosition: "COLLAPSED",
                  value: { a!richTextItem(text: { fv!item.country }) }
                )
              }
            )
          },
          alignVertical: "MIDDLE"
        ),
        if(
          fv!index = local!selectionId,
          {
            a!cardLayout(
              contents: {
                a!sideBySideLayout(
                  items: {
                    a!sideBySideItem(
                      item: a!richTextDisplayField(
                        labelPosition: "COLLAPSED",
                        value: {
                          a!richTextItem(
                            text: { concat(fv!item.first_name, " ", fv!item.last_name) },
                            size: "MEDIUM_PLUS",
                            style: { "STRONG" }
                          )
                        }
                      ),
                      width: "MINIMIZE"
                    ),
                    a!sideBySideItem(
                      item: a!tagField(
                        labelPosition: "COLLAPSED",
                        tags: {
                          a!tagItem(
                            text: "Active",
                            backgroundColor: "POSITIVE"
                          )
                        }
                      )
                    )
                  }
                ),
                a!richTextDisplayField(
                  labelPosition: "COLLAPSED",
                  value: {
                    a!richTextItem(
                      text: { fv!item.occupation },
                      size: "STANDARD",
                      style: { "STRONG" }
                    ),
                    " | Staff"
                  }
                ),
                a!horizontalLine(),
                a!cardLayout(
                  contents: {
                    a!columnsLayout(
                      columns: {
                        a!columnLayout(
                          contents: {
                            a!imageField(
                              label: "",
                              labelPosition: "COLLAPSED",
                              images: { a!userImage(user: null) },
                              size: "SMALL_PLUS",
                              isThumbnail: false,
                              style: "STANDARD"
                            )
                          }
                        ),
                        a!columnLayout(
                          contents: {
                            a!richTextDisplayField(
                              labelPosition: "COLLAPSED",
                              value: {
                                a!richTextItem(text: { "Field" }, style: { "STRONG" }),
                                char(10),
                                "test"
                              }
                            ),
                            a!richTextDisplayField(
                              labelPosition: "COLLAPSED",
                              value: {
                                a!richTextItem(text: { "Field" }, style: { "STRONG" }),
                                char(10),
                                "test"
                              }
                            )
                          }
                        ),
                        a!columnLayout(
                          contents: {
                            a!richTextDisplayField(
                              labelPosition: "COLLAPSED",
                              value: {
                                a!richTextItem(text: { "Field" }, style: { "STRONG" }),
                                char(10),
                                "test"
                              }
                            ),
                            a!richTextDisplayField(
                              labelPosition: "COLLAPSED",
                              value: {
                                a!richTextItem(text: { "Field" }, style: { "STRONG" }),
                                char(10),
                                "test"
                              }
                            )
                          }
                        ),
                        a!columnLayout(
                          contents: {
                            a!richTextDisplayField(
                              labelPosition: "COLLAPSED",
                              value: {
                                a!richTextItem(text: { "Field" }, style: { "STRONG" }),
                                char(10),
                                "test"
                              }
                            ),
                            a!richTextDisplayField(
                              labelPosition: "COLLAPSED",
                              value: {
                                a!richTextItem(text: { "Field" }, style: { "STRONG" }),
                                char(10),
                                "test"
                              }
                            )
                          }
                        )
                      },
                      alignVertical: "MIDDLE"
                    )
                  },
                  height: "AUTO",
                  style: "NONE",
                  marginBelow: "STANDARD"
                ),
                a!cardLayout(
                  contents: {
                    a!columnsLayout(
                      columns: {
                        a!columnLayout(
                          contents: {
                            a!cardLayout(
                              contents: {
                                a!sideBySideLayout(
                                  items: {
                                    a!sideBySideItem(
                                      item: a!richTextDisplayField(
                                        labelPosition: "COLLAPSED",
                                        value: {
                                          "Total Awards",
                                          char(10),
                                          a!richTextItem(
                                            text: { "12" },
                                            size: "MEDIUM_PLUS",
                                            style: { "STRONG" }
                                          ),
                                          char(10),
                                          a!richTextItem(
                                            text: { "20% Higher Last Year" },
                                            size: "STANDARD"
                                          )
                                        }
                                      )
                                    ),
                                    a!sideBySideItem(
                                      item: a!richTextDisplayField(
                                        labelPosition: "COLLAPSED",
                                        value: {
                                          a!richTextIcon(icon: "medal", size: "MEDIUM_PLUS")
                                        }
                                      ),
                                      width: "MINIMIZE"
                                    )
                                  }
                                )
                              },
                              height: "AUTO",
                              style: "NONE",
                              marginBelow: "STANDARD",
                              showBorder: false
                            )
                          }
                        ),
                        a!columnLayout(
                          contents: {
                            a!cardLayout(
                              contents: {
                                a!sideBySideLayout(
                                  items: {
                                    a!sideBySideItem(
                                      item: a!richTextDisplayField(
                                        labelPosition: "COLLAPSED",
                                        value: {
                                          "Total Awards",
                                          char(10),
                                          a!richTextItem(
                                            text: { "12" },
                                            size: "MEDIUM_PLUS",
                                            style: { "STRONG" }
                                          ),
                                          char(10),
                                          a!richTextItem(
                                            text: { "20% Higher Last Year" },
                                            size: "STANDARD"
                                          )
                                        }
                                      )
                                    ),
                                    a!sideBySideItem(
                                      item: a!richTextDisplayField(
                                        labelPosition: "COLLAPSED",
                                        value: {
                                          a!richTextIcon(icon: "medal", size: "MEDIUM_PLUS")
                                        }
                                      ),
                                      width: "MINIMIZE"
                                    )
                                  }
                                )
                              },
                              height: "AUTO",
                              style: "NONE",
                              marginBelow: "STANDARD",
                              showBorder: false
                            )
                          }
                        ),
                        a!columnLayout(
                          contents: {
                            a!cardLayout(
                              contents: {
                                a!sideBySideLayout(
                                  items: {
                                    a!sideBySideItem(
                                      item: a!richTextDisplayField(
                                        labelPosition: "COLLAPSED",
                                        value: {
                                          "Total Awards",
                                          char(10),
                                          a!richTextItem(
                                            text: { "12" },
                                            size: "MEDIUM_PLUS",
                                            style: { "STRONG" }
                                          ),
                                          char(10),
                                          a!richTextItem(
                                            text: { "20% Higher Last Year" },
                                            size: "STANDARD"
                                          )
                                        }
                                      )
                                    ),
                                    a!sideBySideItem(
                                      item: a!richTextDisplayField(
                                        labelPosition: "COLLAPSED",
                                        value: {
                                          a!richTextIcon(icon: "medal", size: "MEDIUM_PLUS")
                                        }
                                      ),
                                      width: "MINIMIZE"
                                    )
                                  }
                                )
                              },
                              height: "AUTO",
                              style: "NONE",
                              shape: "SEMI_ROUNDED",
                              marginBelow: "STANDARD",
                              showBorder: false
                            )
                          }
                        ),
                        a!columnLayout(
                          contents: {
                            a!cardLayout(
                              contents: {
                                a!sideBySideLayout(
                                  items: {
                                    a!sideBySideItem(
                                      item: a!richTextDisplayField(
                                        labelPosition: "COLLAPSED",
                                        value: {
                                          "Total Awards",
                                          char(10),
                                          a!richTextItem(
                                            text: { "12" },
                                            size: "MEDIUM_PLUS",
                                            style: { "STRONG" }
                                          ),
                                          char(10),
                                          a!richTextItem(
                                            text: { "20% Higher Last Year" },
                                            size: "STANDARD"
                                          )
                                        }
                                      )
                                    ),
                                    a!sideBySideItem(
                                      item: a!richTextDisplayField(
                                        labelPosition: "COLLAPSED",
                                        value: {
                                          a!richTextIcon(icon: "medal", size: "MEDIUM_PLUS")
                                        }
                                      ),
                                      width: "MINIMIZE"
                                    )
                                  }
                                )
                              },
                              height: "AUTO",
                              style: "NONE",
                              shape: "SEMI_ROUNDED",
                              marginBelow: "STANDARD"
                            )
                          }
                        )
                      },
                      alignVertical: "MIDDLE"
                    )
                  },
                  height: "AUTO",
                  style: "TRANSPARENT",
                  padding: "NONE",
                  marginBelow: "NONE",
                  showBorder: false
                )
              },
              height: "AUTO",
              style: "#e8e6e6",
              shape: "SEMI_ROUNDED",
              marginBelow: "STANDARD",
              showBorder: false
            )
          },
          {}
        )
      }
    ),
    a!sideBySideLayout(
      items: {
        a!sideBySideItem(),
        a!sideBySideItem(
          item: a!richTextDisplayField(
            value: {
              a!richTextIcon(
                icon: "angle-double-left",
                link: a!dynamicLink(
                  saveInto: {
                    a!save(local!paging.startIndex, 1),
                    a!save(
                      local!dataSubsetTemp,
                      /* Since we're retrieving users from an Appian group instead of a query, we make our own datasubset */
                      todatasubset(arrayToPage: local!data, pagingConfiguration: local!paging)
                    ),
                    a!save(local!selectionId, tointeger(null))
                  },
                  showWhen: local!paging.startIndex <> 1
                ),
                linkStyle: "STANDALONE",
                color: if(
                  local!paging.startIndex <> 1,
                  "STANDARD",
                  "SECONDARY"
                )
              ),
              a!richTextIcon(
                icon: "angle-left",
                link: a!dynamicLink(
                  saveInto: {
                    a!save(
                      local!paging.startIndex,
                      if(
                        local!paging.startIndex - local!paging.batchSize < 1,
                        1,
                        local!paging.startIndex - local!paging.batchSize
                      )
                    ),
                    a!save(local!selectionId, tointeger(null))
                  },
                  showWhen: local!paging.startIndex <> 1
                ),
                linkStyle: "STANDALONE",
                color: if(
                  local!paging.startIndex <> 1,
                  "STANDARD",
                  "SECONDARY"
                )
              ),
              " ",
              a!richTextItem(
                text: {
                  local!paging.startIndex,
                  " - ",
                  if(
                    local!paging.startIndex + local!paging.batchSize - 1 > local!dataSubsetTemp.totalCount,
                    local!dataSubsetTemp.totalCount,
                    local!paging.startIndex + local!paging.batchSize - 1
                  )
                },
                style: "STRONG"
              ),
              a!richTextItem(
                text: {
                  " of ",
                  fixed(local!dataSubsetTemp.totalCount, 0)
                }
              ),
              " ",
              a!richTextIcon(
                icon: "angle-right",
                link: a!dynamicLink(
                  saveInto: {
                    a!save(
                      local!paging,
                      a!pagingInfo(
                        startIndex: local!paging.startIndex + local!paging.batchSize,
                        batchSize: local!paging.batchSize
                      )
                    ),
                    a!save(local!selectionId, tointeger(null))
                  },
                  showWhen: local!paging.startIndex + local!paging.batchSize - 1 < local!dataSubsetTemp.totalCount
                ),
                linkStyle: "STANDALONE",
                color: if(
                  local!paging.startIndex + local!paging.batchSize - 1 < local!dataSubsetTemp.totalCount,
                  "STANDARD",
                  "SECONDARY"
                )
              ),
              a!richTextIcon(
                icon: "angle-double-right",
                link: a!dynamicLink(
                  saveInto: {
                    a!save(
                      local!paging.startIndex,
                      /* When jumping to the last page, make sure that the startIndex is an even multiple of batch size. *
                                   * This ensures that you have the same last page as if you had gotten there one page at a time.    */
                      if(
                        mod(local!dataSubsetTemp.totalCount, local!paging.batchSize) = 0,
                        local!dataSubsetTemp.totalCount - local!paging.batchSize + 1,
                        local!dataSubsetTemp.totalCount - mod(local!dataSubsetTemp.totalCount, local!paging.batchSize) + 1
                      )
                    ),
                    a!save(local!selectionId, tointeger(null))
                  },
                  showWhen: local!paging.startIndex + local!paging.batchSize - 1 < local!dataSubsetTemp.totalCount
                ),
                linkStyle: "STANDALONE",
                color: if(
                  local!paging.startIndex + local!paging.batchSize - 1 < local!dataSubsetTemp.totalCount,
                  "STANDARD",
                  "SECONDARY"
                )
              )
            }
          ),
          width: "MINIMIZE"
        )
      }
    )
  }
)

RE: Split Grid

Zakary Melvin — Wed, 04 Jun 2025 15:47:02 GMT

This can be achieved using two grid fields separated by a section layout.

First a!gridField()

Displays all rows with an index lower than the selected row.
Displays all rows if no selection is made.
Does not display if the selected row is at the first index.
Selectable set to true
Use selectionSaveInto to save into a local varaible for use in the a!sectionLayout()

a!sectionLayout()

Displays additional information for the selected row in whatever format best fits your needs.
Does not display if no selection has been made.

Second a!gridField()

Displays all rows with an index greater than the selected row.
Does not display if selected row is at the last index
Does not display if no selection is made.
Selectable set to true
Use selectionSaveInto to save into a local varaible for use in the a!sectionLayout()

RE: Split Grid

Abdul Rahim — Wed, 04 Jun 2025 11:50:19 GMT

Thanks for the brief response, any idea how the code will be?

RE: Split Grid

Abdul Rahim — Wed, 04 Jun 2025 11:50:12 GMT

Thanks for the brief response, any idea how the code will be?

RE: Split Grid

Harsha Sharma — Wed, 04 Jun 2025 05:59:55 GMT

It seems ColumnLayout is used to render the grid and the dynamic link is used to show the related details in a cardLayout. Other layout like side by side etc are used to display the details in intuitive manner.

RE: Split Grid

varung120549 — Wed, 04 Jun 2025 05:57:56 GMT

It's just combination of multiple components and Visibility conditions.
Having consistent use of layouts and clean UI makes Screen Intuitive & Attractive

RE: Split Grid

Shubham Aware — Wed, 04 Jun 2025 05:31:49 GMT

This dashboard might not use Appian's native grid components. Instead, it likely mimics a grid-like UI by combining layout tools like columnsLayout or sectionLayout with read-only fields.
This simplifies mixed-content layouts while keeping a structured design.