How to apply Pagination on cardLayouts

Question

instead of using gridField, we are using cardLayouts to display data for better look and feel , but wanted to know how we can apply custom pagination and sorting on these cardLayouts.

Vincent Mark · Answer

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

PhilB · Answer

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.

Andrew Zysk · Answer

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