RE: How to apply Pagination on cardLayouts

Vincent Mark — Thu, 08 Nov 2018 18:56:29 GMT

Lokesh Kothari Yes, it is possible but not fun and requires you to manually set up pagination on your data. Fortunately I wrote up a simple sample code for you. The pagination UI is near identical to Appian's out of the box paging grids, however the sort options are a little different. I hope this helps!

load(
  local!data: {
    {
      id: 1,
      name: "John",
      value: "your value here!"
    },
    {
      id: 2,
      name: "Mary",
      value: "your value here!"
    },
    {
      id: 3,
      name: "Ben",
      value: "your value here!"
    },
    {
      id: 4,
      name: "Ryan",
      value: "your value here!"
    },
    {
      id: 5,
      name: "Amy",
      value: "your value here!"
    },
    {
      id: 6,
      name: "Jennifer",
      value: "your value here!"
    },
    {
      id: 7,
      name: "Joe",
      value: "your value here!"
    },
    {
      id: 8,
      name: "Melissa",
      value: "your value here!"
    },
    {
      id: 9,
      name: "Anthony",
      value: "your value here!"
    }
  },
  local!pagingInfo: a!pagingInfo(
    startIndex: 1,
    batchSize: 3,
    sort: a!sortInfo(
      field: "id",
      ascending: true
    )
  ),
  with(
    local!datasubset: todatasubset(
      local!data,
      local!pagingInfo
    ),
    local!dataForCurrentPage: local!datasubset.data,
    {
      a!sectionLayout(
        contents: {
          a!boxLayout(
            label: "Sort",
            contents: {
              a!columnsLayout(
                columns: {
                  a!columnLayout(
                    contents: {
                      a!dropdownField(
                        label: "Field",
                        choiceLabels: {
                          "ID",
                          "Name",
                          "Value"
                        },
                        choiceValues: {
                          "id",
                          "name",
                          "value"
                        },
                        value: local!pagingInfo.sort.field,
                        saveInto: {
                          local!pagingInfo.sort.field,
                          a!save(
                            local!pagingInfo.startIndex,
                            1
                          )
                        }
                      )
                    }
                  ),
                  a!columnLayout(
                    contents: {
                      a!radioButtonField(
                        label: "Order",
                        choiceLabels: {
                          "Ascending",
                          "Descending"
                        },
                        choiceValues: {
                          true,
                          false
                        },
                        choiceLayout: "COMPACT",
                        value: local!pagingInfo.sort.ascending,
                        saveInto: {
                          local!pagingInfo.sort.ascending,
                          a!save(
                            local!pagingInfo.startIndex,
                            1
                          )
                        }
                      )
                    }
                  )
                }
              )
            }
          )
        }
      ),
      a!sectionLayout(
        contents: {
          a!forEach(
            items: local!dataForCurrentPage,
            expression: a!cardLayout(
              style: "STANDARD",
              contents: {
                a!columnsLayout(
                  columns: {
                    a!columnLayout(
                      contents: {
                        a!textField(
                          label: "ID",
                          readOnly: true,
                          value: property(
                            fv!item,
                            "id"
                          )
                        )
                      },
                      width: "NARROW"
                    ),
                    a!columnLayout(
                      contents: {
                        a!textField(
                          label: "Name",
                          readOnly: true,
                          value: property(
                            fv!item,
                            "name"
                          )
                        )
                      }
                    ),
                    a!columnLayout(
                      contents: {
                        a!textField(
                          label: "Some value",
                          readOnly: true,
                          value: property(
                            fv!item,
                            "value"
                          )
                        )
                      }
                    )
                  }
                )
              }
            )
          ),
          
        }
      ),
      a!sectionLayout(
        contents: {
          a!richTextDisplayField(
            align: "RIGHT",
            value: {
              a!richTextIcon(
                icon: "chevron-left",
                link: a!dynamicLink(
                  saveInto: a!save(
                    local!pagingInfo,
                    a!pagingInfo(
                      startIndex: local!pagingInfo.startIndex - local!pagingInfo.batchSize,
                      batchSize: local!pagingInfo.batchSize,
                      sort: local!pagingInfo.sort
                    )
                  ),
                  showWhen: local!pagingInfo.startIndex > 1
                ),
                linkStyle: "STANDALONE"
              ),
              a!richTextItem(
                text: {
                  char(
                    32
                  ),
                  a!richTextItem(
                    text: {
                      joinarray(
                        {
                          property(
                            local!pagingInfo,
                            "startIndex"
                          ),
                          char(
                            45
                          ),
                          property(
                            local!pagingInfo,
                            "startIndex"
                          ) + property(
                            local!pagingInfo,
                            "batchSize"
                          ) - 1
                        },
                        char(
                          32
                        )
                      )
                    },
                    style: "STRONG"
                  ),
                  char(
                    32
                  ),
                  joinarray(
                    {
                      "of",
                      count(
                        local!data
                      )
                    },
                    char(
                      32
                    )
                  ),
                  char(
                    32
                  )
                }
              ),
              a!richTextIcon(
                icon: "chevron-right",
                link: a!dynamicLink(
                  saveInto: a!save(
                    local!pagingInfo,
                    a!pagingInfo(
                      startIndex: local!pagingInfo.startIndex + local!pagingInfo.batchSize,
                      batchSize: local!pagingInfo.batchSize,
                      sort: local!pagingInfo.sort
                    )
                  ),
                  showWhen: local!pagingInfo.startIndex < count(
                    local!data
                  ) - local!pagingInfo.batchSize
                ),
                linkStyle: "STANDALONE"
              )
            }
          )
        }
      )
    }
  )
)

RE: How to apply Pagination on cardLayouts

Andrew Zysk — Mon, 29 Oct 2018 17:01:05 GMT

Setting selectionStyle as "ROW_HIGHLIGHT" could also be useful to get the desired look.

RE: How to apply Pagination on cardLayouts

PhilB — Mon, 29 Oct 2018 09:46:59 GMT

Have you tried playing with the spacing, borderStyle, shadeAlternateRows or selectionStyle to achieve this look with a conventional paging grid? Specifically, using borderStyle: "LIGHT" comes very close to the look in your screenshot.

RE: How to apply Pagination on cardLayouts

chandu — Sun, 28 Oct 2018 10:20:42 GMT

At this point of time its a little bit complex in implementing the column sort like how you expect in the grid field, may be you can have a drop down sort by:column and type asc or desc, then change the data accordingly.

RE: How to apply Pagination on cardLayouts

Lokesh Kothari — Sun, 28 Oct 2018 07:29:20 GMT

what about column sorting

RE: How to apply Pagination on cardLayouts

chandu — Sat, 27 Oct 2018 16:33:22 GMT

Hi Lokesh Kothari,

High level we can try it out with the following way.

Design a generic card layout that takes the your details and displays within it.
Design one interface and user forEach to display first the generic card layout interface.
Below you try to use a!richTextIcon with the combination of dynamic link to change the pagination for this you need create an expression rule that handles the "<<", "<" ">" " >>"