Free cookie consent management tool by TermsFeed Button Layout (a!buttonLayout)
Button Layout
SAIL Design System guidance available for Buttons

The wrong button in the wrong place at the wrong time can stop a user's workflow dead in its tracks. Learn how to configure and display buttons appropriately to create a beautiful, intuitive, and efficient workflow experience for your application.

Function

a!buttonLayout( primaryButtons, secondaryButtons, accessibilityText, showWhen )

Displays a list of buttons grouped by prominence. Use this layout in cases where prominence needs to be explicitly specified.

See also: Button design guidance

Parameters

Name Keyword Types Description

Primary Buttons

primaryButtons

List of ButtonWidget

Array of prominent buttons created with a!buttonWidget().

Secondary Buttons

secondaryButtons

List of ButtonWidget

Array of less prominent buttons created with a!buttonWidget().

Accessibility Text

accessibilityText

Text

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

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.

Usage considerations

Using buttons on different devices

  • For web and mobile tablets, buttons display in a horizontal list. The most prominent buttons appear at the far right and the least prominent buttons appear at the far left.
  • For mobile phones, buttons display in a vertical line. The most prominent buttons appear at the top and the least prominent buttons appear at the bottom.

Using the primaryButtons and secondaryButtons parameters

  • For the primaryButtons parameter, the first item in the array is the most prominent.
  • For the secondaryButtons parameter, the first item in the array is the least prominent.

Feature compatibility

The table below lists this SAIL component's compatibility with various features in Appian.
Feature Compatibility Note
Portals Compatible
Offline Mobile Compatible
Sync-Time Custom Record Fields Incompatible
Real-Time Custom Record Fields Incompatible

Custom record fields that evaluate in real time must be configured using one or more Custom Field functions.

Process Reports Incompatible

Cannot be used to configure a process report.

Process Events Incompatible

Cannot be used to configure a process event node, such as a start event or timer event.

The following patterns include usage of the Button Layout.

Open in Github Built: Fri, Apr 12, 2024 (09:33:19 PM)

Button Layout

FEEDBACK