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 allow for a label. The specific display format depends on the component. A string can be specified directly. For multilingual support, an object containing strings for multiple languages can be specified.

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 to display an icon. The specific display format 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 from 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 view this for the respective component.

Usage Restrictions

Using readOnly, disabled, hidden, and required, you can modify how components are used by users. If a user is to have read-only access to a component without being able to modify its content, the attribute readOnly can be used. This attribute is intended for text fields; it does not alter the design and affects only write permissions. The ` disabled ` attribute allows you to completely disable interaction with a component. This attribute can be used for all components that support interaction. When components are ` disabled , this is clearly indicated. The ` `hidden ` attribute can be used to hide components. If a component is ` required , the user is required to enter data. These attributes can be set either via data binding or directly at `true.

Example readOnlyDisabledHiddenRequired.json

readOnlyDisabledHiddenRequired.json

{
  "$schema": "https://forms.virtimo.net/4.1.x/schema.json",
  "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 a separate window

Action when a field’s value changes `onChange`

Field configuration

This configuration can only be applied to input fields, such as Text Field or Date Field.

When a field’s value changes, a specific action can be executed.

The following actions are supported:

getFormState: For this, a stateUrl must also be set, from which the new states are provided. When the value changes, the form requests the URL and inserts the returned states into the fields.

The stateUrl can be set directly within the component (see Example 1) or in the form configuration (see Example 2). For possible server-side actions, either id or name should be set on the component.

validate: Triggers form validation.

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, additional attributes should be defined to notify the user of the error.

action: It must contain the value setFormState so that the form is 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 to the renderer when the components are created and interpreted accordingly. This allows, for example, functions not directly supported by the components to be controlled.

This option should be used with caution. An incorrect configuration can cause the form to no longer function as expected.

Various display parameters

The following attributes can be used to influence the component’s appearance.

minWidth: Minimum width
minHeight: Minimum height
width: Width
height: Height
maxWidth: Maximum width
maxHeight: Maximum height
flex: Specifies how the component may expand within its Container. To do this, the flex values of all Components in the Container are compared relative to one another.

Keywords:

General Component Configuration

ID id

Label label

Icon icon

Type type