Component - Conditional View
Generally used to show different UI content based on conditional evaluation or when toggling condition view.
Last updated
Generally used to show different UI content based on conditional evaluation or when toggling condition view.
Last updated
Conditional view serve the purpose of displaying different content based on specific conditions. These conditions can encompass various elements, including data, user interfaces, or different functional entrances with varying permissions, all within the same interface. Here are some common scenarios where you can leverage this component:
Different view on the Same Page: You can showcase different view on a single webpage based on conditions. For instance, the page's display can vary for users who are logged in and those who aren't.
View Switching with Buttons: Conditional view allow you to change the displayed content on the same page by clicking a button. For example, clicking the "Send CAPTCHA" button can switch the display to a CAPTCHA Countdown.
Combining with Select View: You can use Conditional view to create an effect similar to a tab bar or expand a catalog subset based on user selections.
In conditional view, you can add/modify/delete conditional sub-view to display different content under different conditions.
For example, when creating a login screen, there are three conditions based on users identities: "visitor", "user", and "admin", so in order to display different interface content under different conditions, we need to add three more sub-view to the content of the conditional view.
💡Tips: Conditional view have a default condition, "loading". When the page data is still loading, the conditional view will show that it's loading. This condition can not be deleted, you can not set the conditions to it either. It is recommended not to make any changes to it!
After adding the view, you can click "Focus Mode" to enter the conditional sub-view, where you can see four sub-view. You can click on the sub-view to configure the display conditions of the sub-view, and drag other components and build the corresponding business logic
The order in which sub-view view are evaluated follows the red arrow, from left to right, or according to the order of adding sub-view from top to bottom. When a condition is met, the view displays the content below that condition. If no conditions are met, the result of the last matching condition is shown.
💡Tips:
The order of the conditions can be changed by dragging and dropping the condition name from the optional condition in the content bar of the conditional view (red box in the figure below).
when all conditions are always or the same, the conditional view displays the topmost condition view (not logged in as shown below)
when all conditions are not set, the condition is always by default, then you can switch the view of the current conditional subview through the [Switch View Condition] action.
In some cases, remote data can be used as conditions for Conditional view. As remote data changes, the conditions may need to be recalculated in real-time. Momen provides a [Remote Condition on Remote Data Update] mode to handle such situations.
💡Tips: The update of remote data depends on the request type. In query-type requests, remote data is fetched or updated when the page loads or refreshes, while in subscription-type requests, data is updated when backend data changes (not applicable to media and file types).
When user rights differ, the displayed page content can also differ. For instance, when user rights are "hr," the condition can be set to "user type=hr," and specific components are placed in that condition view.
When the user's login status varies, the display view can change. For instance, when a user is not logged in, the condition can be set to the "Register," while for logged-in users, it's set to "Update"
💡Tips:
For non-logged-in users, configure the one-click authorization button to complete the login, refreshing the user data or switching the view to the logged-in state.\
💡Tips:
This approach is suitable for Conditional view with a condition set to "always." By configuring a button to switch the view condition, you can achieve the effect of changing the view display by clicking the button.\
In a login scenario, where the user enters a password, the text input box can be placed in a Conditional view. By clicking show/hide buttons, you can switch the password display mode.
On an e-commerce webpage, you can use Conditional view to switch between the state of having an item in the shopping cart and not having one, allowing for different view.
💡Tips:
Similar to this need to determine in advance conditional view to pre-display the view of the situation, as shown in the figure below, need to first determine whether the user's shopping cart has been added to the current purchase of goods, conditional view need to set the status of the condition can not be placed in "always" otherwise when the user's shopping cart has been added to the current purchase of goods, but also still will be the first to display the situation of the un-added.\
Conditional view can display different view based on the selection, similar to a tab bar. While they can't be scrolled, you can find specific configuration methods in the [Help Center] documentation on Conditional view and Selection of view.
In a shopping webpage, you can display parent categories first, and after clicking a category, you can expand sub-categories. This allows users to view products under those sub-categories, and the specific configuration is described in the [Help Center] documentation on Conditional view Sets Selection View (Expanding Sub-directories).
