General component configuration

The configurations of the components contain various parts. Some of these apply to all components. However, most are limited to a 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 specify this at the respective component 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): The configuration attribute can be used to transfer any Parameters to the component. 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): Clicking on a component can trigger all the actions defined here Actions 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 Actions 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 the 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 are available for 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 caused by Validation are triggered.

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 a caption. The specific display format depends on the component, which, however, can be selected via several settings 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 used Actions can be executed.

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

Restriction of use

readOnly , disabled, and required can be used to change the use of components for users.

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 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. For this attribute, data binding should be used 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: