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 Types 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

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 or Validation Message Array

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.

Usage considerations

Using a!formLayout()

  • A button layout must be present for a back button to appear for activity-chained tasks.
  • Use form validation messages for problems that are not specific to a single component.
  • The component is cannot be either read-only or disabled.

Initial behavior & focussing

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:

The following patterns include usage of the Form Layout.

Open in Github Built: Thu, Feb 23, 2023 (02:59:22 PM)

On This Page

FEEDBACK