Working with Conditional Styles

Conditional styling allows to show/hide, disable, make required or clear form components conditionally. Conditional styling can be applied to various form components:

  • Data Source object fields

  • Virtual fields

  • Section/Page

  • Custom Button

  • Blank Space

  • Custom URL

  • Nested Form

  • Static Text

  • File

  • Image

  • Related Lists and Lists

Note! When conditional styles applied to the Section/Page component - it will be applied to all items inside the section.

Configure Conditional Styles:

Click on Section to open it's Settings.

Click "Add New" button under Conditional Styles.

Drawing

On "Conditional Style Settings" popup choose action type and add Conditions:

Drawing

  • hide - item will not be displayed

  • show - item will be displayed

  • disable - item will be displayed in read only mode

  • clear - item inputs will be cleared

  • required - item will be required to be filled in (available for input items only)

Below settings will display Section in case form "inputmultiselect" field is equal to "Option 1":

Drawing

Conditions can be combined using logic expressions:

Drawing

You can enter as many conditions as required. By default all conditions will be joined with AND connector.

You can set custom join rules in such format: ({1} AND {2}) OR ({3} AND {4}).

Turn on/turn off conditional styles on a form item

For cases when you need to disable conditional styling without removing styles you have added you can simply turn them off:

Drawing

You can also turn on/off your styles from Conditional Style Settings popup:

Drawing

Last updated