Function: a!sideBySideItem()
Displays one item within a side by side layout.
See also: Side By Side Layout
Parameters
| Name | Keyword | Type | Description |
|---|---|---|---|
| Item | item | Any Type | The component to display inside the layout. |
| Width | width | Text | Determines the amount of space allocated to each of the items in the row. Valid values: "AUTO" (default), "MINIMIZE", "1X", "2X", "3X", "4X", "5X", "6X", "7X", "8X", "9X", and "10X". |
| 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. |
Notes
Examples
Copy and paste an example into the INTERFACE DEFINITION in EXPRESSION MODE to see it displayed.
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:
The following patterns include usage of the Side By Side Item.
Alert Banner Patterns (Choice Components): The alert banners pattern is good for creating a visual cue of different types of alerts about information on a page.
Cards as List Items Patterns (Choice Components, Images): The cards as list items pattern is good for creating visually rich interfaces using a combination of cards and billboards to show lists of like items.
Inline Tags for Side-by-Side Layout Pattern (Formatting): This pattern shows the best practice for combining tags with standard-sized rich text, or plain text, using a side by side layout.
Navigation Pattern (Looping): Use the navigation pattern as a way to structure a group of pages with icon and text based left navigation. When an icon and text are selected, the corresponding page is displayed.
Refresh Data After Executing a Smart Service (Auto-Refresh, Smart Services):
Timeline Patterns (Formatting): Use the timeline pattern to show progress through steps in a process or project. These patterns can be used to show progress in both completed and ongoing processes.
Trend-Over-Time Report (Charts, Reports): This report provides an attractive, interactive design for exploring different series of data over time.
User List Pattern (Looping): The user list pattern retrieves all the users in a specified group and displays them in a single column.
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.
