Formularkonfiguration
Hier wird die Konfiguration des Formular (formConfig
) beschrieben. Die Konfiguration wird im JSON Format definiert und enthält folgende Bestandteile.
-
Schema
$schema
(optional) -
Zustand
state
(optional)
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": "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": {
"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 jede Änderung von Daten die Validierung aus. Default:false
- validateOnBlur (boolean)
-
Wenn
true
, dann wird die Validierung jedes Mal ausgelöst, wenn der Anwender den Fokus zwischen den Komponenten wechselt. Default:false
- onChangeBufferTime (number)
-
Ein Zeit-Buffer in Millisekunden wird definiert. Der Handler des
onChange
-Events wird erst nach diesem Zeit-Buffer aufgerufen. Wenn einchange
-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
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;
{
"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.