How to Conditionally Show Components

• Components can be hidden until a condition is met
• One example of this is wanting to show additional components when a particular value is chosen in a select component
• You will need access to the advanced editor to set this up

Video explanation

Steps to set up

Scenario: Hide a "Status Update" text field unless the user selects "High Priority”.

1. In a workflow create a select component (for “Low Priority” and “High Priority” and a text component (for the status update).
1. This can be done in the No-Code Builder.
2. Open up the advanced editor.
3. Navigate to the select component by clicking on Steps > {step name} > {task name} > Layouts > {layout name} > {section name} > {select component name}.
4. Copy the value in the “dataPath” value from the select component.
1. e.g. from “dataPath”: “$.taskOne.selectComponent” you would copy “$.taskOne.selectComponent”.
5. Navigate to the text component.
6. Change this property on the text component.
1. “condition”: “’{$.taskOne.selectComponent}’ == ‘High Priority’”
1. Paste the dataPath for the select component.
2. Notice how both the dataPath and the value are wrapped in ‘single quotation marks’.
3. Notice how the dataPath is wrapped in {}.
4. Notice how two == are used.
7. Check there are no validation errors and then exit out of the Advanced Editor.
1. Your progress will be saved automatically.
8. Publish your workflow.
9. Done 🎉
1. Now when you start a new work item the text component will be hidden until you select the “High Priority” option on the select component.