Submit Button Component

You can now configure a Button Component as submittable by setting the submit parameter as true. Works the same way as a Submit Button Component!

Submit Button

Function: a!buttonWidgetSubmit()

Displays a button that submits a form. Buttons must be placed inside a button layout.

See also: 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.
Skip Validation skipValidation Boolean When true, submit without performing validation. Default is 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 component is displayed on the interface. When set to false, the component 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!buttonWidgetSubmit(
              size: local!size,
              style: fv!item,
              label: fv!item
            )
          )
        )
      )
    )
  }
)

Displays the following:

Confirmation Dialog

1
2
3
4
5
6
7
8
=a!buttonWidgetSubmit(
  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:

FEEDBACK