Form Configuration

This section describes the configuration of the form (formConfig). The configuration is defined in JSON format and contains the following components.

Schema $schema (optional)
Metadata metaData
Configuration configuration
Form Components components
State state (optional)

Minimum valid formConfig

{
  "$schema": "https://forms.virtimo.net/4.1.x/schema.json",
  "metaData": {
    "id": 0,
    "version": 0
  },
  "configuration": {
  },
  "components": [
    {
      "type": "button"
    }
  ]
}

Schema `$schema`

The schema can optionally be defined using the $schema attribute. In any case, the renderer uses a JSON schema to validate the formConfig.

Schema Definition

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

Metadata `metaData`

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

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 of 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 to submit the form.
validationUrl (string): This URL is used for server-side validation.
dataUrl (string): Optional URL from which JSON data is loaded. This data is provided to the form via Form Data data.
validateOnChange (boolean): If true, then a change to the user’s data triggers admin/validation.adoc when the user switches focus between the Components. The triggered validation is limited to the component being edited by the user. For example, if the user enters text and then clicks another field, only the field containing the text entry is validated. Default: false
validateOnBlur (boolean): If true, then admin/validation.adoc is triggered when the user switches focus between the Components. The difference from validateOnChange is that the user does not have to have changed the data to trigger the validation. Default: false
onChangeBufferTime (number): A time buffer in milliseconds is defined. The handler for the onChange event is not called until after this time buffer has elapsed. If a change event is triggered again within this time frame, the last handler is discarded and a new handler is scheduled. Default: 1000

Configuration `styles`

The styles object is used for the optional configuration of the application’s visual appearance. It supports CSS variables, additional CSS rules, and external stylesheets, and is referenced in the configuration object. All settings apply globally to 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 applied in the browser.
cssURL (string/array): A URL to an external CSS resource. If multiple 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 multiple components.

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

The Button component can trigger user interactions such as validation, submission, and reset .

The following components are currently supported:

State `state`

Every form has a state. This can contain various data related to functions such as Multilingual Content or admin/validation.adoc. The most common use is binding the values of individual form Components. This makes it possible to establish dependencies between data and use a single value across different components. If a connection to the state has been established via binding, then the state is also updated when changes are made to the Components.

Form Data `data`

The data section at 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 admin/validation.adoc. The stored schema is applied to the Form Data data.

Form Configuration

Schema $schema

Metadata metaData

Configuration configuration

Configuration styles

Form Components components

State state

Form Data data

Data Schema dataSchema