Conditional Visibility

Learn how to conditionally change the visibility of widgets.

Conditional visibility allows you to control the display of UI elements (i.e., widgets) based on certain conditions or criteria. It enables you to create dynamic and personalized user experiences by showing or hiding specific content or features.

For example, using this, you could display features, options, or actions based on the user's role or permissions, such as admins might see admin-only controls.

Adding Conditional Visibility

Let's see how to add conditional visibility with an example that allows users to add doctors to their favorites list only if logged in. In essence, the favorite icon will only be displayed for logged-in users.

Here's what the final result looks like:

Left side: user not logged in | Right side: user logged in

Here are the steps:

1. Select the widget from the widget tree or canvas area.

2. Move to the properties panel -> enable Conditional.

3. Click on the Unset and provide the condition that determines whether a UI element should be displayed or hidden. For this example, we'll directly use the Is User Logged In global property. This will show the widget if the user is logged in.

4. You can toggle Show in UI Builder to test the effect of showing/hiding that widget in the UI builder. Note that this option is only to help you visualize the effect of visibility on the widget, and it does not affect your app.

---

Last Updated Date: October 4, 2023