“Visible” and “Display” do Different Things

In OutSystems, Links and Button have a “Visible” property while Containers have a “Display” property. Unless you really think about it, that sounds like they do the same thing, right? I sure thought so, and so did many of the other OutSystems developers I know! Thanks to Leonardo Fernandes, I’ve been set straight.

I have put together sample code for this article. You can download it from the OutSystems Forge, or you can see it running in my Personal Environment.

The “Visible” property on Links and Buttons controls whether or not the widget is generated as HTML and sent to the browser. If it is “false”, that control simply does not exist.

The “Display” property on Containers will cause the element to have CSS with “display: none;” in it, which means that the HTML will be sent to the browser but the Container will not be visible on the screen. This CSS will be added to any CSS also on the Container that was set with an Extended Property. Any Web Blocks in that Container will still have their Preparation actions run, the needed items will be stored in viewstate, and so on.

So, what is the difference, and why is it there?

The “Visible” property of Links and Buttons is useful for security reasons. If a user should not be able to click a link or button because they do not have access to what is behind it, it would be a bad idea to let them click it after tweaking CSS in their browser’s developer’s tools. That said, it is not complete security because the destination page should still have the role-based access set, and any additional security checks should be done in the Preparation of that page, and any sensitive data in the URL should be replaced with something like a GUID to prevent URL tampering.

The “Display” property of Containers should be used when you need the HTML of the Container to go to the screen, but the Container hidden. An example use case would be if you are using jQuery to show the Container and do not want to have to make a trip to the server with an AjaxRefresh to get the content. If you have a security reason to hide the Container, you should not use this to hide the Container, instead use an If widget to keep the Container from rendering at all.

Hope this helps to make this more clear to folks!