Introduction
In this article, the process of showing a page filter based on the selected value of another filter will be explored, with a focus on managing the visibility of a secondary page filter. As a starting point, consider a page listing Tickets with three functional page filters for the fields Status, Type, and Priority. The design of these filters will ensure that the Priorities filter is hidden when the Status filter is set to either Completed or Cancelled.
.gif)
Step-by-step instructions
1. Save Selected Values
To store the selected value of a filter, add a Save Page Data behaviour to the status filter.
Event: on change
Set a key for the pageState and pick Event as the Value Source
.png)
When the Page State panel is opened, the behaviour can be seen in action:
2. Use the value with a “Show component based on condition” behaviour
The Show component based on a conditional behaviour needs to be added to the Priority filter. A condition should be written in JavaScript to check if the statusFilter criteria is neither 'COMPLETED' nor 'CANCELLED'.
.png)
return !['COMPLETED', 'CANCELLED'].includes(pageState.statusFilter?.criteria)Extra
If one wants to check whether a value is selected, regardless of what the value is, the following condition can be used:
!!pageState.statusFilter?.criteriaConclusion
Implementing Save Page Data with a Show Component Based on a Condition significantly enhances user experience by dynamically adjusting visibility based on contextual relevance. This approach minimizes visual clutter, streamlines the interface, and ensures users only interact with pertinent filters. This not only simplifies navigation but also optimizes the clarity and usability of the page.