Pagination in Editable Grid

RE: Pagination in Editable Grid

Mike Schmitt — Mon, 02 Feb 2026 16:57:04 GMT

[quote userid="105288" url="~/discussions/f/new-to-appian/24424/pagination-in-editable-grid/153354"]Use indexing like this[/quote]

The setup you've pictured here might work, though at this point I recommend, instead of writing out that huge index expression every time, that the value be stored in a row-specific Local variable for reuse (and ease of debugging), if anything.

Also, I stand behind my usual recommendation that devs avoid the approach of manually adding paging to editable grids unless literally all other approaches have been tried and found to be insufficient. I still (over "4 years later" in the case of this Zombie Thread) recommend going with read-only ("paging") grids where each row has an individual "edit icon", which shows a mini editing interface for just that row after being clicked, which the user can then "save" or "cancel" out of - this offers better and more easy control over things like validation, and less space constraints.

RE: Pagination in Editable Grid

Mohan Reddy Kethireddigari — Sun, 01 Feb 2026 13:08:45 GMT

Use indexing like this, or the data will be overwritten for the same row across all pages.

RE: Pagination in Editable Grid

ambrishs — Tue, 04 Oct 2022 01:53:15 GMT

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

RE: Pagination in Editable Grid

Mike Schmitt — Thu, 05 May 2022 18:21:34 GMT

The code I included above is only meant to serve as a template - the logic for getting the by-row RowIndex will need to be tested/refined by anyone attempting to implement it. But otherwise, this solution should work and will be the most straightforward way of accomplishing this use case.

That said - I can't help you with just "gives error". Can you share what the error says / post a screenshot / etc?

RE: Pagination in Editable Grid

jojog0002 — Thu, 05 May 2022 18:13:45 GMT

Hii mike,

This above code gives error. please give me any other solution

RE: Pagination in Editable Grid

Mike Schmitt — Thu, 05 May 2022 14:03:54 GMT

[quote userid="111610" url="~/discussions/f/new-to-appian/24424/pagination-in-editable-grid/94665#94665"]when we go on second page then we can click on add employee then new row appears then we try to delete it then it deleted above row [/quote]

This is because of the issue I mentioned yesterday. "fv!index" will always be relative to the current page of data, whereas if you're on a subsequent page and you try to edit/remove an entry on that page (anchoring on fv!index), you'll really be editing/removing the indicated entry from the first page.

The real solution to this, if you insist on continuing down this rabbit hole, is to declare row-specific local variables. Inside the row's local variable definition, you insert logic to give you the index in the original array of source data corresponding to the current row. Thus, on page 2 (assuming you have a page size of 10 for example), your rows will have "local!rowIndex" values of 11 - 20, instead of fv!index which would still be 1 - 10. Then local!rowIndex can be used in place of "fv!index" in most places in the above code.

rows: a!forEach(
  items: local!datasubset,
  expression: a!localVariables(
  
    local!rowIndex: where(local!originalArray.id = fv!item.id),
    
    a!gridRowLayout(
      contents: { ....

RE: Pagination in Editable Grid

jojog0002 — Thu, 05 May 2022 10:51:50 GMT

Hii Dimitris,

when we go on second page then we can click on add employee then new row appears then we try to delete it then it deleted above row with data and blank row is still there.

/* For the Removal Column*/
              a!richTextDisplayField(
                value: a!richTextIcon(
                  icon: "trash-o",
                  altText: "delete " & fv!index,
                  caption: "Remove " & fv!item.FirstName & " " & fv!item.LastName,
                  link: a!dynamicLink(
                    value: fv!index,
                    saveInto: {
                      if(
                        isnull(fv!item.Id),
                        {},
                        a!save(
                          local!deletedEmployeeIds,
                          append(local!deletedEmployeeIds, fv!item.Id)
                        )
                      ),
                      a!save(ri!Del, true),
                      a!save(ri!Del_Id, local!deletedEmployeeIds),
                      a!save(
                        local!Employeedata,
                        remove(local!Employeedata, save!value)
                      )
                    }
                  ),
                  linkStyle: "STANDALONE",
                  color: "NEGATIVE"
                )
              )
            }
          )
        ),

RE: Pagination in Editable Grid

jojog0002 — Thu, 05 May 2022 06:45:13 GMT

Hii Dimitris,

Thank u so so much .Its worked fine .

RE: Pagination in Editable Grid

Dimitris Soulovaris — Wed, 04 May 2022 17:52:47 GMT

You right. Didn't test the second page at all..LOL

It needs the fv!identifier instead of the fv!index.

But as you said, it's becoming more complex. But that's a good task for the reporter so he can practice more on Appian.

RE: Pagination in Editable Grid

Mike Schmitt — Wed, 04 May 2022 17:40:17 GMT

That works on the first page. But on subsequent pages, the value of fv!index (i.e. for the first row on the new page) will be "1", whereas the index you're actually trying to save into in the source data would be "1" + (page size * (page number - 1)). In the above code, if you're on page 2 and you update row 1, you'd actually be saving into the field for page 1's row 1.

This can be fixed with yet more saveInto hijinks - though as you can see the rabbit hole just keeps getting deeper. I've always found it pretty unmanageable and, frankly, not worth the hassle when compared to a simple and elegant solution like a read-only grid with a row-by-row "edit" button.

RE: Pagination in Editable Grid

Dimitris Soulovaris — Wed, 04 May 2022 17:29:00 GMT

Hi Mike,

Yes, you are right about everything you mentioned for the non-saved data. In the current implementation, the modified values are not being saved.

He has to save the data in the source as you said. Therefore, he should do the data saving inside the grid and after editing.

Here it is what he needs to do exactly:

jojog0002

The pagination functionality remains as is.

RE: Pagination in Editable Grid

Mike Schmitt — Wed, 04 May 2022 16:21:06 GMT

As I noted in the other thread... as far as I can tell from this code, the row-level user changes are only saved up as far as the dataSubset (and i don't see any code that propagates such changes any further than that), but of course that's all overwritten the second the user changes pages.

Some additional SaveInto bending-over-backwards would need to be added to promote any user changes back to the source data, but of course at that point, we're talking about such complicated code that most devs would have saved days of heartache and headache by just implementing a paging grid with a row-level "edit" button.

RE: Pagination in Editable Grid

Richard Michaelis — Wed, 04 May 2022 15:24:33 GMT

Dimitris explained it pretty well.
Its one way to solve it, but a pretty valid one.
-> jojog, what are you missing exactly?

RE: Pagination in Editable Grid

Dimitris Soulovaris — Wed, 04 May 2022 09:16:54 GMT

You have everything you need written above on my previous comment. The code for the pagination functionality and how to setup the rule.. Just copy and paste it. That's all.

RE: Pagination in Editable Grid

jojog0002 — Wed, 04 May 2022 09:05:40 GMT

Hi Dimitris,

please also help me for creation a expression rule for the pagination functionality.

RE: Pagination in Editable Grid

Dimitris Soulovaris — Wed, 04 May 2022 07:55:33 GMT

Hi jojog,

I have made some changes in your code that are needed for creating the pagination functionality.

You have to create some local variables first in your code for setting the pagination and create a datasubset of your Employee list.

Instead of rule!DS_customPaginationForGrids() put the rule name of your expression rule you created with the pagination functionality.

Let me know the outcome after you test it.

a!localVariables(
  local!SortedEmployeeData: "FirstName",
  local!Employeedata: rule!ED_GetEmployeeData(local!SortedEmployeeData),
  local!deletedEmployeeIds,
  /* Create Pagination */
  local!startIndex: 1,
  local!batchSize: 4,
  local!pagingInfo: a!pagingInfo(
    startIndex: local!startIndex,
    batchSize: local!batchSize
  ),
  local!datasubset: todatasubset(
    arrayToPage: local!Employeedata,
    pagingConfiguration: local!pagingInfo
  ),
  a!formLayout(
    label: "Employee Details: Add, Update or Delete Employee Data",
    contents: {
      a!dropdownField(
        label: "Select a field which you want to sort the columns values",
        labelPosition: "ABOVE",
        placeholder: "--- Select a Field---",
        choiceLabels: {
          "FirstName",
          "LastName",
          "Email",
          "Address",
          "Department",
          "Designation",
          "ContactNumber",
          "Date Of Joining",
          "Gender"
        },
        choiceValues: {
          "FirstName",
          "LastName",
          "Email",
          "Address",
          "Department",
          "Designation",
          "ContactNumber",
          "Date Of Joining",
          "Gender"
        },
        value: local!SortedEmployeeData,
        saveInto: { value: local!SortedEmployeeData },
        searchDisplay: "AUTO",
        validations: {}
      ),
      a!gridLayout(
        totalCount: local!datasubset.totalCount,
        /*totalCount: 5,*/
        headerCells: {
          a!gridLayoutHeaderCell(label: "FirstName"),
          a!gridLayoutHeaderCell(label: "LastName"),
          a!gridLayoutHeaderCell(label: "Email"),
          a!gridLayoutHeaderCell(label: "Address"),
          a!gridLayoutHeaderCell(label: "Department"),
          a!gridLayoutHeaderCell(label: "Designation"),
          a!gridLayoutHeaderCell(label: "Contact Number"),
          a!gridLayoutHeaderCell(label: "Date Of Joining"),
          a!gridLayoutHeaderCell(label: "Gender"),
          /*a!gridLayoutHeaderCell(label: "Start Date", align: "RIGHT" ),*/
          /* For the "Remove" column */
          a!gridLayoutHeaderCell(label: "")
        },
        /* Only needed when some columns need to be narrow */
        columnConfigs: {
          a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight: 2),
          a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight: 2),
          a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight: 2),
          a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight: 2),
          a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight: 2),
          a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight: 2),
          a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight: 2),
          a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight: 2),
          a!gridLayoutColumnConfig(width: "ICON")
        },
        /*
* a!forEach() will take local!employee data and used that data to loop through an
* expression that creates each row.
*
* When modifying the recipe to work with your data, you only need to change:
* 1.) the number of fields in each row
* 2.) the types of fields for each column (i.e. a!textField() for text data elements)
* 3.) the fv!item elements. For example fv!item.firstName would change to fv!item.yourdata
*/
        rows: a!forEach(
          items: local!datasubset,
          expression: a!gridRowLayout(
            id: fv!item,
            /*id: fv!index,*/
            contents: {
              /* For the FirstName Column*/
              a!textField(
                /* Labels are not visible in grid cells but are necessary to meet accessibility requirements */
                label: "FirstName " & fv!index,
                value: fv!item.FirstName,
                saveInto: fv!item.FirstName,
                required: true
              ),
              /* For the lastName Column*/
              a!textField(
                label: "LastName " & fv!index,
                value: fv!item.LastName,
                saveInto: fv!item.LastName,
                required: true
              ),
              /* For the Email Address Column*/
              a!textField(
                label: "Email" & fv!index,
                value: fv!item.Email,
                saveInto: fv!item.Email,
                required: true,
                validations: {
                  if(
                    regexmatch(
                      "^[A-Z0-9\'\+\&\%_-]+(\.{0,1}[A-Z0-9\'\+\&\%_-]+)*[@]{1}[A-Z0-9.-]*[A-Z0-9-]+[.]{1}[A-Z]{2,6}$",
                      fv!item.Email
                    ),
                    "",
                    "provide valid email address"
                  )
                }
              ),
              /* For the Address Column*/
              a!textField(
                label: " Address" & fv!index,
                value: fv!item.Address,
                saveInto: fv!item.Address,
                required: true
              ),
              /* For the Department Column*/
              a!dropdownField(
                label: "Department" & fv!index,
                placeholder: "-- Select -- ",
                choiceLabels: {
                  "Corporate",
                  "Engineering",
                  "Finance",
                  "Human Resources",
                  "Professional Services",
                  "Sales"
                },
                choiceValues: {
                  "Corporate",
                  "Engineering",
                  "Finance",
                  "Human Resources",
                  "Professional Services",
                  "Sales"
                },
                value: fv!item.Department,
                saveInto: fv!item.Department,
                required: true
              ),
              /* For the Designation Column*/
              a!dropdownField(
                label: "Designation " & fv!index,
                placeholder: "-- Select -- ",
                choiceLabels: {
                  "Software Engineer",
                  "Support Engineer",
                  "Tester",
                  "Marking Specialist",
                  "Web Developer",
                  ".Net Developer",
                  "Graphic Designer",
                  "Application Developer"
                },
                choiceValues: {
                  "Software Engineer",
                  "Support Engineer",
                  "Tester",
                  "Marking Specialist",
                  "Web Developer",
                  ".Net Developer",
                  "Graphic Designer",
                  "Application Developer"
                },
                value: fv!item.Designation,
                saveInto: fv!item.Designation,
                required: true
              ),
              /* For the ContactNumber Column*/
              a!textField(
                label: "ContactNumber" & fv!index,
                /*placeholder:"555-456-7890",*/
                value: fv!item.ContactNumber,
                saveInto: fv!item.ContactNumber,
                validations: {
                  if(
                    regexmatch(
                      "^(\+\d{1,3}[- ]?)?\d{10}$",
                      fv!item.ContactNumber
                    ),
                    "",
                    "provide valid contact number"
                  )
                }/*validations:if(len(fv!item.ContactNumber)=10,"","please enter valid Number")*/
                
              ),
              a!dateField(
                label: "Date Of Joining " & fv!index,
                value: fv!item.HireDate,
                saveInto: fv!item.HireDate,
                required: true,
                align: "RIGHT"
              ),
              /* For the Gender Column*/
              a!dropdownField(
                label: "Gender " & fv!index,
                placeholder: "-- Select -- ",
                choiceLabels: { "Male", "Female" },
                choiceValues: { "Male", "Female" },
                value: fv!item.Gender,
                saveInto: fv!item.Gender,
                required: true
              ),
              /* For the Removal Column*/
              a!richTextDisplayField(
                value: a!richTextIcon(
                  icon: "trash-o",
                  altText: "delete " & fv!index,
                  caption: "Remove " & fv!item.FirstName & " " & fv!item.LastName,
                  link: a!dynamicLink(
                    value: fv!index,
                    saveInto: {
                      if(
                        isnull(fv!item.Id),
                        {},
                        a!save(
                          local!deletedEmployeeIds,
                          append(local!deletedEmployeeIds, fv!item.Id)
                        )
                      ),
                      a!save(ri!Del, true),
                      a!save(ri!Del_Id, local!deletedEmployeeIds),
                      a!save(
                        local!Employeedata,
                        remove(local!Employeedata, save!value)
                      )
                    }
                  ),
                  linkStyle: "STANDALONE",
                  color: "NEGATIVE"
                )
              )
            }
          )
        ),
        selectionStyle: "ROW_HIGHLIGHT",
        selectionRequired: false,
        addRowlink: a!dynamicLink(
          label: "Add Employee",
          value: { 'type!{urn:com:appian:types:ED}ED_Employee_Details_dt'() },
          saveInto: {
            a!save(
              local!Employeedata,
              append(local!Employeedata, save!value)
            )
          }
        ),
        shadeAlternateRows: true,
        spacing: "STANDARD",
        rowHeader: 1
      ),
      
      /* Pagination Functionality */
      rule!DS_customPaginationForGrids(
        startIndex: local!startIndex,
        batchSize: local!batchSize,
        totalCount: local!datasubset.totalCount
      ),
      
    },
    buttons: a!buttonLayout(
      primaryButtons: a!buttonWidget(
        label: "Submit",
        saveInto: { a!save(ri!item, local!Employeedata) },
        submit: true,
        style: "PRIMARY"
      ),
      secondaryButtons: {
        a!buttonWidget(
          label: "Cancel",
          value: true,
          saveInto: { ri!Cancel },
          submit: true,
          style: "NORMAL",
          validate: false
        )
      }
    )
  )
)

RE: Pagination in Editable Grid

jojog0002 — Wed, 04 May 2022 07:55:20 GMT

a!localVariables(
  local!SortedEmployeeData:"FirstName",
  local!Employeedata: rule!ED_GetEmployeeData(local!SortedEmployeeData),
  local!deletedEmployeeIds,

  a!formLayout(
    label: "Employee Details: Add, Update or Delete Employee Data",
    contents: {
      a!dropdownField(
        label: "Select a field which you want to sort the columns values",
        labelPosition: "ABOVE",
        placeholder: "--- Select a Field---",
        choiceLabels: {"FirstName", "LastName", "Email", "Address",
                        "Department", "Designation", "ContactNumber", "Date Of Joining",
                        "Gender"},
        choiceValues: {"FirstName", "LastName", "Email", "Address",
                        "Department", "Designation", "ContactNumber", "Date Of Joining",
                        "Gender"},
        value:local!SortedEmployeeData,
        saveInto: {value:local!SortedEmployeeData},
        searchDisplay: "AUTO",
        validations: {}
      ),
      a!gridLayout(
        totalCount: count( local!Employeedata),
        /*totalCount: 5,*/
        headerCells: {
          a!gridLayoutHeaderCell(label: "FirstName" ),
          a!gridLayoutHeaderCell(label: "LastName" ),
          a!gridLayoutHeaderCell(label: "Email" ),
          a!gridLayoutHeaderCell(label: "Address" ),
          a!gridLayoutHeaderCell(label: "Department" ),
          a!gridLayoutHeaderCell(label: "Designation" ),
          a!gridLayoutHeaderCell(label: "Contact Number" ),
          a!gridLayoutHeaderCell(label: "Date Of Joining" ),
          a!gridLayoutHeaderCell(label: "Gender" ),
        
          /*a!gridLayoutHeaderCell(label: "Start Date", align: "RIGHT" ),*/
          /* For the "Remove" column */
          a!gridLayoutHeaderCell(label: "" )
        },
        /* Only needed when some columns need to be narrow */
        columnConfigs: {
          a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight:2 ),
          a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight:2),
          a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight:2 ),
          a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight:2 ),
          a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight:2 ),
          a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight:2 ),
          a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight:2 ),
          a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight:2 ),
          a!gridLayoutColumnConfig(width: "ICON")
        },
        /*
        * a!forEach() will take local!employee data and used that data to loop through an
        * expression that creates each row.
        *
        * When modifying the recipe to work with your data, you only need to change:
        * 1.) the number of fields in each row
        * 2.) the types of fields for each column (i.e. a!textField() for text data elements)
        * 3.) the fv!item elements. For example fv!item.firstName would change to fv!item.yourdata
        */
        rows: a!forEach(
          items: local!Employeedata,
          expression: a!gridRowLayout(
            id:fv!item,
            /*id: fv!index,*/
            contents: {
              /* For the FirstName Column*/
              a!textField(
                /* Labels are not visible in grid cells but are necessary to meet accessibility requirements */
                label: "FirstName " & fv!index,
                value: fv!item.FirstName,
                saveInto: fv!item.FirstName,
                required: true
              ),
              /* For the lastName Column*/
              a!textField(
                label: "LastName " & fv!index,
                value: fv!item.LastName,
                saveInto: fv!item.LastName,
                required:true
              ),
              /* For the Email Address Column*/

              a!textField(
                label: "Email" & fv!index,
                value: fv!item.Email,
                saveInto: fv!item.Email,
                required:true,
                validations: {if(regexmatch("^[A-Z0-9\'\+\&\%_-]+(\.{0,1}[A-Z0-9\'\+\&\%_-]+)*[@]{1}[A-Z0-9.-]*[A-Z0-9-]+[.]{1}[A-Z]{2,6}$",
                fv!item.Email),"","provide valid email address"

                )}
              ),
              /* For the Address Column*/
              a!textField(
                label: " Address" & fv!index,
                value: fv!item.Address,
                saveInto: fv!item.Address,
                required:true
              ),
              /* For the Department Column*/
              a!dropdownField(
                label: "Department" & fv!index,
                placeholder: "-- Select -- ",
                choiceLabels: { "Corporate", "Engineering", "Finance", "Human Resources", "Professional Services", "Sales" },
                choiceValues: { "Corporate", "Engineering", "Finance", "Human Resources", "Professional Services", "Sales" },

                value: fv!item.Department,
                saveInto: fv!item.Department,
                required:true
              ),
              /* For the Designation Column*/
              a!dropdownField(
                label: "Designation " & fv!index,
                placeholder: "-- Select -- ",
                choiceLabels:{"Software Engineer","Support Engineer","Tester","Marking Specialist","Web Developer",".Net Developer","Graphic Designer","Application Developer"},
                choiceValues:{"Software Engineer","Support Engineer","Tester","Marking Specialist","Web Developer",".Net Developer","Graphic Designer","Application Developer"} ,
                value: fv!item.Designation,
                saveInto: fv!item.Designation,
                required:true
              ),

              /* For the ContactNumber Column*/
              a!textField(
                label: "ContactNumber" & fv!index,
                /*placeholder:"555-456-7890",*/
                value: fv!item.ContactNumber,
                saveInto: fv!item.ContactNumber,
                validations: {if(regexmatch(
                  "^(\+\d{1,3}[- ]?)?\d{10}$",
                  fv!item.ContactNumber),"","provide valid contact number")}
              
                /*validations:if(len(fv!item.ContactNumber)=10,"","please enter valid Number")*/
              
            
              ),


              a!dateField(
                label: "Date Of Joining " & fv!index,
                value: fv!item.HireDate,
                saveInto: fv!item.HireDate,
                required:true,
                align: "RIGHT"
              ),
              /* For the Gender Column*/
              a!dropdownField(
                label: "Gender " & fv!index,
                placeholder: "-- Select -- ",
                choiceLabels: {"Male","Female"},
                choiceValues: {"Male","Female"},

                value: fv!item.Gender,
                saveInto: fv!item.Gender,
                required:true
              ),
            
              /* For the Removal Column*/
              a!richTextDisplayField(
                value: a!richTextIcon(
                  icon: "trash-o",
                  altText: "delete " & fv!index,
                  caption: "Remove " & fv!item.FirstName & " " & fv!item.LastName,
                  link: a!dynamicLink(
                    value: fv!index,
                    saveInto: {
                      
                      if(
                        isnull(fv!item.Id),
                        {},
                        a!save(local!deletedEmployeeIds,append(local!deletedEmployeeIds,fv!item.Id))
                        
                      ),
                      a!save(ri!Del,true),
                      a!save(ri!Del_Id,local!deletedEmployeeIds),
                      a!save(local!Employeedata, remove(local!Employeedata, save!value))
                      
                      
                      
                    }
                  ),
                  linkStyle: "STANDALONE",
                  color: "NEGATIVE"
                )
              )
            }
          )
        ),
        selectionStyle: "ROW_HIGHLIGHT",
        selectionRequired: false,
        addRowlink: a!dynamicLink(
          label: "Add Employee",

          value: {
            'type!{urn:com:appian:types:ED}ED_Employee_Details_dt'()
          },
          saveInto: {
            a!save(local!Employeedata, append(local!Employeedata, save!value))
          }
        ),
       
        shadeAlternateRows: true,
        spacing: "STANDARD",
        rowHeader: 1
      )
     
    },
    buttons: a!buttonLayout(
      primaryButtons: a!buttonWidget(
        label: "Submit",
        saveInto: {a!save(ri!item,local!Employeedata)},
        submit: true,
        style: "PRIMARY"
      ),
      secondaryButtons: {
        a!buttonWidget(
          label: "Cancel",
          value: true,
          saveInto: {ri!Cancel},
          submit: true,
          style: "NORMAL",
          validate: false
        )
      }
    )
  )
)

RE: Pagination in Editable Grid

Richard Michaelis — Wed, 04 May 2022 06:54:21 GMT

Hello jojog,
please use the following for inserting code. I makes it way easier to read. :)

RE: Pagination in Editable Grid

jojog0002 — Wed, 04 May 2022 06:40:05 GMT

Hii Dimitris,

Here is my code :

a!localVariables(
local!SortedEmployeeData:"FirstName",
local!Employeedata: rule!ED_GetEmployeeData(local!SortedEmployeeData),
local!deletedEmployeeIds,

a!formLayout(
label: "Employee Details: Add, Update or Delete Employee Data",
contents: {
a!dropdownField(
label: "Select a field which you want to sort the columns values",
labelPosition: "ABOVE",
placeholder: "--- Select a Field---",
choiceLabels: {"FirstName", "LastName", "Email", "Address",
"Department", "Designation", "ContactNumber", "Date Of Joining",
"Gender"},
choiceValues: {"FirstName", "LastName", "Email", "Address",
"Department", "Designation", "ContactNumber", "Date Of Joining",
"Gender"},
value:local!SortedEmployeeData,
saveInto: {value:local!SortedEmployeeData},
searchDisplay: "AUTO",
validations: {}
),
a!gridLayout(
totalCount: count( local!Employeedata),
/*totalCount: 5,*/
headerCells: {
a!gridLayoutHeaderCell(label: "FirstName" ),
a!gridLayoutHeaderCell(label: "LastName" ),
a!gridLayoutHeaderCell(label: "Email" ),
a!gridLayoutHeaderCell(label: "Address" ),
a!gridLayoutHeaderCell(label: "Department" ),
a!gridLayoutHeaderCell(label: "Designation" ),
a!gridLayoutHeaderCell(label: "Contact Number" ),
a!gridLayoutHeaderCell(label: "Date Of Joining" ),
a!gridLayoutHeaderCell(label: "Gender" ),

/*a!gridLayoutHeaderCell(label: "Start Date", align: "RIGHT" ),*/
/* For the "Remove" column */
a!gridLayoutHeaderCell(label: "" )
},
/* Only needed when some columns need to be narrow */
columnConfigs: {
a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight:2 ),
a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight:2),
a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight:2 ),
a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight:2 ),
a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight:2 ),
a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight:2 ),
a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight:2 ),
a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight:2 ),
a!gridLayoutColumnConfig(width: "ICON")
},
/*
* a!forEach() will take local!employee data and used that data to loop through an
* expression that creates each row.
*
* When modifying the recipe to work with your data, you only need to change:
* 1.) the number of fields in each row
* 2.) the types of fields for each column (i.e. a!textField() for text data elements)
* 3.) the fv!item elements. For example fv!item.firstName would change to fv!item.yourdata
*/
rows: a!forEach(
items: local!Employeedata,
expression: a!gridRowLayout(
id:fv!item,
/*id: fv!index,*/
contents: {
/* For the FirstName Column*/
a!textField(
/* Labels are not visible in grid cells but are necessary to meet accessibility requirements */
label: "FirstName " & fv!index,
value: fv!item.FirstName,
saveInto: fv!item.FirstName,
required: true
),
/* For the lastName Column*/
a!textField(
label: "LastName " & fv!index,
value: fv!item.LastName,
saveInto: fv!item.LastName,
required:true
),
/* For the Email Address Column*/

a!textField(
label: "Email" & fv!index,
value: fv!item.Email,
saveInto: fv!item.Email,
required:true,
validations: {if(regexmatch("^[A-Z0-9\'\+\&\%_-]+(\.{0,1}[A-Z0-9\'\+\&\%_-]+)*[@]{1}[A-Z0-9.-]*[A-Z0-9-]+[.]{1}[A-Z]{2,6}$",
fv!item.Email),"","provide valid email address"

)}
),
/* For the Address Column*/
a!textField(
label: " Address" & fv!index,
value: fv!item.Address,
saveInto: fv!item.Address,
required:true
),
/* For the Department Column*/
a!dropdownField(
label: "Department" & fv!index,
placeholder: "-- Select -- ",
choiceLabels: { "Corporate", "Engineering", "Finance", "Human Resources", "Professional Services", "Sales" },
choiceValues: { "Corporate", "Engineering", "Finance", "Human Resources", "Professional Services", "Sales" },

value: fv!item.Department,
saveInto: fv!item.Department,
required:true
),
/* For the Designation Column*/
a!dropdownField(
label: "Designation " & fv!index,
placeholder: "-- Select -- ",
choiceLabels:{"Software Engineer","Support Engineer","Tester","Marking Specialist","Web Developer",".Net Developer","Graphic Designer","Application Developer"},
choiceValues:{"Software Engineer","Support Engineer","Tester","Marking Specialist","Web Developer",".Net Developer","Graphic Designer","Application Developer"} ,
value: fv!item.Designation,
saveInto: fv!item.Designation,
required:true
),

/* For the ContactNumber Column*/
a!textField(
label: "ContactNumber" & fv!index,
/*placeholder:"555-456-7890",*/
value: fv!item.ContactNumber,
saveInto: fv!item.ContactNumber,
validations: {if(regexmatch(
"^(\+\d{1,3}[- ]?)?\d{10}$",
fv!item.ContactNumber),"","provide valid contact number")}

/*validations:if(len(fv!item.ContactNumber)=10,"","please enter valid Number")*/

),

a!dateField(
label: "Date Of Joining " & fv!index,
value: fv!item.HireDate,
saveInto: fv!item.HireDate,
required:true,
align: "RIGHT"
),
/* For the Gender Column*/
a!dropdownField(
label: "Gender " & fv!index,
placeholder: "-- Select -- ",
choiceLabels: {"Male","Female"},
choiceValues: {"Male","Female"},

value: fv!item.Gender,
saveInto: fv!item.Gender,
required:true
),

/* For the Removal Column*/
a!richTextDisplayField(
value: a!richTextIcon(
icon: "trash-o",
altText: "delete " & fv!index,
caption: "Remove " & fv!item.FirstName & " " & fv!item.LastName,
link: a!dynamicLink(
value: fv!index,
saveInto: {

if(
isnull(fv!item.Id),
{},
a!save(local!deletedEmployeeIds,append(local!deletedEmployeeIds,fv!item.Id))

),
a!save(ri!Del,true),
a!save(ri!Del_Id,local!deletedEmployeeIds),
a!save(local!Employeedata, remove(local!Employeedata, save!value))

}
),
linkStyle: "STANDALONE",
color: "NEGATIVE"
)
)
}
)
),
selectionStyle: "ROW_HIGHLIGHT",
selectionRequired: false,
addRowlink: a!dynamicLink(
label: "Add Employee",

value: {
'type!{urn:com:appian:types:ED}ED_Employee_Details_dt'()
},
saveInto: {
a!save(local!Employeedata, append(local!Employeedata, save!value))
}
),

shadeAlternateRows: true,
spacing: "STANDARD",
rowHeader: 1
)

},
buttons: a!buttonLayout(
primaryButtons: a!buttonWidget(
label: "Submit",
saveInto: {a!save(ri!item,local!Employeedata)},
submit: true,
style: "PRIMARY"
),
secondaryButtons: {
a!buttonWidget(
label: "Cancel",
value: true,
saveInto: {ri!Cancel},
submit: true,
style: "NORMAL",
validate: false
)
}
)
)
)

can you help me how to implement your code in my code ?

RE: Pagination in Editable Grid

Dimitris Soulovaris — Wed, 27 Apr 2022 18:40:24 GMT

Just copy and paste the code in an empty interface and you will find it out

RE: Pagination in Editable Grid

Nishtha — Wed, 27 Apr 2022 17:24:58 GMT

Hi Danny,

Thanks a lot for reply.

Regards

Nishtha

RE: Pagination in Editable Grid

Nishtha — Wed, 27 Apr 2022 17:23:53 GMT

Hi Dimitris ,

Thanks for reply .Appreciate if you can show how to use this function .

Regards

Nishtha

RE: Pagination in Editable Grid

Dimitris Soulovaris — Wed, 27 Apr 2022 15:47:54 GMT

On top of what Danny proposed as a solution, you can create the pagination functionality itself as a common component for use also in other Grids.

You only have to create a generic interface with only 3 rule inputs:

startIndex (int): pass the pagingInfo.startIndex,

batchSize (int): pass the pagingInfo.batshSize,

totalCount (int): pass the local!datasubset.data

and make a call of this common interface after your grid and you will be fine.

a!localVariables(
  a!sideBySideLayout(
    items: {
      a!sideBySideItem(
        item: a!richTextDisplayField(
          align: "RIGHT",
          value: {
            /* Left Angle */
            a!richTextIcon(
              icon: "angle-double-left",
              link: a!dynamicLink(
                saveInto: {
                  a!save(ri!startIndex, 1),                  
                },
                showWhen: ri!startIndex <> 1
              ),
              linkStyle: "STANDALONE",
              color: if(
                ri!startIndex <> 1,
                "STANDARD",
                "SECONDARY"
              )
            ),
            a!richTextIcon(
              icon: "angle-left",
              link: a!dynamicLink(
                showWhen: ri!startIndex <> 1,
                saveInto: a!save(
                  ri!startIndex,
                  ri!startIndex - ri!batchSize
                )
              ),
              linkStyle: "STANDALONE",
              color: if(
                ri!startIndex <> 1,
                "STANDARD",
                "SECONDARY"
              )
            ),
            /* Start Index */
            a!richTextItem(
              text: {
                ri!startIndex, 
                " - ",
                if(
                  ri!startIndex + ri!batchSize - 1 > ri!totalCount,
                  ri!totalCount,
                  ri!startIndex + ri!batchSize - 1
                )
              },
              style: "STRONG"
            ),
            /* Total Count */
            a!richTextItem(
              text: {
                " of ", 
                ri!totalCount
              }
            ),
            /* Right Angle */
            a!richTextIcon(
              icon: "angle-right",
              link: a!dynamicLink(
                showWhen: (ri!startIndex + ri!batchSize - 1) < ri!totalCount,
                label: "",
                saveInto: a!save(
                  ri!startIndex,
                  ri!startIndex + ri!batchSize
                )
              ),
              linkStyle: "STANDALONE",
              color: if(                
                ri!startIndex + ri!batchSize - 1 < ri!totalCount,                
                "STANDARD",
                "SECONDARY"
              )           
            ),
            a!richTextIcon(
              icon: "angle-double-right",
              link: a!dynamicLink(
                saveInto: {
                  a!save(
                    ri!startIndex, 
                    if(
                      mod(ri!totalCount, ri!batchSize) = 0,
                      ri!totalCount - ri!batchSize + 1,
                      ri!totalCount - mod(ri!totalCount, ri!batchSize) + 1
                    )
                  )
                },
                showWhen: ri!startIndex + ri!batchSize - 1 < ri!totalCount
              ),
              linkStyle: "STANDALONE",
              color: if(                
                ri!startIndex + ri!batchSize - 1 < ri!totalCount,                
                "STANDARD",
                "SECONDARY"
              )
            )
          }
        )
      )
    }
  )
)

RE: Pagination in Editable Grid

Danny Verb — Wed, 27 Apr 2022 13:59:17 GMT

1. You need to add your own custom paging below the grid which will update what gets queried

a!localVariables(
    local!listPagingInfo: a!pagingInfo(startIndex: 1, batchSize: 5),
    /* Instead of todatasubset just use your own query */
    local!pagedList: todatasubset( /*Data*/, local!listPagingInfo),
    {
      {
        a!gridLayout(
          label: "Data",
          rows: a!forEach(
            local!pagedList,
            a!gridRowLayout(
              /*contents*/
            )
          )
        )
        a!richTextDisplayField(
          value: {
            a!richTextIcon(
              icon: "angle-double-left",
              link: a!dynamicLink(
                saveInto: {
                  a!save(local!listPagingInfo.startIndex, 1),
                  a!save(
                    local!pagedList,
                    todatasubset(arrayToPage: /*Data*/, pagingConfiguration: local!listPagingInfo)
                  )
                },
                showWhen: local!listPagingInfo.startIndex <> 1
              ),
              linkStyle: "STANDALONE",
              color: if(
                local!listPagingInfo.startIndex <> 1,
                "STANDARD",
                "SECONDARY"
              ),
              size: "MEDIUM"
            ),
            a!richTextIcon(
              icon: "angle-left",
              link: a!dynamicLink(
                saveInto: {
                  a!save(
                    local!listPagingInfo.startIndex,
                    if(
                      local!listPagingInfo.startIndex - local!listPagingInfo.batchSize < 1,
                      1,
                      local!listPagingInfo.startIndex - local!listPagingInfo.batchSize
                    )
                  )
                },
                showWhen: local!listPagingInfo.startIndex <> 1
              ),
              linkStyle: "STANDALONE",
              color: if(
                local!listPagingInfo.startIndex <> 1,
                "STANDARD",
                "SECONDARY"
              ),
              size: "MEDIUM"
            ),
            " ",
            a!richTextItem(
              text: {
                local!listPagingInfo.startIndex,
                " - ",
                if(
                  local!listPagingInfo.startIndex + local!listPagingInfo.batchSize - 1 > local!pagedList.totalCount,
                  local!pagedList.totalCount,
                  local!listPagingInfo.startIndex + local!listPagingInfo.batchSize - 1
                )
              },
              size: "MEDIUM",
              style: "STRONG"
            ),
            a!richTextItem(
              text: {
                " of ",
                fixed(local!pagedList.totalCount, 0)
              },
              size: "MEDIUM"
            ),
            " ",
            a!richTextIcon(
              icon: "angle-right",
              link: a!dynamicLink(
                saveInto: {
                  a!save(
                    local!listPagingInfo,
                    a!pagingInfo(
                      startIndex: local!listPagingInfo.startIndex + local!listPagingInfo.batchSize,
                      batchSize: local!listPagingInfo.batchSize
                    )
                  )
                },
                showWhen: local!listPagingInfo.startIndex + local!listPagingInfo.batchSize - 1 < local!pagedList.totalCount
              ),
              linkStyle: "STANDALONE",
              color: if(
                local!listPagingInfo.startIndex + local!listPagingInfo.batchSize - 1 < local!pagedList.totalCount,
                "STANDARD",
                "SECONDARY"
              ),
              size: "MEDIUM"
            ),
            a!richTextIcon(
              icon: "angle-double-right",
              link: a!dynamicLink(
                saveInto: {
                  a!save(
                    local!listPagingInfo.startIndex,
                    /* When jumping to the last page, make sure that the startIndex is an even multiple of batch size. *
                     * This ensures that you have the same last page as if you had gotten there one page at a time.    */
                    if(
                      mod(local!pagedList.totalCount, local!listPagingInfo.batchSize) = 0,
                      local!pagedList.totalCount - local!listPagingInfo.batchSize + 1,
                      local!pagedList.totalCount - mod(local!pagedList.totalCount, local!listPagingInfo.batchSize) + 1
                    )
                  )
                },
                showWhen: local!listPagingInfo.startIndex + local!listPagingInfo.batchSize - 1 < local!pagedList.totalCount
              ),
              linkStyle: "STANDALONE",
              color: if(
                local!listPagingInfo.startIndex + local!listPagingInfo.batchSize - 1 < local!pagedList.totalCount,
                "STANDARD",
                "SECONDARY"
              ),
              size: "MEDIUM"
            )
          }
        )
      }
    }
  )

2. Since the editable grid doesn't have sorting, You could build sorting just above your grid using a sidebysidelayout and rich text items.