Best way to filter an Editable Grid

Hi All, 

What is the recommended way to display A LOT of data in an editable grid? Right now my grid shows over 900 rows of editable data with 6 columns, so it is extremely slow to load and edit. What are my options to make this better? The grid is only for Admins to manage external user data that is called for drop downs in other records. I wanted to avoid totally reworking this into it's own record where each external user in the list is it's own record that you have to click into to edit or create new ones -- this seemed like a more complicated process to me. 

It seems like there is no reasonable way to filter an editable grid like you can with a read-only grid, or even apply paging. Please help! 

Thank you

  Discussion posts and replies are publicly visible

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

  • 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
  • A Score Level 1
    in reply to gianninol
    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.