Section Layout

Section

Function: a!sectionLayout()

Displays any arrangement of layouts and components beneath a section title on an interface.

See also: Dashboard, Form, Columns

Parameters

Name Keyword Type Description
Label label Text Optional text to display as the section's title.
Contents contents Any Type Array Components and layouts to display in the section body.
Validations validations Text or Validation Message Array Validation errors displayed below the section title. 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 section is only validated when a button in the same validation group is clicked.
Collapsible isCollapsible Boolean Determines if an expand/collapse control appears in the section label. Default is false.
Initially Collapsed isInitiallyCollapsed Boolean Determines if the section is collapsed when the interface first loads. Default is false.
Divider Line divider Text Determines where a divider appears within the section. Valid values: "NONE" (default), "ABOVE", "BELOW".
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.
Margin Below marginBelow Text Determines how much space is added below the layout. Valid values: “NONE”, “STANDARD” (default).

Notes

  • You cannot add a section as the content for another section. It results in an error.
  • Sections that contain validation messages are not collapsible regardless of the setting of the Collapsible parameter. For example, if a validation is triggered when the form loads, then that section is expanded, even if you have specified true for the Initially Collapsed parameter.

Examples

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

Two Columns within One Section

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

=a!sectionLayout(
  label: "Customers for Review",
  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
            )
          }
        )
      }
    )
  }
)

Displays the following:

Open in Github

On This Page

FEEDBACK