Button Component

Button

Function: a!buttonWidget()

Displays a button that can conditionally be used to submit a form. Buttons must be placed inside a button layout.

Parameters

Name Keyword Types Description

Label

label

Text

Optional text to display on the button.

Style

style

Text

Determines the color of the button, where

  • "NORMAL" default) Displays it with accent color label and border.
  • "PRIMARY" Displays it in the accent color.
  • "SECONDARY" Displays it in gray.
  • "LINK" Displays it with an accent color label and no border until focused.
  • "DESTRUCTIVE" Displays it in red.

Confirmation Message

confirmMessage

Text

Text to display in an optional confirmation dialog box where a null argument disables the confirmation dialog box and a text argument enables it with the text entered as the confirmation message.

Value

value

Any Type

The value associated with this button.

Save Value To

saveInto

Save Array

One or more variables that are updated with the button value when the user presses it. Use a!save() to save a modified or alternative value to a variable.

Disabled

disabled

Boolean

Determines if the user is prevented from clicking the button and triggering the state change. Default is false.

Submit

submit

Boolean

Determines whether this button submits a form after saving its value.

Validate

validate

Boolean

Determines whether this button performs validation before saving its value. When submit is true, this defaults to true, otherwise it defaults to false.

Validation Group

validationGroup

Text

When present, components in the same validation group are validated when this button is clicked.

Size

size

Text

Determines the size of the button. Valid values: "SMALL", "STANDARD" (default), and "LARGE".

Width

width

Text

Determines button width. Valid values are "MINIMIZE" and "FILL". Default behavior displays "FILL" width buttons on phone size screens and "MINIMIZE" buttons on wider screens.

  • "MINIMIZE" width is determined by button label.
  • "FILL" width fills the button container.

Confirmation Header

confirmHeader

Text

Text to display at the top of the confirmation dialog.

Confirmation Button Label

confirmButtonLabel

Text

Text to display on the confirmation button. Default: "Yes".

Cancel Button Label

cancelButtonLabel

Text

Text to display on the cancel button. Default: "No".

Visibility

showWhen

Boolean

Determines whether the button is displayed on the interface. When set to false the button is hidden and is not evaluated. Default: true.

Icon

icon

Text

Icon to display before any text inside the button. See the list of available icons.

Accessibility Text

accessibilityText

Text

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

Tooltip

tooltip

Text

Text to display on mouseover (web) or long press (mobile)

Usage considerations

Using the confirmation parameters

  • In the confirmation dialog there are two buttons. The confirm button is in the primary position and the cancel button is in the secondary position.
  • If confirmHeader and confirmMessage are both null, the interface refreshes and the saveInto state change occurs once the user clicks the button. If either is not null, the confirmation dialog box displays. The interface only refreshes and the Save Value To state change only occurs if the user clicks the confirm button.

Styling buttons

  • When style is "DESTRUCTIVE" and a confirmation dialog box is enabled, the confirm button displays in "DESTRUCTIVE" and the cancel button displays in grey. All other style options result in a "PRIMARY" confirm button and a "SECONDARY" cancel button.
  • You can only configure button shapes on sites and not at the component level. The same shape will be applied to all buttons sitewide.

Examples

Copy and paste an example into an Appian Expression Editor to experiment with it.

Button styles and sizes

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
a!localVariables(
  local!styles: {"NORMAL","PRIMARY","SECONDARY","LINK","DESTRUCTIVE"},
  local!sizes: {"SMALL","STANDARD","LARGE"},
  {
    a!forEach(
      items: local!sizes,
      expression: a!localVariables(
        local!size: fv!item,
        a!buttonLayout(
          secondaryButtons: a!forEach(
            items: local!styles,
            expression: a!buttonWidget(
              size: local!size,
              style: fv!item,
              label: fv!item
            )
          )
        )
      )
    )
  }
)

Displays the following:

Icon-Only Button with Tooltip

1
2
3
4
5
6
7
8
a!buttonArrayLayout(
  buttons: {
    a!buttonWidget(
      icon: "download",
      tooltip: "Download File"
    )
  }
)

Displays the following:

Confirmation Dialog

1
2
3
4
5
6
7
8
a!buttonWidget(
  label: "Delete Request",
  style: "DESTRUCTIVE",
  confirmHeader: "Warning!",
  confirmMessage: "This request will be permanently deleted. Do you want to continue?",
  confirmButtonLabel: "Delete Request",
  cancelButtonLabel: "Cancel"
)

Displays the following when clicked:

The following patterns include usage of the Button Component.

Open in Github Built: Thu, Feb 23, 2023 (02:59:22 PM)

On This Page

FEEDBACK