Best way to filter an Editable Grid

Sarah,

It is certainly more difficult to page an editable grid, but it is still possible without too much work. An example of a paging editable grid might be as such:

load(
  local!data: rule!getData(),
  local!pagingInfo: a!pagingInfo(
    startIndex: 1,
    batchSize: 25,
    sortInfo: <your default sort>
  ),
  local!dataSubset: a!todatasubset(local!data, local!pagingInfo),
  {
     a!richTextDisplayField(
        value: {
          a!richTextItem(
            text: "Next Page ->",
            link: a!dynamicLink(
              saveInto: {
                a!save(
                  local!data,
                  updatearray(
                    local!data,
                    enumerate(
                      count(local!dataSubset.data)
                    ) + 1,
                    local!dataSubset.data
                  )
                ),
                a!save(
                  local!pagingInfo,
                  a!pagingInfo(
                    startIndex: local!pagingInfo.startIndex + local!pagingInfo.batchSize,
                    batchSize: local!pagingInfo.batchSize,
                    sort: local!pagingInfo.sort
                  )
                ),
                a!save(
                  local!dataSubset,
                  todatasubset(local!data, local!pagingInfo)
                )
              }
            )
          )
       }
     ),
   rule!yourGrid(
     data: local!dataSubset.data
   )
  }
)

There would definitely be a lot more to it that I've shown above (back button, adding filtering, sorting, etc.), but that should hopefully give you enough to go off of if you choose to go this route. It would definitely go a long way towards improving the page's rendering time and performance.

Thanks,

Nino

Thanks Nino -- I'll take a look at this. To add filtering and sorting, would I still need to use this format or can that be applied directly to the editable grid somehow?

Sarah,

 

The solution I mentioned above works well for simply paging and sorting the data, but filtering is a little more difficult. Below, I've written out something different that may work a little better for your use case. It works by first sorting the data, then finding the indices of all the data that match the given filters. Then it pages those indices and only iterates over those to get the relevant data.

I hope this helps!

load(
  local!data: rule!getData(),
  local!pagingInfo: a!pagingInfo(
    startIndex: 1,
    batchSize: -1,
    sort: <default sort>
  ),
  local!sortedData: todatasubset(
    local!data,
    local!pagingInfo
  ).data,
  /*Defaulting the filter to only show active entries*/
  local!statusFilter: 1,
  local!filteredIndices: wherecontains(
    local!statusFilter,
    local!sortedData.statusId
  ),
  /*
    Place paging info, sorting, and filtering controls here.
    An example of a filtering control could be:
  */
    a!dropdownField(
      label: "Status Filter",
      choiceValues: {1, 2},
      choiceLabels: {"Active", "Inactive"},
      /*Updating the filteredIndices to show us the places in the data array that match the filters*/
      saveInto: a!save(
        local!filteredIndices,
        wherecontains(
          local!statusFilter,
          local!sortedData.statusId
        )
      )
    ),
  a!gridLayout(
    label: "Label",
    gridHeaders: <your header cells>,
    rows: a!forEach(
      items: index(
        local!filteredIndices,
        /*This enumerate will page the filtered Indices*/
        enumerate(local!pagingInfo.batchSize) + local!pagingInfo.startIndex,
        {}
      ),
      expression: a!gridRowLayout(
        contents: {
          /*Some contents to edit here using the current index, for example: */
          a!textField(
            label: "Email Address",
            value: local!data[fv!item].emailAddress,
            saveInto: local!data[fv!item].emailAddress
          )
        }
      )
    )
  )
)

Thanks for the other ideas!

Hello,

A better approach would be to list the data in a paging grid(which would have filter and sorting etc by default) and use dynamic link to edit a single row of data.

Thanks, Yes I think I might actually do this since it may be easier than the above suggested changes.

For an editable grid this large, but may be worth it to instead build functionality to upload a spreadsheet. That way users can edit data in a spreadsheet (which will probably be faster for them), and then upload it into Appian

What changes would be required for back button ?

The back button / previous page button would look very similar to the next page button in the provided code snippet; it would just decrement the startIndex of the pagingInfo by the batchSize instead of incrementing it and then update the dataSubset accordingly.

My thoughts will be implementing this via an excel sheet,

if you have the predefined columns then you can create a template so that user can have the data in Excel he can do manipulations on the data and simply upload the excel file write it to DB or Process it and display It.