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.

  • Add and Populate Sections Dynamically (Looping): Add and populate a dynamic number of sections, one for each item in a CDT array.

  • Add, Remove, and Move Group Members Browser (Hierarchical Data, Group Management): Display the membership tree for a given group and provide users with the ability to add, remove, and move user members from a single interface.

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

  • Call to Action Pattern (Formatting): Use the call to action pattern as a landing page when your users have a single action to take.

  • Delete Rows in a Grid (Grids): Delete one or more rows of data in a read-only grid.

  • Form Steps Pattern (Stamps): Use the form steps patten to break down complicated forms into a series of quickly completed steps that are well organized and easy to navigate. This pattern uses a combination of cards and rich text to create steps that can represent fields from one or more interfaces.

  • Milestone Bar Pattern (Looping): Use the milestone bar pattern to guide users through sequential steps to complete a task and show the user their progress as they move through the steps. This pattern can be used to either break up longer forms into more manageable sections or combine smaller forms into a more streamlined process.

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

  • Refresh Data Using a Refresh Button (Auto-Refresh):

  • Tabs Patterns (Formatting, Choice Components): The tabs patterns provide an ideal style and design for creating tabbed interfaces.

  • Trend-Over-Time Report (Charts, Reports): This report provides an attractive, interactive design for exploring different series of data over time.

  • Use Selection For Bulk Actions in an Inline Editable Grid (Grids): Allow the user to edit data inline in a grid one field at a time, or in bulk using selection.

Open in Github

On This Page

FEEDBACK