a!boxLayout( label, contents, style, showWhen, isCollapsible, isInitiallyCollapsed, marginBelow, accessibilityText, padding, shape, marginAbove )
Displays any arrangement of layouts and components within a box on an interface.
See also: Box layout design guidance
| Name | Keyword | Types | Description |
|---|---|---|---|
|
Label |
|
Text |
Text to display as the box's title. |
|
Contents |
|
Any Type |
Components and layouts to display within the box. |
|
Style |
|
Text |
Determines the color of the label and box outline. Valid values: Any valid hex color or |
|
Visibility |
|
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 |
|
Boolean |
Determines if an expand/collapse control appears in the box header. Default: false. |
|
Initially Collapsed |
|
Boolean |
Determines if the box is collapsed when the interface first loads. Default: false. |
|
Margin Below |
|
Text |
Determines how much space is added below the layout. Valid values: |
|
Accessibility Text |
|
Text |
Additional text to be announced by screen readers. Used only for accessibility; produces no visible change. |
|
Padding |
|
Text |
Determines the space between the box edges and its contents. Valid values: |
|
Shape |
|
Text |
Determines the box shape. Valid values: |
|
Margin Above |
|
Text |
Determines how much space is added above the layout. Valid values: |
Copy and paste an example into the INTERFACE DEFINITION in EXPRESSION MODE to see it displayed.
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:
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:
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:
| Feature | Compatibility | Note |
|---|---|---|
| Portals | Compatible | |
| Offline Mobile | Compatible | |
| Custom Record Field Expressions | 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.
