`button`

A button can be linked to various actions.

Configuration

For general configuration options, see General Component Configuration.

Specific Configuration

type ("button"): Component type.
action (enum<"print" | "reset" | "setProperty" | "submit" | "validate">): Identifies the action triggered by this button. Other actions cannot be used directly but are available, for example, via onClick.
target (Binding): Required when the action setProperty is used.
value (any | Binding): Required when the action setProperty is used.

General Configuration

In addition to the configurations that apply to all, the following configurations can optionally be set: //boxLabel settings, disabled, //errorTarget, icon, label. //label settings, //onChange, //readOnly, //required.

Custom Styling

The visual design of the buttons is primarily controlled via global variables. CSS can be used specifically for certain deviations.

Using the cls , you can apply your own CSS rules. The component provides the following standard hook points for this purpose:

.button: Styles for buttons.

Actions

print: Opens the print preview. See Print.

reset: Resets the page. See Reset.

setProperty: Sets a button to a specific value depending on another value. For this to work, target and value must also be defined. target binds a variable to statewhich is then updated according to the value in value. In practice, this function can be used, among other things, to navigate between different pages of a form, as shown here.

submit: Triggers the submit function, which sends the current form to the backend system.

validate: Triggers the validation process, which checks the data entered into the form.

Example

button.json

{
  "$schema": "https://forms.virtimo.net/5.0.x/schema.json",
  "metaData": {
    "id": 0,
    "version": 0
  },
  "configuration": {
    "styles": {
      "css": ".forms .button.isActive { background-color: #e18a50; color: rgb(255, 255, 255);}"
    }
  },
  "components": [
    {
      "type": "container",
      "label": "Button Component Example",
      "components": [
        {
          "type": "button",
          "label": "My Button"
        },
        {
          "type": "button",
          "action": "submit",
          "label": "Submit"
        },
        {
          "type": "button",
          "action": "reset",
          "label": "Reset"
        },
        {
          "type": "button",
          "action": "validate",
          "label": "Validate"
        },
        {
          "type": "button",
          "action": "print",
          "label": "Print"
        },
        {
          "type": "button",
          "label": "Toggle",
          "action": "setProperty",
          "target": "${/data/checkbox}",
          "value": "${!/data/checkbox}",
          "cls": "${/data/checkbox ? 'isActive' : 'isInActive'}"
        },
        {
          "type": "checkbox",
          "value": "${/data/checkbox}",
          "label": "Checkbox bound to toggle"
        },
        {
          "type": "textfield",
          "label": "Required textfield, click validate",
          "value": "${/data/text}",
          "required": true
        }
      ]
    }
  ],
  "state": {
    "data": {
      "checkbox": true,
      "text": ""
    }
  }
}

Embedded preview

Open preview in a separate window

Keywords: