Conditional Region Else

[Marzio]

I subjected a row to Conditional Region. Visible if inputNumber <= 20
It works perfectly, but I would like an else instruction
if the value greater than 20 display an Alert
It’s possible?

[tbvgl]

Yeah, add a dynamic event for input updated and trigger the alert if the value is > 20.

[Marzio]

The problem is that the input is a hidden field
I really solved by duplicating the Conditional Region and configuring them with alternative data
But I don’t like the solution

[tbvgl]

Can you share your code?

[ben]

@Marzio

I subjected a row to Conditional Region. Visible if inputNumber <= 20
It works perfectly, but I would like an else instruction
if the value greater than 20 display an Alert
It’s possible?

Please vote!

[Marzio]

[tbvgl]

Conditional regions are rendered server side and not really meant to change their state when a value changes client side. I would add the show if condition to the row instead under dynamic attributes.

[Sorry_Duh]

@tbvgl

Conditional regions are rendered server side

I thought they was client side? all the condition regions do to my understanding is make it so what’s inside the conditional region is not rendered in the DOM until the condition is met which is why the app connect one also shouldn’t be used for hiding sensitive data:

@Teodor

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.

@Teodor

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.

[tbvgl]

If you have sensitive data then you should use conditional regions and best restrict the data server side as well. But conditional regions are evaluated server side on page load.

[Marzio]

This probably works better

[Sorry_Duh]

Show and hide is fine here the only difference between show and hide and the condition region is:

show and hide set the row to display none so it cant be seen visually but is still rendered in the DOM

condition will either render it in the DOM or not meaning you wouldn’t have to load the content inside the condition when the condition is not met for example if you had a table with records it wouldn’t take extra time to process those records

either way it is still in the source but as mentioned your case show and hide should be more than okay

@patrick

I don’t think it is a security issue when interface items are hidden using css, as long you have the data secured. Also hiding like Teodor suggest would prevent the user from seeing the DOM elements with devtools, but it is still in the HTML source. If you really want to hide the content within the source then you have to do that server-side.

It is true that the could edit the css to make it visible, but if the resource where it links to is protected it doesn’t matter, make sure you prevent access to the pages and server actions that are restricted.

[Alexander_Paladines]

If you really want to hide content even from the DOM, you can try using EJS.
In a Server Action you can do something like:

Condition {{depends_of_your_query}}
THEN
Set Value my_var=1
ELSE
Set Value my_var=0

Now if are you using a server connect in server side data you can easily use EJS, something like this:

<% if (_('my_var==1',locals)) {%>

<div class="row">
<div class="col>
.............
</div>
</div>

<% } %>

I use this a lot, because in nodeJS I found it as the only option. Similar like in PHP using simple conditions.

[sid]

@tbvgl

But conditional regions are evaluated server side on page load.

Nope. They are JS based conditions, evaluated on client side. When a page is requested, you can see all the conditional region HTML data in the network tab.

You need to use server side expressJS bindings <% %> if you wish to restrict sending the HTML to client side… as Alexander has also mentioned.

[JonL]

Yup. A conditional region is just an App Connect component. You can check the code in appconnect.js. It’s the dmx-if component.

[JonL]

@Marzio

But I don’t like the solution

App Connect doesn’t have block support so it’s the only option available unless you create a custom app connect component.

[tbvgl]

You’re right. I was wrong here. Thank you for clarifying.

I restrict stuff on the server side and only let conditional regions run on page load or they will error out because of my server restrictions but what I said before was misleading.