Conditional Container
Master the art of using Momen's Conditional Containers to display content on your website based on specific conditions dynamically.
Introduction
Welcome to the Momen tutorial on utilizing Conditional Containers. In this guide, we will explore the practical applications of Conditional Containers to display different content under various conditions, enhancing the user experience on your website. Whether you're new to web development or have some experience, we'll break down this feature into manageable steps.
Usage Scenario
Conditional Containers 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 Views on the Same Page: You can showcase different views 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 Containers 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 Selection: You can use Conditional Containers to create an effect similar to a tab bar or expand a catalog subset based on user selections.
💡Tips:
When dealing with different data conditions, consider using [Conditional Data] to assess the suitability of Conditional Container components.
Conditional Container Content
Within Conditional Containers, you can add, modify, or delete conditional sub-containers. The number of sub-containers corresponds to the conditions you need to accommodate in your business situation. For example, if you categorize your login screen into three conditions, like "Not Logged In," "Logged In_User," and "Logged In_Administrator," you would add three sub-containers to the Conditional Container's content.
💡Tips:
Conditional containers have a default condition, "loading", when the page data is still loading; conditional containers show the contents of the sub-container are loading, this condition can not be deleted, you can not set the conditions, it is recommended not to make any changes to it!
After adding the container, you can double-click to enter the conditional sub-container, where you can see four sub-containers, namely "Not Logged In", "Logged In_User", "Logged In_Administrator," and "Loading." "You can click the container name in the upper left corner of the sub-container to configure the display conditions of the sub-container and drag and drop other components into the sub-container to display the content and build the corresponding business logic.
Conditional Judgment Order Logic
The order in which sub-container views are evaluated follows the red arrow, from left to right, or according to the order of adding sub-containers from top to bottom. When a condition is met, the Container 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 container (red box in the figure below).
when all conditions are always or the same, the conditional container 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 subcontainer through the [Switch View Condition] behavior.
Rerun Conditions on Remote Data Update
In some cases, remote data can be used as conditions for Conditional Containers. 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).
Conditional Container Design
It is worth noting that conditional containers can only adjust the width and height of the parent container, the width and height of the child container is determined by the width and height of the parent container.
If you want the height of the parent container to change according to the height of the child container, you can set the height mode of the parent container to [Adapt to Content], for example, the height occupied by all the components in the child container one is 100, and the height occupied by all the components in the child container two is 200, and the height of the parent container will change according to the height of the child container when the conditions change.
Utilization
Different Conditions, Different Display View
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.
Click the Button to Switch the View Display
💡Tips:
This approach is suitable for Conditional Containers 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 Container. By clicking show/hide buttons, you can switch the password display mode.
On an e-commerce webpage, you can use Conditional Containers to switch between the state of having an item in the shopping cart and not having one, allowing for different views.
💡Tips:
Similar to this need to determine in advance conditional containers 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 containers 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.
Combining Selection View
Conditional Containers can display different views 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 Containers and Selection of Views.
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 Container Sets Selection View (Expanding Sub-directories).
If you encounter any issues during the process, feel free to join our Discord community for assistance.
About Momen
Momen is a no-code web app builder, allows users to build fully customizable web apps, marketplaces, Social Networks, AI Apps, Enterprise SaaS, and much more. You can iterate and refine your projects in real-time, ensuring a seamless creation process. Meanwhile, Momen offers powerful API integration capabilities, allowing you to connect your projects to any service you need. With Momen, you can bring your ideas to life and build remarkable digital solutions and get your web app products to market faster than ever before.
Last updated
