Editable Grid Pagination

ramanakumar49 over 3 years ago

Hi All

How To Write Pagination In Editable Grid ?Some Example

Discussion posts and replies are publicly visible

Top Replies

gdengrar over 3 years ago +2

Hi, You have to create the component of pagination and then adapt it to your case, here's an example that I used. load( local!data: { { id: 1, name: "John", value: "your value here!" }…
Peter Lewis over 3 years ago +2
Appian Employee

The Editable Grid component doesn't allow paging. I have seen some app developers that have created custom paging using rich text (the example above would work well). I'd also recommend thinking about…

Parents

0 gdengrar over 3 years ago

Hi,

You have to create the component of pagination and then adapt it to your case, here's an example that I used.

load(
  local!data: {
    {
      id: 1,
      name: "John",
      value: "your value here!"
    },
    {
      id: 2,
      name: "Mary",
      value: "your value here!"
    },
    {
      id: 3,
      name: "Ben",
      value: "your value here!"
    },
    {
      id: 4,
      name: "Ryan",
      value: "your value here!"
    },
    {
      id: 5,
      name: "Amy",
      value: "your value here!"
    },
    {
      id: 6,
      name: "Jennifer",
      value: "your value here!"
    },
    {
      id: 7,
      name: "Joe",
      value: "your value here!"
    },
    {
      id: 8,
      name: "Melissa",
      value: "your value here!"
    },
    {
      id: 9,
      name: "Anthony",
      value: "your value here!"
    }
  },
  local!pagingInfo: a!pagingInfo(
    startIndex: 1,
    batchSize: 3,
    sort: a!sortInfo(
      field: "id",
      ascending: true
    )
  ),
  with(
    local!datasubset: todatasubset(
      local!data,
      local!pagingInfo
    ),
    local!dataForCurrentPage: local!datasubset.data,
    {
      a!sectionLayout(
        contents: {
          a!boxLayout(
            label: "Sort",
            contents: {
              a!columnsLayout(
                columns: {
                  a!columnLayout(
                    contents: {
                      a!dropdownField(
                        label: "Field",
                        choiceLabels: {
                          "ID",
                          "Name",
                          "Value"
                        },
                        choiceValues: {
                          "id",
                          "name",
                          "value"
                        },
                        value: local!pagingInfo.sort.field,
                        saveInto: {
                          local!pagingInfo.sort.field,
                          a!save(
                            local!pagingInfo.startIndex,
                            1
                          )
                        }
                      )
                    }
                  ),
                  a!columnLayout(
                    contents: {
                      a!radioButtonField(
                        label: "Order",
                        choiceLabels: {
                          "Ascending",
                          "Descending"
                        },
                        choiceValues: {
                          true,
                          false
                        },
                        value: local!pagingInfo.sort.ascending,
                        saveInto: {
                          local!pagingInfo.sort.ascending,
                          a!save(
                            local!pagingInfo.startIndex,
                            1
                          )
                        },
                        choiceLayout: "COMPACT"
                      )
                    }
                  )
                }
              )
            }
          )
        }
      ),
      a!sectionLayout(
        contents: {
          a!forEach(
            items: local!dataForCurrentPage,
            expression: a!cardLayout(
              contents: {
                a!columnsLayout(
                  columns: {
                    a!columnLayout(
                      contents: {
                        a!textField(
                          label: "ID",
                          value: property(
                            fv!item,
                            "id"
                          ),
                          readOnly: true
                        )
                      },
                      width: "NARROW"
                    ),
                    a!columnLayout(
                      contents: {
                        a!textField(
                          label: "Name",
                          value: property(
                            fv!item,
                            "name"
                          ),
                          readOnly: true
                        )
                      }
                    ),
                    a!columnLayout(
                      contents: {
                        a!textField(
                          label: "Some value",
                          value: property(
                            fv!item,
                            "value"
                          ),
                          readOnly: true
                        )
                      }
                    )
                  }
                )
              },
              style: "STANDARD"
            )
          )

        }
      ),
      a!sectionLayout(
        contents: {
          a!richTextDisplayField(
            value: {
              a!richTextIcon(
                icon: "chevron-left",
                link: a!dynamicLink(
                  saveInto: a!save(
                    local!pagingInfo,
                    a!pagingInfo(
                      startIndex: local!pagingInfo.startIndex - local!pagingInfo.batchSize,
                      batchSize: local!pagingInfo.batchSize,
                      sort: local!pagingInfo.sort
                    )
                  ),
                  showWhen: local!pagingInfo.startIndex > 1
                ),
                linkStyle: "STANDALONE"
              ),
              a!richTextItem(
                text: {
                  char(
                    32
                  ),
                  a!richTextItem(
                    text: {
                      joinarray(
                        {
                          property(
                            local!pagingInfo,
                            "startIndex"
                          ),
                          char(
                            45
                          ),
                          property(
                            local!pagingInfo,
                            "startIndex"
                          ) + property(
                            local!pagingInfo,
                            "batchSize"
                          ) - 1
                        },
                        char(
                          32
                        )
                      )
                    },
                    style: "STRONG"
                  ),
                  char(
                    32
                  ),
                  joinarray(
                    {
                      "of",
                      count(
                        local!data
                      )
                    },
                    char(
                      32
                    )
                  ),
                  char(
                    32
                  )
                }
              ),
              a!richTextIcon(
                icon: "chevron-right",
                link: a!dynamicLink(
                  saveInto: a!save(
                    local!pagingInfo,
                    a!pagingInfo(
                      startIndex: local!pagingInfo.startIndex + local!pagingInfo.batchSize,
                      batchSize: local!pagingInfo.batchSize,
                      sort: local!pagingInfo.sort
                    )
                  ),
                  showWhen: local!pagingInfo.startIndex < count(
                    local!data
                  ) - local!pagingInfo.batchSize
                ),
                linkStyle: "STANDALONE"
              )
            },
            align: "RIGHT"
          )
        }
      )
    }
  )
)

Reply

0 gdengrar over 3 years ago

Hi,

You have to create the component of pagination and then adapt it to your case, here's an example that I used.

load(
  local!data: {
    {
      id: 1,
      name: "John",
      value: "your value here!"
    },
    {
      id: 2,
      name: "Mary",
      value: "your value here!"
    },
    {
      id: 3,
      name: "Ben",
      value: "your value here!"
    },
    {
      id: 4,
      name: "Ryan",
      value: "your value here!"
    },
    {
      id: 5,
      name: "Amy",
      value: "your value here!"
    },
    {
      id: 6,
      name: "Jennifer",
      value: "your value here!"
    },
    {
      id: 7,
      name: "Joe",
      value: "your value here!"
    },
    {
      id: 8,
      name: "Melissa",
      value: "your value here!"
    },
    {
      id: 9,
      name: "Anthony",
      value: "your value here!"
    }
  },
  local!pagingInfo: a!pagingInfo(
    startIndex: 1,
    batchSize: 3,
    sort: a!sortInfo(
      field: "id",
      ascending: true
    )
  ),
  with(
    local!datasubset: todatasubset(
      local!data,
      local!pagingInfo
    ),
    local!dataForCurrentPage: local!datasubset.data,
    {
      a!sectionLayout(
        contents: {
          a!boxLayout(
            label: "Sort",
            contents: {
              a!columnsLayout(
                columns: {
                  a!columnLayout(
                    contents: {
                      a!dropdownField(
                        label: "Field",
                        choiceLabels: {
                          "ID",
                          "Name",
                          "Value"
                        },
                        choiceValues: {
                          "id",
                          "name",
                          "value"
                        },
                        value: local!pagingInfo.sort.field,
                        saveInto: {
                          local!pagingInfo.sort.field,
                          a!save(
                            local!pagingInfo.startIndex,
                            1
                          )
                        }
                      )
                    }
                  ),
                  a!columnLayout(
                    contents: {
                      a!radioButtonField(
                        label: "Order",
                        choiceLabels: {
                          "Ascending",
                          "Descending"
                        },
                        choiceValues: {
                          true,
                          false
                        },
                        value: local!pagingInfo.sort.ascending,
                        saveInto: {
                          local!pagingInfo.sort.ascending,
                          a!save(
                            local!pagingInfo.startIndex,
                            1
                          )
                        },
                        choiceLayout: "COMPACT"
                      )
                    }
                  )
                }
              )
            }
          )
        }
      ),
      a!sectionLayout(
        contents: {
          a!forEach(
            items: local!dataForCurrentPage,
            expression: a!cardLayout(
              contents: {
                a!columnsLayout(
                  columns: {
                    a!columnLayout(
                      contents: {
                        a!textField(
                          label: "ID",
                          value: property(
                            fv!item,
                            "id"
                          ),
                          readOnly: true
                        )
                      },
                      width: "NARROW"
                    ),
                    a!columnLayout(
                      contents: {
                        a!textField(
                          label: "Name",
                          value: property(
                            fv!item,
                            "name"
                          ),
                          readOnly: true
                        )
                      }
                    ),
                    a!columnLayout(
                      contents: {
                        a!textField(
                          label: "Some value",
                          value: property(
                            fv!item,
                            "value"
                          ),
                          readOnly: true
                        )
                      }
                    )
                  }
                )
              },
              style: "STANDARD"
            )
          )

        }
      ),
      a!sectionLayout(
        contents: {
          a!richTextDisplayField(
            value: {
              a!richTextIcon(
                icon: "chevron-left",
                link: a!dynamicLink(
                  saveInto: a!save(
                    local!pagingInfo,
                    a!pagingInfo(
                      startIndex: local!pagingInfo.startIndex - local!pagingInfo.batchSize,
                      batchSize: local!pagingInfo.batchSize,
                      sort: local!pagingInfo.sort
                    )
                  ),
                  showWhen: local!pagingInfo.startIndex > 1
                ),
                linkStyle: "STANDALONE"
              ),
              a!richTextItem(
                text: {
                  char(
                    32
                  ),
                  a!richTextItem(
                    text: {
                      joinarray(
                        {
                          property(
                            local!pagingInfo,
                            "startIndex"
                          ),
                          char(
                            45
                          ),
                          property(
                            local!pagingInfo,
                            "startIndex"
                          ) + property(
                            local!pagingInfo,
                            "batchSize"
                          ) - 1
                        },
                        char(
                          32
                        )
                      )
                    },
                    style: "STRONG"
                  ),
                  char(
                    32
                  ),
                  joinarray(
                    {
                      "of",
                      count(
                        local!data
                      )
                    },
                    char(
                      32
                    )
                  ),
                  char(
                    32
                  )
                }
              ),
              a!richTextIcon(
                icon: "chevron-right",
                link: a!dynamicLink(
                  saveInto: a!save(
                    local!pagingInfo,
                    a!pagingInfo(
                      startIndex: local!pagingInfo.startIndex + local!pagingInfo.batchSize,
                      batchSize: local!pagingInfo.batchSize,
                      sort: local!pagingInfo.sort
                    )
                  ),
                  showWhen: local!pagingInfo.startIndex < count(
                    local!data
                  ) - local!pagingInfo.batchSize
                ),
                linkStyle: "STANDALONE"
              )
            },
            align: "RIGHT"
          )
        }
      )
    }
  )
)

Children

0 ramanakumar49 over 3 years ago in reply to gdengrar

hi germand i understand.how to adapt this one to editable grid please example of editable grid if possible
Cancel
Vote Up 0 Vote Down

Sign in to reply

Verify Answer

Cancel
0 gdengrar over 3 years ago in reply to ramanakumar49

Its an editable grid (?)
Cancel
Vote Up 0 Vote Down

Sign in to reply

Verify Answer

Cancel
0 ramanakumar49 over 3 years ago in reply to gdengrar

no im asking how to implement pagination in editable grid
Cancel
Vote Up 0 Vote Down

Sign in to reply

Verify Answer

Cancel
0 gdengrar over 3 years ago in reply to ramanakumar49

Look it up, in my example there is a pagination winget, you can copy it and adapt to your interface. When you copy the winget it tells you what variables are required, so you look again the example and take them, then you will understand how does the pagination work.

I have done it a week ago
Cancel
Vote Up 0 Vote Down

Sign in to reply

Verify Answer

Cancel
0 gdengrar over 3 years ago in reply to gdengrar

I also can let you the url of where I'm asking thing of what I'm doing, I have a pagination there 2.

https://community.appian.com/discussions/f/rules/19180/fv-selectedrows-in-a-gridlayout/75139#75139
Cancel
Vote Up 0 Vote Down

Sign in to reply

Verify Answer

Cancel