We can use Flow page conditions (which are very similar to business rules) to conditionally vary the components that are shown to the end-users of apps. Thus, we can create a dynamic and different experience for our users with the same page layout.
We have two different types of page conditions we can create – Boolean and Scalar. Depending on the component we have selected, the drawing tool automatically displays the condition that is applicable, i.e., Scalar or Boolean.
Boolean – Lets us create a condition where we can change the status of a component in the page layout when another component is True/False.
Scalar – Lets us create a condition where we can change the status of a component in the page layout, based on a comparison between two values.
We have three options to choose from, if a particular condition is true (or false, as the case may be): 1. Visible, 2. Editable, and 3. Required. As we can guess, the Visible option makes a page component visible to the user if a condition is true/false. The Editable option makes a component editable if a condition is true/false, and the Required option makes a component required for the user if a condition is true/false.
To create a Boolean page condition
- Say, we have a page layout called New page conditions. As we can see, the page has a toggle component, and a presentation component. Click the Basic Page conditions icon on the right-hand-side navigation.
This opens a configuration panel. We have the options for creating basic as well as advanced page conditions. Advanced page conditions (as the name implies) can handle more complex conditions and page rules.
- The dropdown menu lets us select the component we want to build the condition for.
This opens the configuration options we have. - Do we want the condition to be True or False?
- Which component will be affected by the condition?
- How will the component behave if the condition is met? The Visible option makes a page component visible to the user if a condition is true/false. The Editable option makes a component editable if a condition is true/false, and the Required option makes a component required for the user if a condition is true/false.
- Click Save Basic Condition to save the condition.
To create a Scalar page condition
Let’s say we have a page layout which has a toggle button, two Input components, and two Presentation components.
- Click Basic Page Conditions.
This opens a configuration panel. We have the options for creating basic as well as advanced page conditions. Advanced page conditions (as the name implies) can handle more complex conditions and page rules. - The dropdown menu lets us select the component we want to build the condition for. We will select a component that can support scalar conditions. Let’s go with Input 1 for the purposes of this tutorial.
- We have four comparison parameters to chose from – is equal to, is not equal to, is empty, and is not empty. Let’s select is equal to.
- Click Select a value, to select the value we are comparing with. As you can guess, this value can be any arbitrary value. We are going to select Arbitrary value.
- What happens if the condition is true? We can select a component, and decide how the component’s behavior will be affected. Let’s select the Presentation 1 component. The Visible option makes a page component visible to the user if a condition is true/false. The Editable option makes a component editable if a condition is true/false, and the Required option makes a component required for the user if a condition is true/false. How about, we make this component Visible if the condition is true?
- Click Save Basic Condition to save the condition.
