Pagination for Box layout

Question

Hi, 
 
 I have a requirement to read data from Excel and display each record in box layout. I am parsing the excel value to CDT and looping for each row.I need to add pagination like 10 rows when load the page. How can I achieve this please help me.

Danny Verb · Accepted Answer

To achieve this you will need to do custom paging. You'll probably have a query in a local variable and a a!forEach() loop to loop through each value in the query to create a box layout. Then at the bottom, I recommend having custom rich text to handle paging.

/*ri!hidden items remove the first X number of items from the total datasubset in question
primary use is to hide the current interaction from a contact's recent interaction list while the agent is in conference*/
a!richTextDisplayField(
  showWhen: ri!showWhen,
  align: ri!align,
  labelPosition: "COLLAPSED",
  value: {
    /* Double Left Arrow */
    a!richTextIcon(
      showWhen: ri!pagingInfo.startIndex <> 1+ri!hiddenItems,
      icon: "angle-double-left",
      size: "MEDIUM",
      linkStyle: "STANDALONE",
      link: {
        a!dynamicLink(
          saveInto: {
            a!save(
              ri!pagingInfo.startIndex,
              1
            ),
            if(rule!APN_isEmpty(ri!saveInto),{},ri!saveInto)
          }
        )
      }
    ),
    "  ",
    /*  Left Arrow  */
    a!richTextIcon(
      showWhen: ri!pagingInfo.startIndex <> 1+ri!hiddenItems,
      icon: "angle-left",
      size: "MEDIUM",
      linkStyle: "STANDALONE",
      link: {
        a!dynamicLink(
          saveInto: {
            a!save(
              ri!pagingInfo.startIndex,
              ri!pagingInfo.startIndex - ri!pagingInfo.batchSize
            ),
            if(rule!APN_isEmpty(ri!saveInto),{},ri!saveInto)
          }
        )
      }
    ),
    /*  Current Page Indices  */
    a!richTextItem(
      text: ri!pagingInfo.startIndex-ri!hiddenItems & " - " & if(
        ri!pagingInfo.startIndex-ri!hiddenItems < ri!totalCount-ri!hiddenItems - ri!pagingInfo.batchSize + 1 = false,
        ri!totalCount-ri!hiddenItems,
        ri!pagingInfo.startIndex - 1 + ri!pagingInfo.batchSize-ri!hiddenItems
      ),
      style: "STRONG"
    ),
    /*  Total Count  */
    a!richTextItem(
      text: " of " & ri!totalCount-ri!hiddenItems
    ),
    /*  Right Arrow  */
    a!richTextIcon(
      showWhen: and(
        ri!pagingInfo.batchSize < ri!totalCount-ri!hiddenItems,
        ri!pagingInfo.startIndex-ri!hiddenItems < ri!totalCount-ri!hiddenItems - ri!pagingInfo.batchSize + 1
      ),
      icon: "angle-right",
      size: "MEDIUM",
      linkStyle: "STANDALONE",
      link: {
        a!dynamicLink(
          saveInto: {
            a!save(
              ri!pagingInfo.startIndex,
              ri!pagingInfo.startIndex + ri!pagingInfo.batchSize
            ),
            if(rule!APN_isEmpty(ri!saveInto),{},ri!saveInto)
          }
        )
      }
    ),
    " ",
    /*  Double Right Arrow  */
    a!richTextIcon(
      showWhen: and(
        ri!pagingInfo.batchSize < ri!totalCount-ri!hiddenItems,
        ri!pagingInfo.startIndex-ri!hiddenItems < ri!totalCount-ri!hiddenItems - ri!pagingInfo.batchSize + 1
      ),
      icon: "angle-double-right",
      size: "MEDIUM",
      linkStyle: "STANDALONE",
      link: {
        a!dynamicLink(
          saveInto: {
            a!save(
              ri!pagingInfo.startIndex,
              ri!totalCount - ri!pagingInfo.batchSize + 1
            ),
            if(rule!APN_isEmpty(ri!saveInto),{},ri!saveInto)
          }
        )
      }
    )
  }
)

Pagination for Box layout

Top Replies