How to make Conditional Region removes itself?

Instead of conditionally shows element inside the Conditional Region, I want to conditionally remove the region entirely. What I want to achieve is the same as dynamic attribute > show/hide, but instead of just show/hide with display: none, I want it to be removed from the document, just like achievable with conditional region except I want the entire region to be removed not just element inside it.

Is that currently possible or is there workaround to achieve this? Thanks.

I’m sorry, i think i’m a bit confused as to what you want. Pretty much any DIV or element in wappler you can set the Dynamic Attribute show/hide on. And what ever condition you put on that, then the whole region will be hidden/removed.

For instance, i have some show/hide conditions set up on a Animated Region. You could also set it up on a Section which is a nice way to contain it all.

Would either of those work for your situation?

This is one example i have, but it did not need to be an animate region/

No you can't do this. The conditional region works exactly like that.

I wish the conditional regions would make the whole block disappear as you suggest - like you could easily do with PHP etc.

If the issue is that the region takes up space, whether the condition is met or not - eg if it’s a applied to a column - it’s best to add a new component which will simply add this:
<div id="conditional1" is="dmx-if"></div>
… so will take up no space when the condition is not met (although it will result in empty, redundant tags).

1 Like

Not what I wanted to achieve. @TomD understood it well. Thanks for your response anyway. :innocent:

Well noted. But I still hope it can be considered in the future. Thank you :innocent:

The way App Connect works it’s not possible to do it. App Connect does not use <?php tags in the code.
This will be possible in the future, when some templating engine is available for PHP projects, similar to NodeJS integration.

2 Likes

Hey @Teodor, is it currently possible with NodeJS? :slight_smile:

2 Likes

I ran into the issue when using a column as a conditional region. My work around is to also set a dynamic display “show” using the same condition as the conditional. The columns then layout properly.