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

Label

label

Text

Text to display as the section's title.

Contents

contents

Any Type

Components and layouts to display in the section body.

Validations

validations

List of Variant

Validation errors to display above the section.

Validation Group

validationGroup

Text

When present, this field is only validated when a button in the same validation group is pressed. See the documentation for more information about how to use validation groups.

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.

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.

Divider Line

divider

Text

Determines where a divider appears within the section. Valid values: "NONE" (default), "ABOVE", "BELOW".

Margin Below

marginBelow

Text

Determines how much space is added below the layout. Valid values: "NONE", "STANDARD" (default).

Accessibility Text

accessibilityText

Text

Additional text to be announced by screen readers. Used only for accessibility; produces no visible change.

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:

The following patterns include usage of the Section Layout.

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

On This Page

FEEDBACK