Implementing pagination for displaying records with navigation button

why are you storing the data in local variable ?

Are you using cards and forEach to display this data in above format ?

One way could be that you introduce pagination in your query to fetch only 5 records at a time and have next and back button to update a local variable which is passed as startIndex in the query. Also you would need to get total count so that you can determine the last call of your query.

use this thread to understand how you could achieve this in detail

community.appian.com/.../next-and-back-button-for-records-in-a-read-only-grid

What is the use case for this approach. Is for editable grid or readonly grid?

If you want to just display the data from the record type in the readonly grid, you can simply select the record type as data source.

Else you need to have custom pagination

Thanks Kumar Agniwesh ,

I have implemented similar kind of approach.

Sharing the code below for future reference to any community member.

a!localVariables(
  local!currentPage: 1,
  /*desired batch size*/
  local!batchSize: 5, 
  local!pagingInfo: a!pagingInfo(
    startIndex: 1,
    batchSize: local!batchSize
  ),
  local!Data: recordType!(pagingInfo: local!pagingInfo),
  {
    a!sectionLayout(
      label: "",
      contents: {
        a!forEach(
          items: local!Data.data,
          expression: {
            /*Content*/
          }
        )
      },
      divider: "ABOVE",
      dividerWeight: "THIN"
    ),
    a!richTextDisplayField(
      labelPosition: "COLLAPSED",
      value: {
        a!richTextIcon(
          icon: "angle-double-left-bold",
          caption: "First",
          color: if(
            local!pagingInfo.startIndex > 1,
            "ACCENT",
            "SECONDARY"
          ),
          link: a!dynamicLink(
            saveInto: {
              a!save(
                local!pagingInfo.startIndex,
                1
              ),
              a!save(
                local!currentPage,
                1
              )
            },
            showWhen: local!pagingInfo.startIndex > 1
          ),
          linkStyle: "STANDALONE"
        ),
        a!richTextIcon(
          icon: "angle-left-bold",
          altText: "Previous Page",
          caption: "Previous",
          color: if(
            local!pagingInfo.startIndex > 1,
            "ACCENT",
            "SECONDARY"
          ),
          link: a!dynamicLink(
            saveInto: {
              a!save(
                local!pagingInfo.startIndex,
                if(
                  local!pagingInfo.startIndex - local!batchSize < 1,
                  1,
                  local!pagingInfo.startIndex - local!batchSize
                )
              ),
              a!save(
                local!currentPage,
                local!currentPage-1
              )
            },
            showWhen: local!pagingInfo.startIndex > 1
          ),
          linkStyle: "STANDALONE"
        ),
        a!richTextItem(
          text: concat(" ",local!currentPage, " "),
        ),
        a!richTextIcon(
          icon: "angle-right-bold",
          altText: "Next Page",
          caption: "Next",
          color: if(
            ceiling(local!pagingInfo.startIndex/local!batchSize) = ceiling(local!Data.totalCount/local!batchSize),
            "SECONDARY",
            "ACCENT"
          ),
          link: a!dynamicLink(
            saveInto: {
              a!save(
                local!pagingInfo.startIndex,
                local!pagingInfo.startIndex + local!batchSize
              ),
              a!save(
                local!currentPage,
                local!currentPage + 1
              )
            },
            showWhen: not(ceiling(local!pagingInfo.startIndex/local!batchSize) = ceiling(local!Data.totalCount/local!batchSize))
          ),
          linkStyle: "STANDALONE"
        ),
        a!richTextIcon(
          icon: "angle-double-right-bold",
          caption: "Last",
          color: if(
            ceiling(local!pagingInfo.startIndex/local!batchSize) = ceiling(local!Data.totalCount/local!batchSize),
            "SECONDARY",
            "ACCENT"
          ),
          link: a!dynamicLink(
            saveInto: {
              a!save(
                local!pagingInfo.startIndex,
                if(
                  local!Data.totalCount - mod(local!Data.totalCount, local!batchSize) = 0,
                  local!Data.totalCount - local!batchSize + 1,
                  local!Data.totalCount - mod(local!Data.totalCount, local!batchSize) + 1
                )
              ),
              a!save(
                local!currentPage,
                ceiling(local!Data.totalCount/local!batchSize)
              )
            },
            showWhen: not(ceiling(local!pagingInfo.startIndex/local!batchSize) = ceiling(local!Data.totalCount/local!batchSize))
          ),
          linkStyle: "STANDALONE"
        )
      },
      align: "RIGHT"
    )
  }
)

Result Image: 

Still would you like to share why are you not using read only grid ?

Hi Soma ,

Yes, the use case was to build a custom pagination. I was able to achieve it and shared the code in the same thread.