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)

Minimal valid formConfig

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

Schema `$schema`

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

Schema definition

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

Meta data `metaData`

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

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 object

{

    "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.
dataUrl (string): Optional URL from which JSON data is loaded. These are provided to the form via Form data data.
validateOnChange (boolean): If true, then a change to the user’s data triggers Validation when the user switches focus between components. The triggered validation is limited to the component edited by the user. For example, if the user makes a text entry and then clicks on another field, only the field with the text entry is validated. Default: false
validateOnBlur (boolean): If true, then Validation 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 in order to trigger the validation. Default: false
onChangeBufferTime (number): A time buffer is defined in milliseconds. The handler of the onChange event is only called after this time buffer. If a change event is triggered again within this time, the last handler is discarded and a new handler is scheduled. Default: 1000

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.

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

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

The following components are currently supported:

State `state`

Each form has a state. This can contain various data that is related to various functions such as Multilingual content or Validation. The most common use is to bind values Binding of values of individual forms components. This makes it possible to create dependencies between data and to use a datum on different components. If the Binding a connection to state has been established, the state is also changed when components is changed.

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 the client-side Validation. The stored schema is applied to the Form data data.

Form configuration

Schema $schema

Meta data metaData

Configuration configuration

Configuration styles

Form components components

State state

Form data data

Data schema dataSchema