Side By Side Item

Side By Side Item

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

  • Most fields are allowed for Item. At this time, grids, hierarchy browsers, the org chart, and layouts are not allowed.
  • The MINIMIZE option for width is appropriate for items with a fixed width, such as images or buttons. Items that whose width is determined by the containing layout, such as text inputs, are best configured with relative widths.

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:

FEEDBACK