After reading this article, you’ll know:

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 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.

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.

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

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

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

We currently advice to use the Conditional component in combination with page variables for a well rounded set up 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 Conditional component and it's display logic for personalised pages, by filtering your components visibility based on true/false statements.