Function: a!sideBySideLayout()
Displays components alongside each other.
See also: Side By Side Item
Parameters
| Name | Keyword | Type | Description |
|---|---|---|---|
| Items | items | Any Type | List of items that are displayed in the layout. Accepts a!sideBySideItem. |
| Vertical Alignment | alignVertical | Text | Determines vertical alignment of all content within the layout. Valid values are "TOP" (default), "MIDDLE", and "BOTTOM". |
| 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. |
| Spacing | spacing | Text | Determines the space between items in the layout. Valid values: "STANDARD" (default), "DENSE", "SPARSE".
|
Input fields with relative widths
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
=a!sideBySideLayout(
items: {
a!sideBySideItem(
width: "4X",
item: a!textField(
label: "First Name"
)
),
a!sideBySideItem(
item: a!textField(
label: "M.I."
)
),
a!sideBySideItem(
width: "4X",
item: a!textField(
label: "Last Name"
)
)
}
)
Displays the following:
Minimized width for icon and button
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
=a!sideBySideLayout(
alignVertical: "MIDDLE",
spacing: "DENSE",
items: {
a!sideBySideItem(
width: "MINIMIZE",
item: a!richTextDisplayField(
labelPosition: "COLLAPSED",
value: a!richTextIcon(
icon: "user",
size: "LARGE"
)
)
),
a!sideBySideItem(
item: a!textField(
labelPosition: "COLLAPSED"
)
),
a!sideBySideItem(
width: "MINIMIZE",
item: a!buttonArrayLayout(
marginBelow: "NONE",
buttons: {
a!buttonWidget(
label: "Check Availability",
size: "SMALL",
style: "SECONDARY"
)
}
)
)
}
)
Displays the following:
