Section Layout Component

Function

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

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, 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.

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".

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

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.

Open in Github Built: Fri, Sep 17, 2021 (04:05:09 PM)

On This Page

FEEDBACK