Allgemeine Komponenten Konfiguration

Die Konfigurationen der Komponenten enthalten diverse Bestandteile. Einige davon gelten für alle Komponenten. Die meisten beschränken sich jedoch auf einen Teil der Komponenten.

Notwendig

Notwendig für jede Komponenten-Konfiguration ist ausschließlich die Angabe des Typs.

Typ

type (enum): Jede Komponenten muss einem Typ entsprechen. Diesen können Sie an der jeweiligen Komponente einsehen.

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

Optional – Für Alle

Im Folgenden werden die Konfigurationen beschrieben, die auf alle Komponenten optional anwendbar sind.

Generische Konfiguration

configuration (object): Über das Attribut configuration lassen sich beliebige Parameter an die Komponente übergeben. Diese werden im Renderer bei der Erstellung der Komponenten übergeben und entsprechend interpretiert. So können z. B. nicht direkt Unterstütze Funktionen an den Komponenten gesteuert werden. Weitere Informationen über mögliche Funktionalität findet sich hier. In diesem Beispiel wird direkt an der Komponente der Style angepasst.

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

Diese Option sollte mit Vorsicht verwendet werden. Eine falsche Konfiguration kann dazu führen, dass das Formular nicht mehr wie erwartet funktioniert.

Ausgeblendet

hidden (Binding | boolean): Mit dem Attribut hidden können Komponenten ausgeblendet werden.

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

ID

id (number | string): Identifiziert die Komponente innerhalb des Formulars und darf nur einmal verwendet werden.

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

Aktion bei Klick

onClick (ActionDefinition): Bei einem Klick auf eine Komponente können alle hier definierten Aktionen ausgeführt werden.

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

Aktion bei Initialisierung

onPainted (ActionDefinition): Nach der Initialisierung und Anzeige einer Komponente können alle hier definierten Aktionen ausgeführt werden. Dies wird einmalig ausgeführt, wenn die Komponente zum ersten Mal sichtbar wird.

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

Responsive Konfiguration

responsiveConfiguration (object): Für Konfigurationen die sich dynamisch an die gegebene Größe oder verwendeten Geräte anpassen. Siehe Responsive Forms.

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

Diverse Parameter zur Darstellung

Folgende Attribute können genutzt werden, um Einfluss auf die Darstellung der Komponente zu nehmen.

flex (number | object | string): Gibt an wie sich die Komponente in ihrem container ausbreiten darf. Dafür werden die flex Werte aller Komponenten im container zueinander ins Verhältnis gesetzt.
maxHeight (number | string): Maximale Höhe
maxWidth (number | string): Maximale Breite
minHeight (number | string): Mindesthöhe
minWidth (number | string): Mindestbreite
height (number | string): Höhe
width (number | string): Breite

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

Optional – Eingeschränkt

Die hier beschriebenen Konfigurationen sind optional für diverse Komponenten, jedoch nicht für alle verfügbar. Welche Konfigurationen für welche Komponenten zur Verfügung stehen, ist bei den einzelnen Komponenten zu finden.

Diverse Parameter zur Darstellung – Eingeschränkt

Folgende Attribute können genutzt werden, um Einfluss auf die Darstellung der Komponente zu nehmen. Die Attribute sind, jedoch nur auf einen Teil der Komponenten anwendbar.

boxLabel (MultiLanguageDefinition): Zusätzliches Label neben dem Eingabeelement.
boxLabelAlign (enum<"after" | "before">): Position des zusätzlichen Labels.

errorTarget (enum<"qtip" | "side" | "title" | "under">): Gibt Platzierung von Fehlern an der Komponente an, die durch Validierung ausgelöst werden.

labelAlign (enum<"top" | "left" | "bottom" | "right">): Gibt Platzierung des Labels relativ zum Feld an.
labelMinWidth (number | string): Mindestbreite
labelTextAlign (enum<"top" | "left" | "bottom" | "right">): Gibt Platzierung des Texts innerhalb des Labels an.
labelWidth (number | string): Breite
labelWrap (boolean): Bei true kann sich der Text des Labels über mehrere Zeilen erstrecken. Bei false wird der Text durch "…" abgekürzt, falls der Text zu lang ist.

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

Icon

icon (Font-Awesome-string): Die meisten Komponenten bieten die Möglichkeit zur Anzeige eines Icons. Die konkrete Darstellungsform hängt von der Komponente ab. Die Icons stammen von der Bibliothek Font Awesome Pro. Es kann direkt eine Font-Awesome CSS-Klasse als String angegeben werden.

Der Renderer unterstützt alle Font-Awesome-Icons der Version 5.15.4 (Pro-Variante).

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

Beschriftung

label (MultiLanguageDefinition): Die meisten Komponenten bieten die Möglichkeit einer Beschriftung. Die konkrete Darstellungsform hängt von der Komponente ab, welche aber über mehrere Einstellungen beeinflusst werden kann. Der Text für die Beschriftung kann entweder direkt als String angegeben werden oder als mehrsprachiges Objekt für die Verwendung von Mehrsprachigkeit. Das Objekt enthält dann für mehrere Sprachen einen String.

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

Aktion bei Wertänderung `onChange`

onChange (ActionDefinition): Bei der Wertänderungen eines Feldes können alle hier definierten Aktionen ausgeführt werden.

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

Einschränkung der Benutzung

Mit readOnly, disabled, und required kann die Benutzung von Komponenten für Nutzer verändert werden.

disabled (Binding | boolean): Das Attribut disabled ermöglicht es Interaktion mit einer Komponente komplett auszuschalten. Dieses Attribut kann für alle Komponenten mit Interaktion verwendet werden. Wenn Komponenten disabled sind, ist dies eindeutig erkennbar.

readOnly (Binding | boolean): Soll ein Anwender auf eine Komponente nur lesend zugreifen, ohne dessen Inhalte zu verändern, dann kann das Attribut readOnly verwendet werden. Dieses Attribut ist für Felder mit Text zu verwenden und ändert das Design nicht und hat lediglich Einfluss auf Schreibrechte.

required (Binding | boolean): Wenn eine Komponente required ist, ist es erforderlich, dass der Nutzer Daten eingibt. Für dieses Attribut sollte Data-Binding auf den Wert der Komponente verwendet werden.

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

Keywords: