General Component Configuration

Component configurations contain various elements. Some of these apply to all components. Most, however, are limited to a subset of components.

Required

The only requirement for any component configuration is specifying the type.

Type

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

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

Optional – For All

The following describes the configurations that are optionally applicable to all components.

CSS Classes

cls (Binding | string): Allows you to assign CSS classes to the component. In combination with binding, the appearance can be dynamically controlled at runtime. Variables should primarily be used for color customization. CSS classes should only be used when structural changes or specific effects are required that cannot be covered by global variables.

In the following example, the checkbox is assigned the CSS class baseClass and, depending on its status, an additional class:

{
  "type": "checkbox",
  "value": "${/data/checked}",
  "cls": "baseClass ${/data/checked ? 'isActive' : 'isInActive'}"
}

Generic Configuration

configuration (object): The ` configuration ` attribute can be used to pass arbitrary 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. 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 cause the form to no longer function 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"
}

Click Action

onClick (ActionDefinition): When a component is clicked, any of the actions defined here can be executed.

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

Action on Initialization

onPainted (ActionDefinition): After a component is initialized and displayed, 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 in use. See Responsive Forms.

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

Miscellaneous Display Parameters

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

flex (number | object | string): Specifies how the component may expand within its container. To do this, the flex values of all Components within the container are compared relative to one another.
margin (number | string): Distance from neighboring elements
maxHeight (number | string): Maximum height
maxWidth (number | string): Maximum width
minHeight (number | string): Minimum height
minWidth (number | string): Minimum width
height (number | string): Height
padding (number | string): Space between content and margin
width (number | string): Width

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

Optional – Limited

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

Various Display Parameters – Limited

The following attributes can be used to influence the component’s appearance. However, these 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 label.

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 the 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): When true is set, the Label text can span multiple lines. For false, the text is truncated with "…" if it 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 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).

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

Label

label (Binding | MultiLanguageDefinition): Most components offer the option of labeling. The specific display format depends on the component, but can be influenced by several settings. The text for the label can either be specified directly as a string or as a multilingual object for multilingual support. The object then contains a string for multiple languages. For components, it is also possible to set the label via binding.

{
  "type": "textfield",
  "label": "Alle Sprachen"
},
{
  "type": "textfield",
  "value": "${/data/textfieldValue}",
  "label": "Value: ${/data/textfieldValue}"
},
{
  "type": "textfield",
  "label": {
    "MULTI_LANGUAGE": {
      "de": "Auf Deutsch",
      "en": "In English"
    }
  }
}

Action on Value Change `onChange`

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

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

Restricting Usage

Using readOnly, disabled, and required, you can modify how users interact with components.

disabled (Binding | boolean): The disabled attribute allows you to completely disable interaction with a component. This attribute can be used for all components with interaction. When components are " disabled," this is clearly indicated.

readOnly (Binding | boolean): If a user is to have read-only access to a component without being able to modify its contents, the attribute readOnly can be used. This attribute is intended for text fields; it does not alter the design and affects only write permissions.

required (Binding | boolean): If a component is required, the user is required to enter data. For this attribute, data binding should be used to set the component’s value to .

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

Keywords: