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 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
Test it out
Select a department from the dropdown to filter the grid. Notice that employees from only one department is visible in the grid.
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.