`button`

A button can be linked to various actions Actions

Configuration

For general configuration options, see General component configuration.

Specific configuration

type ("button"): Type of component.
action (enum<"print" |"reset" |"setProperty" |"submit" |"validate">): Identifies the Actionthat is triggered by this button. Other Actions cannot be used directly, but are possible via onClick for example.
target (Binding): Required if the action <INLINE_CODE_5/> is used.
value (any | Binding): Required if the action <INLINE_CODE_7/> is used.

General configuration

In addition to the configurations valid for all Configurationsthe following configurations can optionally be set: disabled, icon, labels.

Actions

print: Opens the print view. See Print.

reset: Resets the page. See Reset.

setProperty: Overwrites a button Button a certain value depending on another value. For this, target and value must also be defined. With target, a variable in the state boundwhich is changed according to the value in value. Practically, this function can be used, among other things, to jump between different pages of a form, such as shown here shown here.

submit: Triggers the Submit Function, which transmits the current form to the backend system.

validate: Triggers the Validation function. This checks the data entered in the form.

Example

button.json

{
  "$schema": "https://forms.virtimo.net/5.1.0/schema.json",
  "metaData": {
    "id": 0,
    "version": 0
  },
  "configuration": {
  },
  "components": [
    {
      "type": "container",
      "label": "Button Component Example",
      "components": [
        {
          "type": "button",
          "label": "My Button"
        },
        {
          "type": "button",
          "action": "submit",
          "label": "Submit Button"
        },
        {
          "type": "button",
          "action": "reset",
          "label": "Reset Button"
        },
        {
          "type": "button",
          "action": "validate",
          "label": "Validate Button"
        },
        {
          "type": "button",
          "action": "print",
          "label": "Print Button"
        },
        {
          "type": "button",
          "label": "Add ' a'",
          "action": "setProperty",
          "target": "${/data/text}",
          "value": "${/data/text} a"
        },
        {
          "type": "textfield",
          "value": "${/data/text}",
          "required": true
        }
      ]
    }
  ],
  "state": {
    "data": {
      "text": ""
    }
  }
}

Embedded preview

open preview in separate window

Keywords: