Formularkonfiguration

Hier wird die Konfiguration des Formular (formConfig) beschrieben. Die Konfiguration wird im JSON Format definiert und enthält folgende Bestandteile.

Minimal gültige formConfig:

{
  "metaData": {
    "id": 0,
    "version": 0
  },
  "configuration": {
  },
  "components": [
    {
      "type": "button"
    }
  ]
}

Schema $schema

Das Schema kann optional über das Attribut $schema definiert werden. Der Renderer verwendet in jedem Fall ein JSON Schema zum Validieren der formConfig.

schema
{
  "$schema": "https://forms.virtimo.net/5.1.0/schema.json"
}

Meta Daten metaData

Das Attribut metaData muss angeben werden. Folgende Werte sind verpflichtend anzugeben:

id (string|number)

Eindeutige ID für dieses Formular. Alle Formulare mit dieser ID und Version sollten mit Ausnahme des state Attributes eine identische formConfig aufweisen.

version (number)

Version des Formulars. Kann genutzt werden, um anzuzeigen, dass es sich um ein Formular in einer bestimmten Version handelt.

Folgende Werte sind optional. Es wird aber empfohlen möglichst viele Metadaten bereitzustellen.

name (string)

Beschreibender Name des Formulars

creationDate (string - Datum im Format ISO 8601)

Datum der Formularerstellung

author (string)

Author des Formulars

metaData
{
  "metaData": {
    "id": "abcdf",
    "name": "The best form ever",
    "version": 4711,
    "author": "Virtimo AG",
    "creationDate": "2021-03-05T12:00:00+0200"
  },
}

Konfiguration configuration

submitUrl (string)

Die URL wird für den Submit des Formulars verwendet.

validationUrl (string)

Die URL wird für die serverseitige Validierung genutzt.

stateUrl (string)

Optionale URL aus der JSON Daten geladen werden. Diese werden dem Formular über den state bereitgestellt.

validateOnChange (boolean)

Wenn true, dann löst eine Änderung von Daten des Anwenders die validate aus, wenn der Anwender den Fokus zwischen den Komponenten wechselt und eine Änderung gemacht hat. Dadurch ausgelöste Fehler werden nur für die vom Anwender bearbeitete Komponente angezeigt. Beispielsweise wenn der Anwender eine Texteingabe macht und dann ein anderes Feld anklickt, wird nur ein Fehler für Feld mit der Texteingabe validiert, sofern die Eingabe nicht den Validierungsregeln entspricht. Default: false

validateOnBlur (boolean)

Wenn true, dann wird die validate ausgelöst, wenn der Anwender den Fokus zwischen den Komponenten wechselt. Der Unterschied zu validateOnChange ist, dass der Anwender die Daten nicht geändert haben muss, um die Validierung auszulösen. Default: false

defaultLanguage (string)

Zu verwendende standard Sprache, sofern keine andere Einstellung höhere Priorität hat. Höhere Priorität hat die Sprache, die vom Formular selbst im state gesetzt wird und die Sprache, die über Url-Parameter gesetzt wird

styles (object)

Optionale Styling-Regeln. Folgende Optionen sind verfügbar:

Konfiguration styles

variables (object)

Enthält CSS-Variablen und deren Werte. Folgende CSS-Variablen sind verfügbar:

baseColor: red;
dark-mode: false;
base-color: red;
base-highlight-color: red;
base-light-color: red;
base-dark-color: red;
base-pressed-color: red;
base-focused-color: red;
base-invisible-color: rgba(255, 0, 0, 0);
base-foreground-color: #fff;
accent-color: #2196f3;
accent-light-color: #bbdefb;
accent-dark-color: #1976d2;
accent-pressed-color: #6ab8f7;
accent-invisible-color: rgba(33, 150, 243, 0);
accent-foreground-color: #fff;
confirm-color: #7cb342;
confirm-pressed-color: #a2cc75;
alert-color: #c62828;
alert-pressed-color: #de5c5c;
color: #0020ff;
reverse-color: #fff;
highlight-color: rgba(0, 32, 255, 0.54);
disabled-color: rgba(0, 32, 255, 0.38);
reverse-disabled-color: rgba(255, 255, 255, 0.38);
divider-color: #e0e4ff;
selected-background-color: #e0e0e0;
hovered-background-color: #eee;
header-background-color: #f5f5f5;
faded-color: #e1e1e1;
background-color: #fafafa;
alt-background-color: #f5f5f5;
reverse-background-color: #303030;
reverse-alt-background-color: #3a3a3a;
overlay-color: rgba(0, 0, 0, 0.03);
content-padding: 16px;
listitem-selected-background-color: #e0e0e0;
reverse-border-color: #e0e0e0;
reverse-alt-border-color: #e0e0e0;
base_color_name: "virtimo-orange";
accent_color_name: "blue";
dataview_item_selected_background_color: #e0e0e0;
dataitem_selected_background_color: #e0e0e0;
css (string)

Enthält zusätzliche CSS-Regeln. Diese Regeln werden im Browser eingesetzt.

cssURL (string/array)

Eine URL zur externen CSS-Ressource. Falls mehrere CSS-Dateien geladen werden sollen, sollen die URLs in einem Array angegeben werden.

Beispiel:
{
  "styles": {
    "variables": {
      "color" : "#ff0000",
      "background-color": "#fafafa"
    },
    "css": ".foo-class {font-size: 20px}",
    "cssURL": "https://foo.bar/css"
  }
}

Formular Komponenten components

Ein Formular besteht aus mindestens einer Komponente und ist in der Regel eine Komposition von einer vielzahl von Komponenten.

Die Komponenten Container und Feld Container können weitere Komponenten enthalten und beliebig geschachtelt werden.

Mit der Button Komponente können Benutzerinteraktionen wie Validierung, Submit und Reset ausgelöst werden.

Zustand state

Jedes Forms hat einen state. Dieser kann verschiedene Daten enthalten, die mit diversen Funktionen wie Mehrsprachigkeit oder Validierung zusammen hängen. Die häufigste Verwendung ist das Binden von Werten an Komponenten. Wenn durch Binding eine Verbindung zum state hergestellt wurde, dann wird der state bei Änderungen der Komponenten ebenfalls verändert.

Formulardaten data

Der data Bereich im state ist für das Platzieren eigener Informationen, wie z.B. Formulardaten, gedacht.

Daten Schema dataSchema

Das dataSchema kann ein gültiges JSON Schema enthalten und wird für die clientseitige Validierung genutzt. Das hinterlegte Schema wird auf den state angewendet.

Keywords:
Press Esc to exit full screen
Modal image placeholder
Press Esc to exit full screen