What is the conditional container component?
The conditional container component enables users to restrict the visibility of certain items depending on the user role. For example, only show this specific content to Admin users, or hide content from users in a certain department.
Why use the conditional container component?
The conditional container is useful to have different kinds of content. For example, restrict the visibility of different menus to specific users depending on a condition.
How to use the conditional container component
To set up the conditional container component you will need to:
- Add the conditional container
- Configure the conditional container
- Test your conditional container
Step 1 – Add the conditional container
- Add the conditional container screen template to your app using the add screen button
- When configuring your conditional container, make sure to refer to the data source attached to your log in screen to create your conditions
- To add an additional conditional container drag and drop the component to the screen
Step 2 – Configure the conditional container
- Click the container, and using the settings menu on the right-hand side, add a condition to your container
- Under “container visibility if condition is true” you can select to hide or show
- On the data field type the column title from the user data source. Note that this field is case sensitive
- Under logic, you can select the following options:
- Equals: Use this option if you want the value to be equal to the information on the selected data source column
- Doesn’t equal: Use this option to exclude one option from the user data source.
- Contains: Use this option if you are adding multiple conditions with different values in the same column
Note that when creating multiple conditions, if the user matches more than one condition only the last condition will apply to this user
- Add the value, for example, if you want to show the container to admin users, and in your data source admins are marked as “Yes”, you would have the Data field: Admin Logic: Equals Value: Yes
- Save & close
- Once you have configured your conditional container settings, add any desired component inside the container
Step 3 – Test your conditional container
- Once you have created your conditional container we recommend testing to ensure that the conditions are working correctly
- To test your conditional container, go to Preview mode
- Make sure that you log in with a user who meets the conditions you created, for example, if your condition was to only show the content to admin users make sure that your user is an admin and contains a Yes in the Admin column of the data source
- Ensure the container is showing or hidden depending on your login information