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.

Related Patterns

The following patterns include usage of the Button Layout.

• Add Multiple Text Components Dynamically (Looping): Show a dynamic number of text components to simulate a multi-text input box. A new text box is shown as soon as the user starts typing into the last input box.

• Add Multiple Validation Rules to One Component (Validation): Enforce that the user enters at least a certain number of characters in their text field, and also enforce that it contains the "@" character.

• Add Validations to an Inline Editable Grid (Validation, Grids, Looping): Allows the user to change data directly in a grid, and validate a various entries.

• Add, Edit, and Remove Data in an Inline Editable Grid (Grids, Looping): Allow the user to change data directly in an inline editable grid.

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

• Build a Wizard with Milestone Navigation (Wizards): Use the milestone component to show steps in a wizard.

• Build an Interface Wizard (Wizards): Divide a big form into sections presented one step at a time with validation.

• Configure Buttons with Conditional Requiredness (Validation): Present two buttons to the end user and only make certain fields required if the user clicks a particular button

• Configure a Boolean Checkbox (Choice Components): Configure a checkbox that saves a boolean (true/false) value, and validate that the user selects the checkbox before submitting a form.

• Configure a Dropdown Field to Save a CDT (Choice Components): When using a dropdown to select values from the database, or generally from an array of CDT values, configure it to save the entire CDT value rather than just a single field.

• Configure a Dropdown with an Extra Option for Other (Choice Components): Show a dropdown that has an "Other" option at the end of the list of choices. If the user selects "Other", show a required text field.

• Inline Survey (Radio Buttons, Checkboxes, Buttons): Use this pattern to create a clean and easy to navigate survey.

• Make a Component Required Based on a User Selection (Validation): Make a paragraph component conditionally required based on the user selection.

• Refresh Until Asynchronous Action Completes (Auto-Refresh): Use a refresh interval to display the results of an asynchronous action automatically.

• Save a User's Report Filters to a Data Store Entity (Grids, Smart Services, Filtering, Reports): Allow a user to save their preferred filter on a report and automatically load it when they revisit the report later.

• Searching on Multiple Columns (Grids, Filtering, Reports): Display a grid populated based on search criteria specified by end users.

• Set the Default Value Based on a User Input (Default Value): Set the default value of a variable based on what the user enters in another component.

• Set the Default Value of CDT Fields Based on a User Input (Default Value): Set the value of a CDT field based on a user input.

• Set the Default Value of an Input on a Start Form (Default Value): Display a default value in some form inputs on a start form, and save the value into the process when submitting.

• Set the Default Value of an Input on a Task Form (Default Value): Display a default value in some form inputs on a task form, and save the value to process when submitting.

• Showing Validation Errors that Aren't Specific to One Component (Validation): Alert the user about form problems that aren't specific to one component, showing the message only when the user clicks "Submit".

• Track Adds and Deletes in Inline Editable Grid (Grids): In an inline editable grid, track the employees that are added for further processing in the next process steps.

• Update an Entity-Backed Record from its Summary View (Records, Smart Services): Enable users to make quick changes to a record by updating it right from a record view.

• Use Links in a Grid to Show More Details and Edit Data (Grids): Allow end users to click a link in a read-only grid to view the details for the row, and make changes to the data. The data available for editing may include more fields than are displayed in the grid.

• Use Links in a Grid to Show More Details and Edit Data in External System (Grids, Web Services): Allow end users to click a link in a read-only grid to view the details for the row, and make changes to the data.

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

• Use Validation Groups for Buttons with Multiple Validation Rules (Validation): Present two buttons to the end user that, based on the selection, will validate only after a particular button is clicked.

• Use the Write to Data Store Entity Smart Service Function on an Interface (Smart Services, Grids, Looping): Allow the user to publish several rows of data to a table through the a!writeToDataStoreEntity() smart service function.