Form configuration

The configuration of the form (formConfig) is described here. The configuration is defined in JSON format and contains the following components.

Schema $schema (optional)
Meta data metaData
Configuration configuration
Form components components
State state (optional)
Data schema dataSchema (optional)

Minimal valid formConfig:

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

Schema `$schema`

The schema can optionally be defined via the $schema attribute. The renderer always uses a JSON schema JSON schema to validate the formConfig.

schema

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

Meta data `metaData`

The metaData attribute must be specified. The following values are mandatory:

id (string|number): Unique ID for this form. All forms with this ID and version should have an identical formConfig with the exception of the state attribute.
version (number): Version of the form. Can be used to indicate that this is a form in a specific version.

The following values are optional. However, it is recommended to provide as much metadata as possible.

name (string): Descriptive name of the form
creationDate (string - date in ISO 8601 format): Date the form was created
author (string): Author of the form

metaData

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

Configuration `configuration`

submitUrl (string): The URL is used for the Submit of the form.
validationUrl (string): The URL is used for server-side validation Validation used.
stateUrl (string): Optional URL from which JSON data is loaded. These are added to the form via the state
validateOnChange (boolean): If true, then a change to the user’s data triggers validate if the user switches the focus between Components and has made a change. Errors triggered by this are only displayed for the component edited by the user. For example, if the user makes a text entry and then clicks on another field, an error is only validated for the field with the text entry if the entry does not comply with the validation rules. Default: false
validateOnBlur (boolean): If true, then validate is triggered when the user switches the focus between Components. The difference to <INLINE_CODE_17/> is that the user does not need to have changed the data to trigger the validation. Default: false
defaultLanguage (string): Default language to be used, unless another setting has higher priority. The language that is set by the form itself in the state and the language set via url parameters

Configuration `styles`

The styles object is used for optional configuration of the visual appearance of the application. It supports CSS variables, additional CSS rules and external stylesheets and is referenced in the configuration object. All specifications apply globally for the UI. The following options are available:

variables (object): Contains CSS variables and their values. The following CSS variables are available:

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): Contains additional CSS rules. These rules are used in the browser.
cssURL (string/array): A URL to the external CSS resource. If several CSS files are to be loaded, the URLs should be specified in an array.

Example:

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

Form components `components`

A form consists of at least one Component and is usually a composition of a large number of components Components.

The components Container and Field container components can contain further components and can be nested as desired.

With the Button Component allows user interactions such as Validation, Submit and Reset can be triggered.

State `state`

Each form has a state. This can contain various data that can be used with various functions such as Multilingualism or Validation validation. The most common use is the binding of values Binding of values to Components. If by Binding a connection to state has been established, the state is updated when the Components

Form data `data`

The data area in state is intended for placing your own information, such as form data.

Data schema `dataSchema`

The dataSchema can contain a valid JSON schema and is used for client-side validation Validation validation. The stored schema is mapped to the state is applied.

Keywords:

Form configuration

Schema $schema

Meta data metaData

Configuration configuration

Configuration styles

Form components components

State state

Form data data

Data schema dataSchema