Conditional component

Using the conditional component, you can set conditions to control access to, for example, specific parts of an application or web page.

After reading this article, you’ll know:

• What the Conditional component is and its major options

• How to use the components in your application

• The Conditional component and other display components

What is the Conditional component?

The Conditional component is used to show content based on a specified condition. For example, to restrict the visibility of parts of a web application to certain user groups based on data.

For example, as a regular application user, I cannot see the admin button, but as an admin, I can.

The Conditional component uses the same rules as the filter functionality in other parts of the platform, so for more info on setting up filtering rules, check out our filtering article.

Options

You can set the Conditional logic in the Options for the component. You have the option to choose between single-rule or multi-rule logic. Single rule allows you to set one specific rule that the page will have to follow in order to display the components inside.

With a multi-rule condition, you can filter on more than one variable, and even provide and/or statements for displaying your components.

You can set the visibility for the component and the condition using Left and Right content based on inserted data from a model or a variable or a manually written key.

The condition can be based on a comparison (Compare) of the attributes set in the Left and Right option fields.

Using the visibility option you can decide whether the component will display on launch, when the page is opened, or if it's hidden.

Using Conditional component

Drag the Conditional component on the part of your page where you want to show components based on display logic. Build the part of your page in the Conditional component container, or drag a set of components that you have already built.

Define the display logic conditions in the options of the Conditional component.

Set a left value, a comparator, and a right value.

After your values have been set you can compile your application and test your pages with different data sets. Depending on your condition and data, the display logic will hide or show your components.

In this example, the left-hand field only displays when the status is not equal to new, on the right-hand side you see a field that does not have display logic. On a press of the button, the status updates and the field on the left-hand side appears when the status is no longer equal to "new".

For more info, look at our display logic article: https://docs.bettyblocks.com/en/articles/7207172-using-display-logic-on-your-pages

Conditional vs other content components

The Conditional component is versatile in its own way, however, we are constantly working on improving the platform and have built the display logic feature into our box component as well.

Both offer the variety of making dynamic pages and truly giving your users a personalized experience when visiting your application.

We currently advise using the Conditional component in combination with page variables for a well-rounded setup of your display logic. If you are working with a small feature/positioning inside a data table or container, the box component can help you out!

Use the Conditional components and their display logic for personalized pages, by filtering your component's visibility based on true/false statements.