Is it possible to conditionally change the component style or hide the component?
Yes, it is possible to conditionally hide or change the style of a component. By defining specific conditions, you can dynamically adjust the visibility or appearance of components, creating more flexible and interactive content.
The ability to hide or change the style of a component depends on its type. While most components can be hidden, changing a component's style is only possible with certain specific components.
When adding multiple conditions, the conditions are connected by the OR operator, meaning Conditional Formatting will be applied if any of the specified conditions are met. To apply the Conditional Formatting only when all conditions are met, select the Expression option from the operators field and use the expression language with the AND operator.
Let's imagine a use-case where you want to hide a component when both {dataFieldName} and {dataFieldName2} are empty. In this case, the expression would look like this:
empty({dataFieldName}) && empty({dataFieldName2})
This expression will ensure that the component is hidden if both data fields are empty.
The table component doesn't have the option to be hidden based on a condition, it only allows style changes. However, the table can be hidden by placing it inside a container component and applying the desired hiding condition to the container.
Functions
Header & Footer Component
Is it possible to conditionally hide a page in the document?
The ability to hide or change the style of a component depends on its type. While most components can be hidden, changing a component's style is only possible with certain specific components.
When adding multiple conditions, the conditions are connected by the OR operator, meaning Conditional Formatting will be applied if any of the specified conditions are met. To apply the Conditional Formatting only when all conditions are met, select the Expression option from the operators field and use the expression language with the AND operator.
Use-case of Expression Language in Conditional Formatting
Let's imagine a use-case where you want to hide a component when both {dataFieldName} and {dataFieldName2} are empty. In this case, the expression would look like this:
empty({dataFieldName}) && empty({dataFieldName2})
This expression will ensure that the component is hidden if both data fields are empty.
Hiding a table based on a condition
The table component doesn't have the option to be hidden based on a condition, it only allows style changes. However, the table can be hidden by placing it inside a container component and applying the desired hiding condition to the container.
Related articles you may find helpful
Functions
Header & Footer Component
Is it possible to conditionally hide a page in the document?
Updated on: 13/03/2025
Thank you!