Question

Implementing pagination for displaying records with navigation button

Forum|Forum|1 year ago
September 9, 2024
5 replies
0 views

Hi,

I'm currently working on an interface where I display data queried from a record type and store it in a local variable. I'm then looping through this local variable to display the content

Now I would like to modify my expression so that it only shows 5 records at a time, with next and back navigation buttons to show next set of records, similar to the functionality in a read-only grid. Can anyone please guide me how to achieve this?

interface

kumara0180

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

shantanuj524835Author

Thanks [mention:d71dc0922a44411db41369c6058e69ad:e9ed411860ed4f2ba0265705b8793d05] ,

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: