Filter the Data in a Grid

SAIL Recipes give you an opportunity to explore different interface design patterns. To learn how to directly use SAIL recipes within your interfaces, see Adapt a SAIL Recipe to Work with My Applications.

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.

This recipe uses an employee data structure and objects created through the Use the Write to Data Store Entity Smart Service Function on an Interface recipe. Make sure that recipes has been built first in order to see data in this recipe.

image:SAIL_Recipe_Filter_Data_in_a_Grid.png

This design pattern is not recommended for offline interfaces because reflecting immediate changes in an interface based on user interaction requires a connection to the server.

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(
  /* In a real app, these values should be held in the database or in a constant */
  local!departments: { "Corporate", "Engineering", "Finance", "HR", "Professional Services", "Sales" },
  local!pagingInfo: a!pagingInfo(
    startIndex: 1,
    batchSize: 5,
    sort: a!sortInfo(
      field: "id",
      ascending: true
    )
  ),
  local!selectedDepartment,
  with(
    /* 
    * local!datasubset is pulling data from the employee data store entity 
    * from the entity backed record tutorial.
    *
    * To use your data, change the constant from cons!EMPLOYEE_ENTITY to one of
    * your own. Then replace the fields in the queryColumns to a
    * relevant datapoint from your data store entity
    */
    local!datasubset: a!queryEntity(
      entity:cons!EMPLOYEE_ENTITY,
      query:a!query(
        selection: a!querySelection(columns: {
          a!queryColumn(field: "firstName"),
          a!queryColumn(field: "lastName"),
          a!queryColumn(field: "department"),
          a!queryColumn(field: "title"),
          a!queryColumn(field: "phoneNumber"),
          a!queryColumn(field: "startDate")
        }),
        filter: if(
          isnull(local!selectedDepartment),
          null,
          a!queryFilter(field: "department", operator: "=", value: local!selectedDepartment)
        ),
        pagingInfo: local!pagingInfo
      )
    ),
    a!sectionLayout(
      contents:{
        a!dropdownField(
          label:"Department",
          choiceLabels: local!departments,
          choiceValues: local!departments,
          placeholderLabel: "-- Filter By Department -- ",
          value:local!selectedDepartment,
          saveInto:local!selectedDepartment
        ),  
        a!gridField(
          label:"Employees",
          totalCount: local!datasubset.totalCount,
          columns: {
            a!gridTextColumn(
              label: "First Name",
              field: "firstName",
              data: index(local!datasubset.data, "firstName", null)
            ),
            a!gridTextColumn(
              label: "Last Name",
              field: "lastName",
              data: index(local!datasubset.data, "lastName", null)
            ),
            a!gridTextColumn(
              label: "Department",
              field: "department",
              data: index(local!datasubset.data, "department", null)
            ),
            a!gridTextColumn(
              label: "Title",
              field: "title",
              data: index(local!datasubset.data, "title", null)
            ),
            a!gridTextColumn(
              label: "Phone Number",
              data: index(local!datasubset.data, "phoneNumber", null)
            ),
            a!gridTextColumn(
              label: "Start Date",
              field: "startDate",
              data: index(local!datasubset.data, "startDate", null),
              alignment: "RIGHT"
            ),
          },
          value: local!pagingInfo,
          saveInto: local!pagingInfo
        )
      }
    )
  )
)

Test it out

  1. Select a department from the dropdown to filter the grid. Notice that employees from only one department is visible in the grid.
  2. Select "Filter By Department" from the dropdown. All employees will return to the grid.

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.
Open in Github
17.3
FEEDBACK