Free cookie consent management tool by TermsFeed Make a Component Required Based on a User Selection
Make a Component Required Based on a User Selection

Tip:  Interface patterns give you an opportunity to explore different interface designs. Be sure to check out How to Adapt a Pattern for Your Application.

Goal

Make a paragraph component conditionally required based on the user selection.

This scenario demonstrates:

  • How to configure a required parameter of one component based off the interaction of another

Expression

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

a!localVariables(
  local!isCritical,
  local!phoneNumber,
  a!formLayout(
    label: "Example: Conditionally Required Field",
    contents:{
      a!columnsLayout(
        columns:{
          a!columnLayout(
            contents:{
              a!checkboxField(
                label: "Is Mission Critical",
                choiceLabels: "Check the box if the employee will be on a mission critical team",
                choiceValues: {true},
                value: local!isCritical,
                saveInto: local!isCritical
              )
            }
          ),
          a!columnLayout(
            contents:{
              a!textField(
                label: "Cell Number",
                placeholder:"555-456-7890",
                required: local!isCritical,
                value: local!phoneNumber,
                saveInto: local!phoneNumber,
                validations: if( len(local!phoneNumber) > 12, "Contains more than 12 characters. Please reenter phone number, and include only numbers and dashes", null )
              )
            }
          )
        }
      )
    },
    buttons:a!buttonLayout(
      primaryButtons:{
        a!buttonWidget(
          label:"Submit",
          submit: true
        )
      }
    )
  )
)

Test it out

  1. Select the Is Mission Critical checkbox. Notice that the Cell Number field is required. If the checkbox is not selected but no comments are entered, the user cannot submit the form.

Make a Component Required Based on a User Selection

FEEDBACK