`button`

Ein Button kann mit verschiedenen Aktionen verknüpft werden.

Konfiguration

Für allgemeine Konfigurations-Optionen siehe Allgemeine Komponenten Konfiguration.

Spezifische Konfiguration

type ("button"): Typ der Komponente.
action (enum<"print" | "reset" | "setProperty" | "submit" | "validate">): Identifiziert die Aktion, die von diesem Button ausgelöst wird. Andere Aktionen können nicht direkt verwendet werden, sind aber beispielsweise über onClick verfügbar.
target (Binding): Erforderlich, wenn die Aktion setProperty verwendet wird.
value (any | Binding): Erforderlich, wenn die Aktion setProperty verwendet wird.

Allgemeine Konfiguration

Neben den für alle gültigen Konfigurationen, können optional folgende Konfigurationen gesetzt werden: disabled, icon, label.

Aktionen

print: Öffnet die Druckansicht. Siehe Print.

reset: Setzt die Seite zurück. Siehe Reset.

setProperty: Überschreibt einen Button einen bestimmten Wert abhängig von einem anderen Wert. Dafür muss zusätzlich target und value definiert sein. Mit target wird eine Variable im state gebunden, die entsprechend dem Wert in value geändert wird. Praktisch kann man diese Funktion unter anderem dazu zu verwenden zwischen verschiedenen Seiten eines Formulars zu springen, wie hier gezeigt.

submit: Löst die Submit Funktion aus, die das aktuelle Formular an das Backend-System überträgt.

validate: Löst die Validierung aus. Dabei werden in das Formular eingegebene Daten überprüft.

Beispiel

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": ""
    }
  }
}

Eingebettete Vorschau

Vorschau in separatem Fenster öffnen

Keywords: