Tập tành tạo page in Webform Module với nhiều Step

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)'