Free cookie consent management tool by TermsFeed Section Layout Component (a!sectionLayout)
Section Layout Component
SAIL Design System guidance available for Section Layout

The arrangement of the information on your interface will be a determining factor in the usability and usefulness of your design. Learn how to use sections to visually group the related parts of your interface.

Function

a!sectionLayout( label, contents, validations, validationGroup, isCollapsible, isInitiallyCollapsed, showWhen, divider, marginBelow, accessibilityText, labelIcon, iconAltText, labelSize, labelHeadingTag, labelColor, dividerColor, dividerWeight, marginAbove )

This layout requires Appian for Mobile Devices version 17.2 or later. Displays any arrangement of layouts and components beneath a section title on an interface.

See also:

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, the requiredness of the field is only evaluated when a button in the same validation group is pressed. The value for this parameter cannot contain spaces. For example, “validation group” is not a valid value. You need to add an underscore between words: “validation_group”. See the following recipes for more information:

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", "EVEN_LESS", "LESS", "STANDARD" (default), "MORE", "EVEN_MORE".

Accessibility Text

accessibilityText

Text

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

Label Icon

labelIcon

Text

Icon to display next to the label. For a list of available icons, see the Styled Icon component.

Icon Alternative Text

iconAltText

Text

Equivalent alternate text for use by screen readers.

Label Size

labelSize

Text

Determines the label size. Valid values: "LARGE_PLUS", "LARGE", "MEDIUM_PLUS", "MEDIUM" (default), "SMALL", "EXTRA_SMALL".

Accessibility Heading Tag

labelHeadingTag

Text

Determines the heading tag associated with the label for use by screen readers; produces no visible change. Valid values: "H1", "H2", "H3", "H4", "H5", "H6". The default is dependent on the chosen label size. For more information on header tags, see our header accessibility guidance.

Label Color

labelColor

Text

Determines the label color. Valid values: Any valid hex color or "ACCENT" (default), "STANDARD", "POSITIVE", "NEGATIVE", "SECONDARY".

Divider Color

dividerColor

Text

Determines the divider line color. Valid values: Any valid hex color or "SECONDARY" (default), "STANDARD", "ACCENT".

Divider Weight

dividerWeight

Text

Determines the divider line thickness. Valid values: "THIN" (default), "MEDIUM", "THICK".

Margin Above

marginAbove

Text

Determines how much space is added above the layout. Valid values: "NONE" (default), "EVEN_LESS", "LESS", "STANDARD", "MORE", "EVEN_MORE".

Usage considerations

Validations

  • Sections that contain validation messages are not collapsible regardless of the collapsible parameter's value. For example, if a validation is triggered when the form loads, then that section is expanded even if you have specified true for the isInitiallyCollapsed parameter.
  • If you have nested section layouts, any validations on an inner section will also appear in the outer section.

Section headers

  • The labelHeadingTag parameter allows you to add a descriptive tag to a section heading so that screen readers can more easily convey page structure to the user. For more information and examples, see our design guidance on Accessible Headers.

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
48

a!sectionLayout(
  label: "Customers for Review",
  labelHeadingTag: "H1",
  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:

screenshot of two columns in a section layout

Nested sections

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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120

{
  a!sectionLayout(
    label: "Patient Profile",
    labelSize: "LARGE",
    labelHeadingTag: "H1",
    labelColor: "STANDARD",
    contents: {
      a!sectionLayout(
        label: "Personal Details",
        labelHeadingTag: "H2",
        contents: {
          a!columnsLayout(
            columns: {
              a!columnLayout(
                contents: {
                  a!sectionLayout(
                    label: "Contact Information",
                    labelSize: "SMALL",
                    labelHeadingTag: "H3",
                    labelColor: "SECONDARY",
                    contents: {
                      a!textField(
                        label: "Name",
                        labelPosition: "ADJACENT",
                        value: "Katherine Johnson",
                        readOnly: true
                      ),
                      a!textField(
                        label: "Phone",
                        labelPosition: "ADJACENT",
                        value: "(202) 555-7513",
                        readOnly: true
                      )
                    }
                  )
                }
              ),
              a!columnLayout(
                contents: {
                  a!sectionLayout(
                    label: "Work Information",
                    labelSize: "SMALL",
                    labelHeadingTag: "H3",
                    labelColor: "SECONDARY",
                    contents: {
                      a!textField(
                        label: "Position",
                        labelPosition: "ADJACENT",
                        value: "Full-time remote",
                        readOnly: true
                      ),
                      a!textField(
                        label: "Department",
                        labelPosition: "ADJACENT",
                        value: "Information Technology",
                        readOnly: true
                      )
                    }
                  )
                }
              )
            }
          ),
          a!sectionLayout(
            label: "COVID-19 Health Information",
            labelHeadingTag: "H2",
            contents: {
              a!columnsLayout(
                columns: {
                  a!columnLayout(
                    contents: {
                      a!sectionLayout(
                        label: "Vaccination Status",
                        labelSize: "SMALL",
                        labelHeadingTag: "H3",
                        labelColor: "SECONDARY",
                        contents: {
                          a!textField(
                            label: "Status",
                            labelPosition: "ADJACENT",
                            value: "Partially Validated",
                            readOnly: true
                          ),
                          a!textField(
                            label: "Vaccine",
                            labelPosition: "ADJACENT",
                            value: "Pfizer-BioNTech COVID-19 Vaccine",
                            readOnly: true
                          )
                        }
                      )
                    }
                  ),
                  a!columnLayout(
                    contents: {
                      a!sectionLayout(
                        label: "History",
                        labelSize: "SMALL",
                        labelHeadingTag: "H3",
                        labelColor: "SECONDARY",
                        contents: {
                          a!textField(
                            label: "Have you ever tested positive for COVID-19?",
                            labelPosition: "ADJACENT",
                            value: "No",
                            readOnly: true
                          )
                        }
                      )
                    }
                  )
                }
              )
            }
          )
        }
      )
    }
  )
}

Displays the following:

screenshot of nested section layouts with patient information

Feature compatibility

The table below lists this component's compatibility with various features in Appian.
Feature Compatibility Note
Portals Compatible
Offline Mobile Compatible
Sync-Time Custom Record Fields Incompatible
Real-Time Custom Record Fields Incompatible
Process Reports Incompatible

You cannot use this function to configure a process report.
Process Events Incompatible

You cannot use this function to configure a process event node, such as a start event or timer event.

Old versions

There are older versions of this interface component. You can identify older versions by looking at the name to see if there is a version suffix. If you are using an old version, be sure to refer to the corresponding documentation from the list below.

Old Versions Reason for Update
a!sectionLayout_17r1

Replaced firstColumnContents and secondColumnContents with contents. Now supports greater than two-column layout.

To learn more about how Appian handles this kind of versioning, see the Function and Component Versions page.

The following patterns include usage of the Section Layout Component.

Section Layout Component

FEEDBACK