Hi all,Help me to understand this - What's the difference between setting container visibility and enclosing the container inside if-condition. Causing any impact on UI?
Hi Arun,
it depends first of all whether you are talking about Traditional or Reactive.
For traditional, refer to this post.
As you are talking about visible property of the container, and not display property, I'm thinking probably you are talking about reactive. In that case, I think there is no difference between an If and using the Visible property, in both cases, if condition is not met, the container (the div) will not be part of the DOM.
This as opposed to using a conditional styling of display none, in that case the div stays in the DOM with display none.
See attached oml for showcase for reactive.
Dorine
As to what to use is a matter of taste, the If makes it more apparent to the developer that there is a condition at play, with the downside of that being that you clutter your widget tree.
See this oml for traditional,
there it is as Bogdan said, setting property Display to false will only put a CSS of display:none on the container, but it will still be available in the DOM.
And I fully agree with Khuong, I also prefer the If, even in reactive because of maintainability, but it is even more compelling in Traditional because you avoid stuff in your page that is not needed.
Hi Dorine, Arun,
I am afraid that the behavior of the Visible attribute of a container is different from an If-widget in Reactive, even though in both cases the contents are not put in the DOM.
To illustrate this, see this example:
Code:
Container:
Expression:
This results in the following exception:
Apparently the expression is evaluated even though the Visibility attribute is false. If the container is enclosed in an If-widget with the same condition the exception does not appear.
This behavior also applies to Popup widgets.
Of course you do not have this exception if you avoid the use of the List index but that is not the point. The content is rendered and you do not want that.
My advise is: use an If-widget for Popups and for containers with conditional visibility.
Best regards,
Rogier
P.S. See sample application
Hi @Rogier Olde Dubbelink ,
Sorry, I saw your reply just now while answering to another post 🫤
This is a great addition to the topic, thanks for sharing.
I try to avoid using indexing, so it is not the most obvious use case. So yes, this is clear proof that allthough in the DOM there is no difference, the client code does work differently.
It would be interesting to test what happens to a block with aggregates inside a visible false container vs. an IF false.
Hello Arun Arivazhagan,
See this example:
https://personal-gxzlvs5j.outsystemscloud.com/Tests/VisibleInvisible?_ts=637704048374934783
I think there is no difference, both write on the DOM the element when it´ s visible. I think in the past versions was different one of them just hide with visibility property from CSS.
Hope it helps,
Nuno R
If you set the visibility to False, it will just put a display: none; CSS to it, but the HTML element (div) will still be rendered in the page, opposed to what happens if you put it in an IF condition. If the condition is False, the container (div) is not rendered at all in your page.
Regards,
Bogdan
Hello Bogdan Boglea,
I have the same idea, but I made a simple example and I think they change that.
Best Regards,
Oh, interesting, was not aware of it, is it both in Reactive and Traditional?
I made my example in Reactive
As Nuno R already did simple example, you can see that in the view there is no different.
However, in code maintenance using IF is more easier to maintain than using container visibility. As in Widget Tree we can easily find the If widget than check each container to see what value is set for visibility.
Cheers,
Khuong
Many thanks for the clarification @Bogdan Boglea @Nuno Ricardo Rodrigues @Dorine Boudry @Khuong Truong. It helps a lot.