Question:
i've set up a very simple form to test out wizard page visibility. i cant seem to hide page 2 based on condition of fields in page 1.
set up and test
- wizard page(1) has a checkbox(1) and a text field(1).
- wizard page(2) has a text field(2).
- page(1) text field condition = visible if checkbox(1) is checked.
- test result: pass. toggles on and off with the checkbox(1).
- wizard page(2) condition = visible if page(1) checkbox(1) is checked.
- test result: fail(?). checking and unchecking checkbox(1) has no effect on page(2) visibility which remains visible regardless.
When i test the form it does skip page(2) if checkbox(1) is unchecked but the behaviour is more like enabled/disable than visible/hidden.
Example:
step_1:
'#type': wizard_page
'#title': 'Step 1'
select_trigger:
'#type': select
'#title': 'Select Trigger'
'#options':
- Hide
- Show
'#required': true
step_2:
'#type': wizard_page
'#title': 'Step 2'
flexbox_container:
'#type': flexbox
'#states':
visible:
':input[name="select_trigger"]':
value: Show
radio:
'#type': radios
'#title': Radio
'#options':
'No': 'No'
'Yes': 'Yes'
'#required': true
checkbox:
'#type': checkboxes_other
'#title': Checkbox
'#options':
one: One
two: Two
three: Three
'#required': true
'#states':
visible:
':input[name="radio"]':
'!value': 'No'
textbox:
'#type': textfield
'#title': Textbox
'#required': true
actions:
'#type': webform_actions
'#title': 'Submit button(s)'
Solution:
In the following example, a value from page 1 populates a computed token on page 2. and I will use computed token to make conditions in page 2.
Example:
step_1:
'#type': wizard_page
'#title': 'Step 1'
select_trigger:
'#type': select
'#title': 'Select Trigger'
'#options':
- Hide
- Show
'#required': true
step_2:
'#type': wizard_page
'#title': 'Step 2'
computed_select_trigger:
'#type': computed_token
'#display_on': form
'#value': '[webform_submission:values:select_trigger]'
flexbox_container:
'#type': flexbox
'#states':
visible:
':input[name="computed_select_trigger"]':
value: Show
radio:
'#type': radios
'#title': Radio
'#options':
'No': 'No'
'Yes': 'Yes'
'#required': true
checkbox:
'#type': checkboxes_other
'#title': Checkbox
'#options':
one: One
two: Two
three: Three
'#required': true
'#states':
visible:
':input[name="radio"]':
'!value': 'No'
textbox:
'#type': textfield
'#title': Textbox
'#required': true
actions:
'#type': webform_actions
'#title': 'Submit button(s)'
