Form Layout

Form

Displays any arrangement of layouts and components beneath a title and above buttons. Use this as the top-level layout for start and task forms.

See Also: Dashboard, Columns

Function: a!formLayout()

Parameters

Name Keyword Type Description
Label label Text Optional text to display as the interface's title.
Instructions instructions Text Optional text displayed below the field's label.
Contents contents Any Type Array Components and layouts to display in the form body.
Buttons buttons Button Layout Buttons to display at the bottom of the form, arranged using a!buttonLayout().
Validations validations Text or Validation Message Array Validation errors displayed above the form buttons. Configured using a text array or an array with a mix of text and Validation Message using a!validationMessage(message, validateAfter).
Validation Group validationGroup Text When present, the form is only validated when a button in the same validation group is clicked.
Don’t automatically focus on first input skipAutoFocus Boolean Determines whether the first input will receive focus when a form loads. Default is false.
Visibility showWhen Boolean Determines whether the layout is displayed on the interface. When set to false, the layout is hidden and is not evaluated. Default: true.

Notes

Examples

Copy and paste an example into the INTERFACE DEFINITION in EXPRESSION MODE to see it displayed.

Two-Column Form

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
45
46
47
48
49
50
51
52
53
54
55
56

=a!formLayout(
  label: "Customers for Review",
  instructions: "Review the profiles for the customers below and contact as needed",
  contents: {
    a!columnsLayout(
      columns: {
        a!columnLayout(
          contents: {
            a!textField(
              label: "Customer",
              value: "John Smith",
              readOnly: true
            ),
            a!textField(
              label: "Status",
              value: "Prospective",
              readOnly: true
            ),
            a!textField(
              label: "Priority",
              value: "High",
              readOnly: true
            )
          }
        ),
        a!columnLayout(
          contents: {
            a!textField(
              label: "Customer",
              value: "Michael Johnson",
              readOnly: true
            ),
            a!textField(
              label: "Status",
              value: "Prospective",
              readOnly: true
            ),
            a!textField(
              label: "Priority",
              value: "Medium",
              readOnly: true
            )
          }
        )
      }
    )
  },
  buttons: a!buttonLayout(
    primaryButtons: {
      a!buttonWidget(
        label: "Submit",
        submit: true
      )
    }
  )
)

Displays the following:

Open in Github

On This Page

FEEDBACK