General component configuration

There are configurations that apply to all components.

ID `id`

(string) Identifies the component within the form and may only be used once.

Label `label`

Most components offer the option of a label. The specific display form depends on the component. A string can be specified directly. For the use of multilingualism, an object can be specified that contains strings for several languages.

Syntax

{
    "label": {
       "LANGUAGE-1": "String in language 1",
       "LANGUAGE-2": "String in language 2",
       "LANGUAGE-n": "String in language n"
    }
}

Specific example

{
    "label": {
       "de": "Hallo Welt",
       "en": "Hello world"
    }
}

Icon `icon`

Most components offer the option of displaying an icon. The specific display form depends on the component. The icons come from the library Font Awesome Pro. A Font-Awesome CSS class can be specified directly as a string.

The renderer supports all Font Awesome icons of version 5.15.4 (Pro version)

Syntax

{
    "icon": "font-awesome-css-class"
}

Specific example

{
    "icon": "fal fa-fire"
}

type `type`

Each component must correspond to a type. You can specify this on the respective component Component

Restriction of use

With readOnly, disabled, hidden and required the use of components can be changed for users. If a user should only have read-only access to a component without changing its content, then the attribute readOnly can be used. This attribute is to be used for fields with text and does not change the design and only has an influence on write permissions. The attribute disabled enables interaction with a component to be switched off completely. This attribute can be used for all components with interaction. If components are disabled, this is clearly recognizable. Components can be hidden with the attribute hidden. If a component is required, it is necessary for the user to enter data. These attributes can either be used via Data binding or directly to true.

Example readOnlyDisabledHiddenRequired.json

readOnlyDisabledHiddenRequired.json

{
  "$schema": "http://bpc.virtimo.net/forms/1/schema",
  "metaData": {
    "id": 0,
    "version": 0
  },
  "configuration": {
  },
  "components": [
    {
      "type": "container",
      "label": "readOnly disabled hidden required",
      "components": [
        {
          "type": "checkbox",
          "value": "/data/appearance/hidden",
          "label": "hide"
        },
        {
          "type": "checkbox",
          "value": "/data/appearance/disabled",
          "label": "disable"
        },
        {
          "type": "checkbox",
          "value": "/data/appearance/readOnly",
          "label": "make read only"
        },
        {
          "type": "checkbox",
          "value": "/data/appearance/required",
          "label": "make required"
        },
        {
          "type": "textfield",
          "hidden": "/data/appearance/hidden",
          "required": "/data/appearance/required",
          "disabled": "/data/appearance/disabled",
          "readOnly": "/data/appearance/readOnly"
        },
        {
          "type": "textfield",
          "value": "Durchgehend disabled",
          "disabled": true
        }
      ]
    }
  ],
  "state": {
    "data": {
      "appearance": {
        "hidden": false,
        "disabled": false,
        "readOnly": false,
        "required": false
      }
    }
  }
}

open preview in separate window

Action when changing the value of a field `onChange`

Configuration of the field

This configuration can only be applied to input fields, for example Text Field or Date Field.

Certain actions can be carried out when the value of a field is changed.

The following actions are supported:

getFormState: an stateUrl must be set for this, from which the new states are offered. The form responds to the URL when the value changes and inserts the returned states in the fields.

The stateUrl can be set directly under the component (see example 1) or in the form configuration (see example 2). Either id or name should be set on the component for possible action on the server.

validate: the validation of the form is triggered.

Example 1

  {
    "components": {
        {
          "type": "textfield",
          "label": "Text field",
          "onChange": {
            "action": "getFormState",
            "data": {
              "stateUrl": "http://localhost:3000/loadState/addressDirectory"
            }
          }
        }
    }
  }

Example 2

  {
    "components": {
      "type": "textfield",
      "label": "Text field",
      "onChange": {
        "action": "getFormState"
      }
    },
    "configuration": {
      "stateUrl": "http://localhost:3000/loadState/addressDirectory"
    }
  }

Example 3

        {
          "type": "checkbox",
          "label": "Check validation",
          "onChange": {
            "action": "validate"
          }
        }

Response format

The server must return the response in the correct format so that the form can be updated. The response should be in the form of a JSON object containing the following attributes:

result: success or failure

In the event of an error, further attributes should be defined to inform the user of the error.

action: it must contain the value setFormState for the form to be updated.
data.state: contains the new states.

Examples

      {
          "result": "success",
          "action": "setFormState",
          "data": {
              "state": {
                  "address": {
                    "street": "Behrenstraße",
                    "number": 18,
                    "city": "Berlin",
                    "country": "Deutschland"
                  }
              }
          }
      }

      {
          "result": "failure",
          "message": "Fehler im Server"
      }

Responsive configuration `responsiveConfiguration`

For configurations that dynamically adapt to the given size or devices used, see Responsive Forms.

Generic configuration `configuration`

The configuration attribute can be used to pass any parameters to the component. These are passed in the renderer when the components are created and interpreted accordingly. For example, functions that are not directly supported can be controlled on the components.

This option should be used with caution. An incorrect configuration can result in the form no longer working as expected.

Various Parameters for display

The following attributes can be used to influence the display of the component.

minWidth: Minimum width
minHeight: Minimum height
width: Width
height: Height
maxWidth: Maximum width
maxHeight: Maximum height
flex: Specifies how the component may spread out in its Container. The flex values of all components in Container are set in relation to each other for this purpose.

Keywords:

General component configuration

ID id

Label label

Icon icon

type type