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.
Using classic conditional styling
Select component "Section" (1) on the canvas. Click "Add New" button (2) under Conditional Styles:
On Conditional Settings popup choose action type (3) and click "Add" button in Conditions (4):
See details on using conditions at Working with Conditions article.
* 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 Account (form source object) type is set to Installation Partner
Check images below to see how form looks like when account type is set to Installation Partner (5) and when it stores any other value (6).
Using dynamic conditional styling
Having controlling field(s) displayed on the form allows user to use dynamic styling.
Select component "Nested Form" (7) on the canvas and click "Add New" button (8) under Conditional Styles:
On Conditional Settings popup select action type (9) and click "Add" button(10) to configure condition (11):
See details on using conditions at Working with Conditions article.
Check images below to see how form will look like when user chooses "Hot" rating on the form (1) and when any other value is selected:
Turn on/turn off conditions 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 (12).
user can also turn styles on/off from Conditional Style Settings popup (13):
0 Comments
Add your comment