Function: a!boxLayout()
Displays any arrangement of layouts and components within a box on an interface.
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: |
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:
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:
The following patterns include usage of the Box Layout.