Side By Side Layout

Side By Side Layout

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.
Item Spacing spacing Text Determines the space between items in the layout. Valid values: "STANDARD" (default), "DENSE", "SPARSE".
Margin Below marginBelow Text Determines how much space is added below the layout. Valid values: "NONE", "STANDARD" (default).

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

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

  • Refresh Data After Executing a Smart Service (Auto-Refresh, Smart Services):

  • 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 specific group and displays them in a single column. Each user's name and title appears next to their profile picture which is styled as an avatar.

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

FEEDBACK