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

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 ?

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