Editable Grid Pagination

RE: Editable Grid Pagination

Mohammed Ali — Fri, 05 Nov 2021 22:09:20 GMT

The APN_configurablePagingInfo is not working, do you have any other workaround, please?

RE: Editable Grid Pagination

sureshk — Tue, 03 Nov 2020 05:32:52 GMT

Hi,

Yes we can add pagination to Editable Grid using 'Configurable Paging Info', available in AppMarket (https://community.appian.com/b/appmarket/posts/configurable-paging-info).

Here is a sample code which i used

load(
  local!items: {
    { item: "Item 1", qty: 1, unitPrice: 10 },
    { item: "Item 2", qty: 2, unitPrice: 20 },
    { item: "Item 3", qty: 3, unitPrice: 30 },
    { item: "Item 4", qty: 4, unitPrice: 40 },
    { item: "Item 5", qty: 5, unitPrice: 50 },
    { item: "Item 6", qty: 6, unitPrice: 60 },
    { item: "Item 7", qty: 7, unitPrice: 70 },
    { item: "Item 8", qty: 8, unitPrice: 80 },
    { item: "Item 9", qty: 9, unitPrice: 90 },
    { item: "Item 10", qty: 10, unitPrice: 100 },
    { item: "Item 11", qty: 11, unitPrice: 110 },
    { item: "Item 12", qty: 12, unitPrice: 120 },
    { item: "Item 13", qty: 13, unitPrice: 130 },
    { item: "Item 14", qty: 14, unitPrice: 140 },
    { item: "Item 15", qty: 15, unitPrice: 150 }
  },
  local!editableGridPagingInfo: a!pagingInfo(startIndex: 1, batchSize: 5),
  a!sectionLayout(
    label: "test",
    contents: {
      a!gridLayout(
        label: "Grid Layout test",
        instructions: "This is a grid layout",
        headerCells: {
          a!gridLayoutHeaderCell(label: "Item"),
          a!gridLayoutHeaderCell(label: "Qty", align: "RIGHT"),
          a!gridLayoutHeaderCell(label: "Unit Price", align: "RIGHT"),
          a!gridLayoutHeaderCell(label: "Total", align: "RIGHT")
        },
        rows: {
          a!forEach(
            items: todatasubset(
              local!items,
              local!editableGridPagingInfo
            ),
            expression: {
              a!gridRowLayout(
                contents: {
                  a!textField(
                    value: fv!item.item,
                    saveInto: fv!item.item
                  ),
                  a!integerField(
                    value: fv!item.qty,
                    saveInto: fv!item.qty,
                    align: "RIGHT"
                  ),
                  a!floatingPointField(
                    value: fv!item.unitPrice,
                    saveInto: fv!item.unitPrice,
                    align: "RIGHT"
                  ),
                  a!textField(
                    value: dollar(
                      tointeger(fv!item.qty) * todecimal(fv!item.unitPrice)
                    ),
                    readOnly: true,
                    align: "RIGHT"
                  )
                }
              )
            }
          )
        }
      ),
      rule!APN_configurablePagingInfo(
        pagingInfo: local!editableGridPagingInfo,
        totalCount: length(local!items),
        showWhen: true()
      )
    }
  )
)

RE: Editable Grid Pagination

Peter Lewis — Tue, 07 Jul 2020 12:42:09 GMT

Again, I'd like to caution you that this may not be the best solution. If you provide more information about what your use case is, we might be able to provide additional options beyond an editable grid with pagination.

RE: Editable Grid Pagination

ramanakumar49 — Tue, 07 Jul 2020 10:48:44 GMT

Yes Exactly i want to add row as well as and displaying pagination also

RE: Editable Grid Pagination

Mike Schmitt — Mon, 06 Jul 2020 13:40:47 GMT

I largely agree with this - generally if a data set is large enough that you'd want to page through it, it's large enough that you don't wnat to be forcing users to edit every single row, too. There's a strong reason that the editable grid component doesn't have built-in paging.

RE: Editable Grid Pagination

Peter Lewis — Mon, 06 Jul 2020 13:23:31 GMT

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 whether having a paging editable grid is the right paradigm anyway. There are some usability concerns with this setup that are difficult to resolve including:

How do validations work? Do you validate on pages that are not visible? How do you show the user that they need to fix something on another page?
Is it possible to add rows to your grid? What happens if the user tries to add a row when you have already reached the maximum batch size?

Although it may seem that paging is important, I've actually found that it can be more confusing to have paging rather than just having a large editable grid.

RE: Editable Grid Pagination

gdengrar — Mon, 06 Jul 2020 11:33:43 GMT

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

RE: Editable Grid Pagination

gdengrar — Mon, 06 Jul 2020 11:29:52 GMT

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

RE: Editable Grid Pagination

ramanakumar49 — Mon, 06 Jul 2020 11:03:51 GMT

no im asking how to implement pagination in editable grid

RE: Editable Grid Pagination

gdengrar — Mon, 06 Jul 2020 06:33:02 GMT

Its an editable grid (?)

RE: Editable Grid Pagination

ramanakumar49 — Fri, 03 Jul 2020 14:10:30 GMT

hi germand i understand.how to adapt this one to editable grid please example of editable grid if possible

RE: Editable Grid Pagination

gdengrar — Fri, 03 Jul 2020 10:07:16 GMT

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"
          )
        }
      )
    }
  )
)