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.

See also: Submit Button

Parameters

Name Keyword Type 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), "LARGE".
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.

Notes

  • 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 Confirmation Header and Confirmation Message are both null, the interface refreshes and the Save Value To 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.
  • 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.

Examples

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

All the 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

=load(
  local!styles: {"NORMAL","PRIMARY","SECONDARY","LINK","DESTRUCTIVE"},
  local!sizes: {"SMALL","STANDARD","LARGE"},
  {
    a!forEach(
      items: local!sizes,
      expression: with(
        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:

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:

Open in Github

On This Page

FEEDBACK