• State Verified Answer
  • Replies 22 replies
  • Answers 5 answers
  • Subscribers 15 subscribers
  • Views 10775 views
  • Users 0 members are here
Related Discussions
Home » Discussions » New to Appian

Pagination in Editable Grid

Nishtha
Certified Senior Developer

Hi,

1)I want to Implement pagination in Editable Grid please guide me.

2)Add sorting arrows in Editable Grid header columns for sorting purpose.

Appreciate your help!!

Regards

Nishtha Bhatnagar

  Discussion posts and replies are publicly visible

Parents
  • 0
    Certified Senior Developer

    This code can be used to build pagination UI for editable grid

    with(
  local!maxStartIndex: 1 + rounddown(
    (
      ri!totalCount - 1
    ) / ri!pagingInfo.batchSize,
    0
  ) * ri!pagingInfo.batchSize,
  local!style: "STRONG",
  if(
    rule!replaceNull(
      ri!showWhen,
      true
    ),
    {
      a!richTextDisplayField(
        align: rule!replaceNull(
          ri!align,
          "CENTER"
        ),
        value: {
          a!richTextIcon(
            icon: "angle-double-left",
            size: "MEDIUM",
            link: if(
              property(
                ri!pagingInfo,
                "startIndex",
                1
              ) <> 1,
              a!dynamicLink(
                saveInto: {
                  a!save(
                    ri!pagingInfo,
                    a!pagingInfo(
                      startIndex: 1,
                      batchSize: property(
                        ri!pagingInfo,
                        "batchSize",
                        - 1
                      ),
                      sort: property(
                        ri!pagingInfo,
                        "sort",
                        null
                      )
                    )
                  ),
                  ri!saveInto
                }
              ),
              null
            ),
            linkStyle: "STANDALONE"
          ),
          a!richTextIcon(
            icon: "angle-left",
            size: "MEDIUM",
            link: if(
              property(
                ri!pagingInfo,
                "startIndex",
                1
              ) <> 1,
              a!dynamicLink(
                saveInto: {
                  a!save(
                    ri!pagingInfo,
                    a!pagingInfo(
                      startIndex: max(
                        1,
                        property(
                          ri!pagingInfo,
                          "startIndex",
                          1
                        ) - property(
                          ri!pagingInfo,
                          "batchSize",
                          0
                        )
                      ),
                      batchSize: property(
                        ri!pagingInfo,
                        "batchSize",
                        - 1
                      ),
                      sort: property(
                        ri!pagingInfo,
                        "sort",
                        null
                      )
                    )
                  ),
                  ri!saveInto
                }
              ),
              null
            ),
            linkStyle: "STANDALONE"
          ),
          a!richTextItem(
            text: concat(
              " ",
              min(
                ri!totalCount,
                property(
                  ri!pagingInfo,
                  "startIndex",
                  1
                )
              ),
              " - ",
              min(
                ri!totalCount,
                property(
                  ri!pagingInfo,
                  "startIndex",
                  1
                ) + if(
                  property(
                    ri!pagingInfo,
                    "batchSize",
                    - 1
                  ) = - 1,
                  ri!totalCount,
                  property(
                    ri!pagingInfo,
                    "batchSize",
                    - 1
                  )
                ) - 1
              )
            ),
            style: "STRONG",
            size: "STANDARD"
          ),
          a!richTextItem(
            text: concat(
              " of ",
              ri!totalCount,
              " "
            ),
            style: "STRONG",
            size: "STANDARD"
          ),
          a!richTextIcon(
            icon: "angle-right",
            size: "MEDIUM",
            link: if(
              property(
                ri!pagingInfo,
                "startIndex",
                1
              ) <> local!maxStartIndex,
              a!dynamicLink(
                saveInto: {
                  a!save(
                    ri!pagingInfo,
                    a!pagingInfo(
                      startIndex: min(
                        local!maxStartIndex,
                        property(
                          ri!pagingInfo,
                          "startIndex",
                          1
                        ) + property(
                          ri!pagingInfo,
                          "batchSize",
                          0
                        )
                      ),
                      batchSize: property(
                        ri!pagingInfo,
                        "batchSize",
                        - 1
                      ),
                      sort: property(
                        ri!pagingInfo,
                        "sort",
                        null
                      )
                    )
                  ),
                  ri!saveInto
                }
              ),
              null
            ),
            linkStyle: "STANDALONE"
          ),
          a!richTextIcon(
            icon: "angle-double-right",
            size: "MEDIUM",
            link: if(
              property(
                ri!pagingInfo,
                "startIndex",
                1
              ) <> local!maxStartIndex,
              a!dynamicLink(
                saveInto: {
                  a!save(
                    ri!pagingInfo,
                    a!pagingInfo(
                      startIndex: local!maxStartIndex,
                      batchSize: property(
                        ri!pagingInfo,
                        "batchSize",
                        - 1
                      ),
                      sort: property(
                        ri!pagingInfo,
                        "sort",
                        null
                      )
                    )
                  ),
                  ri!saveInto
                }
              ),
              null
            ),
            linkStyle: "STANDALONE"
          )
        }
      )
    },
    {}
  )
)

Reply
  • 0
    Certified Senior Developer

    This code can be used to build pagination UI for editable grid

    with(
  local!maxStartIndex: 1 + rounddown(
    (
      ri!totalCount - 1
    ) / ri!pagingInfo.batchSize,
    0
  ) * ri!pagingInfo.batchSize,
  local!style: "STRONG",
  if(
    rule!replaceNull(
      ri!showWhen,
      true
    ),
    {
      a!richTextDisplayField(
        align: rule!replaceNull(
          ri!align,
          "CENTER"
        ),
        value: {
          a!richTextIcon(
            icon: "angle-double-left",
            size: "MEDIUM",
            link: if(
              property(
                ri!pagingInfo,
                "startIndex",
                1
              ) <> 1,
              a!dynamicLink(
                saveInto: {
                  a!save(
                    ri!pagingInfo,
                    a!pagingInfo(
                      startIndex: 1,
                      batchSize: property(
                        ri!pagingInfo,
                        "batchSize",
                        - 1
                      ),
                      sort: property(
                        ri!pagingInfo,
                        "sort",
                        null
                      )
                    )
                  ),
                  ri!saveInto
                }
              ),
              null
            ),
            linkStyle: "STANDALONE"
          ),
          a!richTextIcon(
            icon: "angle-left",
            size: "MEDIUM",
            link: if(
              property(
                ri!pagingInfo,
                "startIndex",
                1
              ) <> 1,
              a!dynamicLink(
                saveInto: {
                  a!save(
                    ri!pagingInfo,
                    a!pagingInfo(
                      startIndex: max(
                        1,
                        property(
                          ri!pagingInfo,
                          "startIndex",
                          1
                        ) - property(
                          ri!pagingInfo,
                          "batchSize",
                          0
                        )
                      ),
                      batchSize: property(
                        ri!pagingInfo,
                        "batchSize",
                        - 1
                      ),
                      sort: property(
                        ri!pagingInfo,
                        "sort",
                        null
                      )
                    )
                  ),
                  ri!saveInto
                }
              ),
              null
            ),
            linkStyle: "STANDALONE"
          ),
          a!richTextItem(
            text: concat(
              " ",
              min(
                ri!totalCount,
                property(
                  ri!pagingInfo,
                  "startIndex",
                  1
                )
              ),
              " - ",
              min(
                ri!totalCount,
                property(
                  ri!pagingInfo,
                  "startIndex",
                  1
                ) + if(
                  property(
                    ri!pagingInfo,
                    "batchSize",
                    - 1
                  ) = - 1,
                  ri!totalCount,
                  property(
                    ri!pagingInfo,
                    "batchSize",
                    - 1
                  )
                ) - 1
              )
            ),
            style: "STRONG",
            size: "STANDARD"
          ),
          a!richTextItem(
            text: concat(
              " of ",
              ri!totalCount,
              " "
            ),
            style: "STRONG",
            size: "STANDARD"
          ),
          a!richTextIcon(
            icon: "angle-right",
            size: "MEDIUM",
            link: if(
              property(
                ri!pagingInfo,
                "startIndex",
                1
              ) <> local!maxStartIndex,
              a!dynamicLink(
                saveInto: {
                  a!save(
                    ri!pagingInfo,
                    a!pagingInfo(
                      startIndex: min(
                        local!maxStartIndex,
                        property(
                          ri!pagingInfo,
                          "startIndex",
                          1
                        ) + property(
                          ri!pagingInfo,
                          "batchSize",
                          0
                        )
                      ),
                      batchSize: property(
                        ri!pagingInfo,
                        "batchSize",
                        - 1
                      ),
                      sort: property(
                        ri!pagingInfo,
                        "sort",
                        null
                      )
                    )
                  ),
                  ri!saveInto
                }
              ),
              null
            ),
            linkStyle: "STANDALONE"
          ),
          a!richTextIcon(
            icon: "angle-double-right",
            size: "MEDIUM",
            link: if(
              property(
                ri!pagingInfo,
                "startIndex",
                1
              ) <> local!maxStartIndex,
              a!dynamicLink(
                saveInto: {
                  a!save(
                    ri!pagingInfo,
                    a!pagingInfo(
                      startIndex: local!maxStartIndex,
                      batchSize: property(
                        ri!pagingInfo,
                        "batchSize",
                        - 1
                      ),
                      sort: property(
                        ri!pagingInfo,
                        "sort",
                        null
                      )
                    )
                  ),
                  ri!saveInto
                }
              ),
              null
            ),
            linkStyle: "STANDALONE"
          )
        }
      )
    },
    {}
  )
)

Children
No Data
© 2025 Appian. All rights reserved.
We want to hear from you! Submit a review on Gartner or G2.