General component configuration

The configurations of the components contain various elements. Some of these apply to all components. However, most are limited to one part of the components.

Necessary

Only the type must be specified for each component configuration.

Type

type (enum): Each component must correspond to a type. You can view this at the respective component.

{ "type": "textfield" },
{ "type": "button" }

Optional - For all

The configurations that can be optionally applied to all components are described below.

Generic configuration

configuration (object): Any parameters can be transferred to the component via the configuration attribute. These are transferred 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. Further information on possible functionality can be found here. In this example, the style is adjusted directly on the component.

{
  "type": "textfield",
  "configuration": {
    "style": {
      "box-shadow": "10px 10px 5px lightblue"
    }
  }
}

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

Hidden

hidden (Binding | boolean): The hidden attribute can be used to hide components.

{
  "type": "textfield",
  "hidden": true
},
{
  "type": "textfield",
  "hidden": "${/data/page !== 0}"
}

ID

id (number | string): Identifies the component within the form and may only be used once.

{
  "type": "textfield",
  "id"  : "123"
}

Action on click

onClick (ActionDefinition): When clicking on a component, all actions defined here can be executed.

{
  "type": "textfield",
  "onClick": {
    "action": "print"
  }
}

Action on initialization

onPainted (ActionDefinition): After initializing and displaying a component, all actions defined here can be executed. This is executed once when the component becomes visible for the first time.

{
  "type": "textfield",
  "onPainted": {
    "action": "getFormState",
    "payload": {
      "url": "http://localhost:3000/a"
    }
  }
}

Responsive configuration

responsiveConfiguration (object): For configurations that dynamically adapt to the given size or devices used. See Responsive Forms.

{
  "type"  : "textfield",
  "responsiveConfiguration" : {
    "width >= 1000" : { "label" : "Sehr langes Label" },
    "width < 1000"  : { "label" : "Kurzes Label" }
  }
}

Various Parameters for display

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

flex (number | object | string): 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.
maxHeight (number | string): Maximum height
maxWidth (number | string): Maximum width
minHeight (number | string): Minimum height
minWidth (number | string): Minimum width
height (number | string): Height
width (number | string): Width

{
  "type": "textfield",
  "width": 100
}

Optional - Restricted

The configurations described here are optional for various components, but not available for all of them. Which configurations are available for which components can be found in the individual components.

Various Parameters for display - Restricted

The following attributes can be used to influence the display of the component. However, the attributes are only applicable to some of the components.

boxLabel (MultiLanguageDefinition): Additional Label next to the input element.
boxLabelAlign (enum<"after" | "before">): Position of the additional Labels.

errorTarget (enum<"qtip" | "side" | "title" | "under">): Specifies the placement of errors on the component that are triggered by validation.

labelAlign (enum<"top" | "left" | "bottom" | "right">): Specifies placement of the Label relative to the field.
labelMinWidth (number | string): Minimum width
labelTextAlign (enum<"top" | "left" | "bottom" | "right">): Specifies the placement of the text within the Label.
labelWidth (number | string): Width
labelWrap (boolean): With true, the text of the Labels can extend over several lines. With false, the text is abbreviated by "…" if the text is too long.

{
  "type": "textfield",
  "label": "Ein wirklich langes Label",
  "labelAlign": "left",
  "labelWidth": 80,
  "labelWrap": false
}

Icon

icon (Font-Awesome-string): 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).

{
  "type": "textfield",
  "icon": "fal fa-fire"
}

Labeling

label (MultiLanguageDefinition): Most components offer the option of labeling. The specific display form depends on the component, but can be influenced via several settings. The text for the label can either be specified directly as a string or as a multilingual object for the use of multilingualism. The object then contains a string for several languages.

{
  "type": "textfield",
  "label": "Alle Sprachen"
},
{
  "type": "textfield",
  "label": {
    "MULTI_LANGUAGE": {
      "de": "Auf Deutsch",
      "en": "In English"
    }
  }
}

Action on value change `onChange`

onChange (ActionDefinition): When changing the value of a field, all actions defined here can be executed.

{
  "type": "textfield",
  "onChange": {
    "action": "validate"
  }
}

Restriction of use

With readOnly, disabled, and required the use of components for users can be changed.

disabled (Binding | boolean): 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.

readOnly (Binding | boolean): 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.

required (Binding | boolean): If a component is required, it is necessary for the user to enter data. Data binding to the value of the component should be used for this attribute.

{
  "type": "textfield",
  "disabled": "${/data/confirmation === false}",
  "value": "Unveränderlicher Text, wenn nicht zugestimmt."
},
{
  "type": "textfield",
  "required": true,
  "value": "${/data/text}"
}

Keywords: