Controlling component's visibility
Here, we talk about the Table component as an example, but the guide applies to all available components.
We've previously touched upon configuring component visibility using the Show condition setting here. Check it out if you need a reminder and come back to learn about the two main configurations of this setting:
Just a quick recap how this setting works: basically setting it to false hides the component, while setting it to true displays it.
Now let's dive into its configurations 👇
Preserve space when hidden
By default, hidden components do not occupy space on the canvas. However, if you want to you can preserve their space when hidden by enabling the corresponding setting for a specific component.
In this case, a component's layout will remain intact regardless of its visibility. This ensures that components maintain their fixed positioning, whether they are visible or hidden.
Check the screen below: the Preserve space when hidden setting is disabled for a table component and enabled for a table2 component.
Breaking changes
If you are using component visibility to switch which component is visible in the same place or if you have components that occupy the same location in the layout, you must pay attention to their position after the layout v2 upgrade as they may be broken.
If something does break after the update, there is no need to worry since end-users are not affected. However, you will need to manually reconfigure the layouts where something went wrong.
Hide Mode
Hidden
Hidden is the default value for the Hide mode. When this value is selected, a component is always rendered during page initialization. Even if a component is inside another component which renders children dynamically, it will still be rendered on page initialization, and the On Init trigger will be activated.
Not rendered
The Not rendered option allows you to completely remove the component from the page when its Show Condition is false. This means the component will be rendered each time the Show Condition value changes from false to true. The On Init trigger will be fired each time the component is rendered.
If you have a component that renders children dynamically, then this setting will also affect its children.
How to approach the Hide mode
Which option to choose in the Hide mode is entirely up to you but we would recommend the following:
Use the Hidden option for all components that should be visible on the page immediately after loading.
Use the Not rendered option for components that display their children dynamically (e.g., Modal, Tabset, Stepper) to improve app performance.
Last updated
Was this helpful?