Split Grid

Question

Hi, I just wonder how the winner do this any idea? community.appian.com/.../split-grid

Ram · Accepted Answer

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

Shubham Aware · Answer

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.

Varun Teja Gurrapu · Answer

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

Harsha Sharma · Answer

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.

Zakary Melvin · Answer

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

Split Grid

Top Replies