Filter the Data in a Grid

See SAIL Recipes for information about how to work through recipes and adapt them to your application.

Goal

Filter the data in a read-only paging grid using a dropdown. When the user selects a value to filter by, update the grid to show the result.

The result displays on page 1 even if the user was previously on a different page number.

Note: This design pattern is not recommended for offline interfaces because filtering data based on user interaction requires a connection to the server.

image:SAIL_Recipe_Filter_Data_in_a_Grid.png

This scenario demonstrates:

  • How to change the value of a variable when the user updates another variable.
  • How to ignore the value returned by the component and update a variable with a literal value.

Expression

=load(
  local!data: {
    {id: 1, name: "John Smith",      department: "Engineering"},
    {id: 2, name: "Michael Johnson", department: "Finance"},
    {id: 3, name: "Mary Reed",       department: "Engineering"},
    {id: 4, name: "Angela Cooper",   department: "Sales"},
    {id: 5, name: "Elizabeth Ward",  department: "Sales"},
    {id: 6, name: "Daniel Lewis",    department: "Human Resources"}
  },
  /* batchSize is 3 to show more than 1 page of data in this recipe. Increase it as needed. `*/
  local!pagingInfo: a!pagingInfo(startIndex: 1, batchSize: 3),
  local!department,
  with(
    /*` Set the value of local!filteredData based on your filtering logic `*/
    local!filteredData: if(
      isnull(local!department),
      local!data,
      index(local!data, where(search(local!department, local!data.department)), {})
    ),
    local!datasubset: todatasubset(local!filteredData, local!pagingInfo),
    a!formLayout(
      label: "SAIL Example: Filter a Grid",
      firstColumnContents: {
        a!dropdownField(
          label: "Department",
          choiceLabels: {"Engineering", "Finance", "Sales", "Human Resources"},
          placeholderLabel: "All",
          choiceValues: {"Engineering", "Finance", "Sales", "Human Resources"},
          value: local!department,
          saveInto: {
            local!department,
            /*` We need to reset the paging info so that it goes back */
            /* to the first page of the grid when the user changes    */
            /* the filter. Otherwise, the grid errors out.            */
            a!save(local!pagingInfo.startIndex, 1)
          }
        ),
        a!gridField(
          label: "Employees",
          totalCount: local!datasubset.totalCount,
          columns: {
            a!gridTextColumn(
              label: "ID",
              field: "id",
              data: index(local!datasubset.data, "id", {}),
              alignment: "RIGHT"
            ),
            a!gridTextColumn(
              label: "Name",
              field: "name",
              data: index(local!datasubset.data, "name", {})
            ),
            a!gridTextColumn(
              label: "Department",
              field: "department",
              data: index(local!datasubset.data, "department", {})
            )
          },
          value: local!pagingInfo,
          saveInto: local!pagingInfo
        )
      },
      buttons: a!buttonLayout(
        primaryButtons: a!buttonWidgetSubmit(
          label: "Submit"
        )
      )
    )
  )
)

Test it out

  1. Select a department from the dropdown to filter the grid.
  2. Select "All" from the dropdown. Go to the second page of the grid, then select a department. Notice that you go back to the first page of returned items.

Notable implementation details

  • Notice that when the user makes a selection from the dropdown, we’re always resetting the value of local!pagingInfo so that the user always sees the first page of results for the selected filter. This is necessary regardless of what the user has selected, so we ignore the value returned by the component (in this case, the value of the dropdown selection) and instead insert our own value.
  • When you configure your grid, replace the value of local!data with the result of your a!queryEntity() or queryrecord(). These functions allow you to retrieve only the fields that you need to configure your dropdown. See also: SAIL Design
  • When using a!queryEntity() or queryrecord(), you can remove the filtering step and simply use a filter within a!queryEntity() or queryrecord() itself. For examples, see Query Recipes.
FEEDBACK