Button Array Layout

Button Array Layout

Function: a!buttonArrayLayout()

Displays a list of buttons in the order they are specified. Use this layout for buttons within interfaces rather than for submission buttons at the bottom of forms. This layout cannot be selected from the interface component picker in the design view.

Parameters

Name Keyword Types Description

Buttons

buttons

List of ButtonWidget

Array of buttons created with a!buttonWidget().

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.

Alignment

align

Text

Determines alignment of the button(s). Valid values: "START", "CENTER", "END".

Margin Below

marginBelow

Text

Determines how much space is added below the buttons. Valid values: "NONE", "STANDARD" (default).

Accessibility Text

accessibilityText

Text

Additional text to be announced by screen readers. Used only for accessibility; produces no visible change.

Notes

  • If you pass one button to Buttons, it renders right-justified. If you pass more than one button, they render left-justified.

Examples

Copy and paste an example into the INTERFACE DEFINITION in EXPRESSION MODE to see it displayed.

Buttons in a toolbar

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
a!buttonArrayLayout(
  align: "START",
  buttons: {
    a!buttonWidget(
      label: "Refresh",
      size: "SMALL",
      style: "SECONDARY"
    ),
    a!buttonWidget(
      label: "Edit",
      size: "SMALL",
      style: "SECONDARY"
    ),
    a!buttonWidget(
      label: "Add Item",
      size: "SMALL",
      style: "SECONDARY"
    )
  }
)

Displays the following:

Button with no margin below

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
{
  a!sideBySideLayout(
    items: {
      a!sideBySideItem(
        item: a!textField(
          labelPosition: "COLLAPSED"
        )
      ),
      a!sideBySideItem(
        width: "MINIMIZE",
        item: a!buttonArrayLayout(
          marginBelow: "NONE",
          buttons: {
            a!buttonWidget(
              label: "Test",
              size: "SMALL",
              style: "SECONDARY"
            )
          }
        )
      )
    }
  )
}

Displays the following:

The following patterns include usage of the Button Array Layout.

Open in Github Built: Fri, Mar 11, 2022 (04:59:07 PM)

On This Page

FEEDBACK