Box Layout

Function

a!boxLayout( label, contents, style, showWhen, isCollapsible, isInitiallyCollapsed, marginBelow, accessibilityText, padding, shape )

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

See also: Box layout design guidance

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

Examples

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

Box layout with success style

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
    )
  }
)

Displays the following:

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

Collapsible box layout with custom style

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",
          }
        )
      )
    }
  )

Displays the following:

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

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"
        )
      }
    )
  }
)

Displays the following:

screenshot of a student dashboard with multiple rounded box layouts

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.
Open in Github Built: Fri, Oct 22, 2021 (11:11:24 AM)

On This Page

FEEDBACK