See SAIL Recipes for information about how to work through recipes and adapt them to your application.
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.
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.
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.