Show or Hide Elements Conditionally

Intro

You can show or hide elements on your page conditionally, i.e. when a specific condition is met. There are two ways of doing in Wappler - using a conditional region and using the dynamic show and hide attributes. In this tutorial we will explain how to use both methods and what are the differenced.

We have a variable on our page, and we want to show or hide an element based on its value:

The element we want to show and hide is a simple column in the layout:

Show/Hide Dynamic Attributes

The show and hide dynamic attributes allow you to change the visibility of the element.
show - will show the element when the condition is met
hide - will hide the element when the condition is met

When using the show/hide dynamic attributes the element is not removed from the DOM, it’s just hidden by applying a display: none to it. Use them if you want to toggle the visibility of the element often.

First we select the column and add a new dynamic attribute:

Select Display > Show:

And click the dynamic data picker:

We want to show the element when the variable value equals 2. So select the variable value and click the data formatter icon:

Right click the expression and select operations:

Select equals ==

And enter 2:

Click Select:

And then click Select again to apply the condition:

Save your page and preview it in the browser.
As our condition is not met, the column will be hidden. You can inspect the page using the browser dev tools and see that it’s not being removed from the DOM, just hidden using display: none; CSS rule:

Conditional Region

The conditional region will compile and render its content when the condition is met.
When using a conditional region its content is not rendered in the DOM when the condition is not met. Use the conditional regions when the visibility is not toggled often - for example if you only check it on page load.

You can either add the conditional region from the Elements Picker dialog:

Or just convert your column to a conditional region. So click the Make Conditional Region button:

And click the dynamic data picker to select the condition:

We want to show the element when the variable value equals 2. So select the variable value and click the data formatter icon:

Right click the expression and select operations:

Select equals ==

Enter 2 and click the Select button:

And then click Select again to apply the condition:

Save your page and preview it in the browser.
As our condition is not met, the contents of the conditional region will not be rendered in the browser. You can inspect the page using the browser dev tools and see that the contents are not being added to the DOM at all:

5 Likes

5 posts were split to a new topic: Conditional region visible in source code

Does that make conditional region more “secure” than show/hide attributes for hiding sensitive data, like an offer_ID?

1 Like

Yes, its the main reason I use conditional regions, well one of them anyway. Hiding something like salary of other staff members when they can just show it again for example could be an issue.

1 Like

This means that if you have a {{some_binding.here}} its value won’t be rendered on the page when using a conditional region.
When using show/hide the value will be rendered but hidden using display: none; so available in the dev tools inspector.

It makes it slighly more secure - but not really secure. More obfuscation than security. The data is still downloaded, so can be seen using the browser developer tools for example (at least, AFAIK).

Just want to make something clear here - the focus here is not on the security.
It’s the page load/rendering speed that is affected.
Imagine having a multi column table with 3k records loaded on page load and hiding it with just display: none; vs not rendering 3k records in the DOM at all.

The security of your data is your responsibility and should be done in your server actions.

5 Likes

Very good point and you answer another question of ours about how to improve loading of a dashboard full of email messages. Conditional region in our case is the solution. :+1: