Make a Component Required Based on a User Selection

SAIL Recipes give you an opportunity to explore different interface design patterns. To learn how to directly use SAIL recipes within your interfaces, see Adapt a SAIL Recipe to Work with My Applications.

Goal

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

This design pattern is not recommended for offline interfaces because reflecting immediate changes in an interface based on user interaction requires a connection to the server.

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
=load(
  local!isCritical,
  local!phoneNumber,
  a!formLayout(
    label: "SAIL 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!buttonWidgetSubmit(
          label:"Submit"
        )
      }
    )
  )
)

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.
FEEDBACK