Free cookie consent management tool by TermsFeed

Box Layout

SAIL Design System guidance available for Box Layout

Box layouts help draw attention to groupings of related components such as important prompts or error messages. Learn how to use the boy layout to create strong visual groups for your interface.

Function

a!boxLayout( label, contents, style, showWhen, isCollapsible, isInitiallyCollapsed, marginBelow, accessibilityText, padding, shape, marginAbove, showBorder, showShadow, labelSize, labelHeadingTag )

Displays any arrangement of layouts and components within a box on an interface.

Parameters

Name Keyword Types Description

Label

label

Text

Text to display as the box's title.

Contents

contents

Any Type

Components and layouts to display within the box.

Style

style

Text

Determines the color of the label and box outline. Valid values: Any valid hex color or "STANDARD" (default), "ACCENT", "SUCCESS", "INFO", "WARN", "ERROR".

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.

Collapsible

isCollapsible

Boolean

Determines if an expand/collapse control appears in the box header. Default: false.

Initially Collapsed

isInitiallyCollapsed

Boolean

Determines if the box is collapsed when the interface first loads. Default: false.

Margin Below

marginBelow

Text

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

Accessibility Text

accessibilityText

Text

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

Padding

padding

Text

Determines the space between the box edges and its contents. Valid values: "NONE", "EVEN_LESS", "LESS" (default), "STANDARD", "MORE", "EVEN_MORE".

Shape

shape

Text

Determines the box shape. Valid values: "SQUARED" (default), "SEMI_ROUNDED", "ROUNDED".

Margin Above

marginAbove

Text

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

Show border

showBorder

Boolean

Determines whether the layout has an outer border. Default: true.

Show shadow

showShadow

Boolean

Determines whether the layout has an outer shadow. Default: false.

Label Size

labelSize

Text

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

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. See accessibility design guidance for more details to associate the proper heading tag with the box label to follow accessibility standards.

Examples

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

Box layout with success style

This example uses a box layout with the "SUCCESS" style. It displays the following interface.

screenshot of a box layout with green success styling and a confirmation message

1
2
3
4
5
6
7
8
9
10
11
12

a!boxLayout(
  label: "Success! Your order was successfully processed",
  style: "SUCCESS",
  marginBelow: "STANDARD",
  contents: {
    a!textField(
      labelPosition: "COLLAPSED",
      value: "Your credit card has been charged.",
      readOnly: true
    )
  }
)

Collapsible box layout with custom style

This example uses a collapsible box layout with a custom style for the header color. It displays the following interface.

screenshot of a box layout with burgundy styling and a list of students

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

a!boxLayout(
    label: "Enrolled Students",
    style: "#98002E",
    marginBelow: "STANDARD",
    isCollapsible: true,
    contents: {
      a!richTextDisplayField(
        labelPosition: "COLLAPSED",
        value: a!richTextBulletedList(
          items: {
            "Elizabeth Ward",
            "Fatima Cooper",
            "Jaylen Smith",
            "Michael Johnson",
            "Jade Rao",
          }
        )
      )
    }
  )

Box layout with label size and shadow

This example uses a box layout with a "MEDIUM" label size. It displays the following interface.

screenshot of a box layout with custom styling and medium label size

Because the header content layout uses a transparent background, we are using a shadow instead of a border. See the box layout design guidance for more information on using borders and shadows.

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

a!localVariables(
  local!currentClasses: {
    a!map(courseNum: "JPN 202", title: "Intermediate Japanese II", students: 14),
    a!map(courseNum: "JPN 270", title: "Intro to Japanese Culture", students: 8),
    a!map(courseNum: "JPN 360", title: "Japanese Modern Women Writers", students: 5)
  },
  a!headerContentLayout(
    contents: a!boxLayout(
      label: "Current Classes",
      labelSize: "MEDIUM",
      contents: {
        a!forEach(
          items: local!currentClasses,
          expression: a!sideBySideLayout(
            items: {
              a!sideBySideItem(
                item: a!richTextDisplayField(
                  labelPosition: "COLLAPSED",
                  value: {
                    fv!item.courseNum,
                    "   ",
                    a!richTextItem(
                      text: {fv!item.title},
                      link: a!dynamicLink(),
                      linkStyle: "STANDALONE",
                      color: "#1a73e7"
                    )
                  }
                ),
                width: "AUTO"
              ),
              a!sideBySideItem(
                item: a!richTextDisplayField(
                  labelPosition: "COLLAPSED",
                  value: {
                    fv!item.students,
                    " ",
                    a!richTextIcon(icon: "users")
                  }
                ),
                width: "MINIMIZE"
              )
            }
          )
        )
      },
      style: "#1a73e7",
      marginBelow: "STANDARD",
      showBorder: false,
      showShadow: true
    ),
    backgroundColor: "TRANSPARENT"
  )
)

Rounded box layouts

This example uses a box layout with a rounded shape. It displays the following interface.

screenshot of a student dashboard with multiple rounded box layouts

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
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184

a!columnsLayout(
  columns: {
    a!columnLayout(
      contents: {
        a!boxLayout(
          label: "Current Courses",
          contents: {
            a!sideBySideLayout(
              items: {
                a!sideBySideItem(
                  item: a!richTextDisplayField(
                    labelPosition: "COLLAPSED",
                    value: {
                      a!richTextItem(
                        text: {
                          "CRW470"
                        },
                        size: "STANDARD"
                      )
                    }
                  ),
                  width: "MINIMIZE"
                ),
                a!sideBySideItem(
                  item: a!richTextDisplayField(
                    labelPosition: "COLLAPSED",
                    value: {
                      "Advanced Fiction Workshop"
                    }
                  )
                )
              }
            ),
            a!sideBySideLayout(
              items: {
                a!sideBySideItem(
                  item: a!richTextDisplayField(
                    labelPosition: "COLLAPSED",
                    value: {
                      a!richTextItem(
                        text: {
                          "ENG463"
                        },
                        size: "STANDARD"
                      )
                    }
                  ),
                  width: "MINIMIZE"
                ),
                a!sideBySideItem(
                  item: a!richTextDisplayField(
                    labelPosition: "COLLAPSED",
                    value: {
                      "Literature on the Move: Stories of Migration"
                    }
                  )
                )
              }
            ),
            a!sideBySideLayout(
              items: {
                a!sideBySideItem(
                  item: a!richTextDisplayField(
                    labelPosition: "COLLAPSED",
                    value: {
                      a!richTextItem(
                        text: {
                          "ENG327"
                        },
                        size: "STANDARD"
                      )
                    }
                  ),
                  width: "MINIMIZE"
                ),
                a!sideBySideItem(
                  item: a!richTextDisplayField(
                    labelPosition: "COLLAPSED",
                    value: {
                      "The Next Great American Graphic Novel"
                    }
                  )
                )
              }
            ) 
          },
          style: "#363535",
          shape: "ROUNDED",
          marginBelow: "STANDARD"
        )
      }
    ), 
    a!columnLayout(
      contents: {
        a!boxLayout(
          label: "Past Courses",
          contents: {
            a!sideBySideLayout(
              items: {
                a!sideBySideItem(
                  item: a!richTextDisplayField(
                    labelPosition: "COLLAPSED",
                    value: {
                      a!richTextItem(
                        text: {
                          "CRW370"
                        },
                        size: "STANDARD"
                      )
                    }
                  ),
                  width: "MINIMIZE"
                ),
                a!sideBySideItem(
                  item: a!richTextDisplayField(
                    labelPosition: "COLLAPSED",
                    value: {
                      "Intermediate Fiction Workshop"
                    }
                  )
                )
              }
            ),
            a!sideBySideLayout(
              items: {
                a!sideBySideItem(
                  item: a!richTextDisplayField(
                    labelPosition: "COLLAPSED",
                    value: {
                      a!richTextItem(
                        text: {
                          "ENG222"
                        },
                        size: "STANDARD"
                      )
                    }
                  ),
                  width: "MINIMIZE"
                ),
                a!sideBySideItem(
                  item: a!richTextDisplayField(
                    labelPosition: "COLLAPSED",
                    value: {
                      "Literature of Regency England: Jane Austen "
                    }
                  )
                )
              }
            ),
            a!sideBySideLayout(
              items: {
                a!sideBySideItem(
                  item: a!richTextDisplayField(
                    labelPosition: "COLLAPSED",
                    value: {
                      a!richTextItem(
                        text: {
                          "ENG301"
                        },
                        size: "STANDARD"
                      )
                    }
                  ),
                  width: "MINIMIZE"
                ),
                a!sideBySideItem(
                  item: a!richTextDisplayField(
                    labelPosition: "COLLAPSED",
                    value: {
                      "How to Study Literature"
                    }
                  )
                )
              }
            )
          },
          style: "#363535",
          shape: "ROUNDED",
          marginBelow: "STANDARD"
        )
      }
    )
  }
)

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.

The following patterns include usage of the Box Layout.

  • Year-Over-Year Report (Charts, Reports, Formatting): This is a feature-rich, interactive report for sales and profits by products over select periods of time.

Feedback