Articles on: Q&A

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.



How to set up Conditional formatting


Conditional formatting changes how a component looks or hides it when the data matches a condition. To set it up:


  1. Right-click the component and select Conditional formatting.
  2. Choose the action: Change component style if matches the condition or Hide component if matches the condition.
  3. Select the Data field and the Operator, enter the Value, and click Apply.
  4. To set more than one condition for the same component, click **Add new conditional rule** and fill in its data field, operator, and value.


For example, a text can turn green when order_status equals "completed" and red when it equals "cancelled".


Important: 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.


Tip: For simple conditions the predefined operators are enough. Use the Expression operator when they cannot express the condition.


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.


Hiding a table using a container component


Updated on: 05/10/2026

Was this article helpful?

Share your feedback

Cancel

Thank you!