Control component's visibility

You can configure component visibility using the Show Condition property. Setting this property to false hides the component, while setting it to true displays it.

The Show Condition property has two main configurations:

1. Preserve space when hidden

2. Hide Mode

Preserve space when hidden

By default, hidden components do not occupy space on the canvas. However, if you enable the option to "Preserve space when hidden," the component's layout will remain intact regardless of its visibility. This ensures that components maintain their fixed positioning, whether visible or hidden.

1. "Preserve space when hidden" disabled

2. "Preserve space when hidden" enabled

Hide Mode

Hidden

"Hidden" is the default value for the hide mode. When hide mode is set to "hidden", the component is always rendered during page initialization. Even if the component is inside another component that renders children dynamically, it will be rendered on page initialization and the On Init trigger will be fired.

For example, if you place a component inside a modal dialog, this component will be rendered during page initialization and the On Init trigger will be triggered.

Not Rendered

The "Not rendered" mode 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.

For components that render children dynamically, this setting also affects their dynamic children.

For example, if you place a table inside a modal dialog, the table will not be rendered during page initialization. Each time you open this modal dialog, the table will be rendered from scratch, and the On Init trigger will be activated.

How to approach components visibility

Use the "Hidden" hide mode for all components that should be visible on the page immediately after loading. For components that display their children dynamically (e.g., modal, tabset, stepper), use the "Not rendered" hide mode to improve application performance.