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

{
  "$schema": "http://bpc.virtimo.net/forms/1/schema",
  "metaData": {
    "id": 0,
    "version": 0
  },
  "configuration": {
  },
  "components": [
    {
      "type": "button"
    }
  ]
}

Schema $schema

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

Schema Definition
{
  "$schema": "http://bpc.virtimo.net/forms/1/schema"
}

Meta Daten metaData

Das Attribut metaData muss angeben werden. Folgende Werte sind verpflichtent 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 Formularerstelung

author (string)

Author des Formulars

metaData Objekt
{

    "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.

dataUrl (string)

Optionale URL aus der JSON Daten geladen werden. Diese werden dem Formular über Formulardaten data bereitgestellt.

validateOnChange (boolean)

Wenn true, dann löst eine Änderung von Daten des Anwenders die Validierung aus, wenn der Anwender den Fokus zwischen den Komponenten wechselt. Die ausgelöste Validierung beschränkt sich auf die vom Anwender bearbeitete Komponente. Beispielsweise wenn der Anwender eine Texteingabe macht und dann ein anderes Feld anklickt, wird nur das Feld mit der Texteingabe validiert. Default: false

validateOnBlur (boolean)

Wenn true, dann wird die Validierung 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

onChangeBufferTime (number)

Ein Zeit-Buffer in Millisekunden wird definiert. Der Handler des onChange-Events wird erst nach diesem Zeit-Buffer aufgerufen. Wenn ein change-Event innerhalb dieser Zeit erneut ausgelöst wird, wird der letzte Handler verworfen und ein neuer Handler geplant. Default: 1000

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.

Folgende Komponenten werden aktuell unterstützt.

Zustand state

Jedes Forms hat einen state. Dieser kann verschiedene Daten enthalten, die mit diversen Funktionen wie Mehrsprachige Inhalte oder Validierung zusammen hängen. Die häufigste Verwendung ist das Binden von Werten einzelner Formular Komponenten. Damit ist es möglich Abhängigkeiten zwischen Daten herzustellen und ein Datum an verschiedenen Komponenten zu verwenden. Wenn durch Binding eine Verbindung zum state hergestellt wurde, dann wird der state bei Änderungen der Komponenten ebenfalls verändert.

Siehe auch Validierungsergebnisse im state

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 die Formulardaten data angewendet.

Siehe auch Validierung

Diese Feld ist optional.

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