Formularelemente

Alle Formularelemente (kurz: Elemente) haben mindestens folgende Konfigurationsmöglichkeiten:

images/download/attachments/106962373/image2022-7-28_16-37-15-version-1-modificationdate-1659019393580-api-v2.png


(1) Innerhalb des Formulars eindeutige Element-ID (im Beispiel: "6") und Element-Typ (z.B.: Combobox, Textfeld, Label, ...).

(2) Datenfeldpfad, über welchen das Element seine Daten liest und schreibt (relativ zum Datenfeld des übergeordneten Elements). Mit dem Knopf rechts, kann das Datenfeld auf "überspringen" gesetzt werden, was dafür sorgt, dass der Elementwert nicht zurück in die Daten des Übergeordneten Elements geschrieben werden.

(3) Beschriftung des Elements (siehe auch Beschriftungen).

(4) Ein Tooltiptext, welcher angezeigt wird, wenn der Mauszeiger auf dem Element positioniert wird (siehe auch Beschriftungen).

Elemente mit Tooltips werden für den Bediener der Maske entsprechend gekenntzeichnet: images/download/attachments/106962373/image2020-1-27_15-1-18-version-1-modificationdate-1658998669345-api-v2.png . Dies kann über die Elementeigenschaft "Tooltip-Indikator anzeigen" (4b) (de)aktiviert werden.
Hinweis: Tooltip-Indikatoren können in den Formulareigenschaften auch generell abgeschaltet werden. In diesem Falle spielt die Einstellung eines einzelnen Elements keine Rolle mehr.

(5) Auswahl ob die Beschriftung des Elements im Formular angezeigt werden soll oder nicht.

(6) Auswahl ob das Element aktiv ist oder nicht. Welche Auswirkungen die Inaktivität des Elements hat, hängt vom Elementtyp ab. Textfelder können nicht mehr ausgefüllt oder betreten werden, Knöpfe können nicht mehr gedrückt werden, etc. Inaktive Elemente werden nicht validiert.

(7) Auswahl ob das Element ein Pflichtfeld ist oder nicht. Das Formular oder auch ein Container kann nur erfolgreich validiert werden, wenn für alle Pflichtfelder Angaben gemacht wurden.

(8) Gibt an, ob das Element sichtbar ist oder nicht. Unsichtbare Elemente werden von der Validierung ausgeschlossen (bzgl. Pflichtfeld, Validierer).

(8b) Steht zur Verfügung sobald das Element inaktiv (6) oder verborgen (8) ist oder dessen Datenfeld auf "überspringen" (2) steht.
Ist diese Option aktiv, wird das Element dennoch validiert. Dies funktioniert jedoch nur, wenn auch die übergeordnete Elementhierarchie nicht von der Validierung ausgenommen ist.

(9) Auswahl, ob das Element schreibgeschützt ist. Verhindert beispielsweise bei Eingabefelder das Beschreiben des Feldes durch den Benutzer, ohne es inaktiv setzen zu müssen.

(10) Bietet weitere Darstellungsmöglichkeiten der selben Komponente. Welche hier angeboten werden hängt vom jeweiligen Elementtyp ab. So kann eine Combobox beispielsweise auch als Optionen in Form von Radio-Buttons dargestellt werden. Das Datenmodell des Elements bleibt dabei unverändert.

(11) Zeigt sämtliche Bezüge zum ausgewählten Element auf. Die Konfiguration von Verhalten/Aktionen, Validierern oder Berechnungen kann sich auf Elemente beziehen.

(12) Springt zum übergeordneten Element, soweit vorhanden.

(13) Zeigt weitere Details zum Element an (z.B. Template-ID und XML ID)

Reiter "Verhalten" (A): Hier können Verhaltenslogiken für das Element hinterlegt werden (z.B. Eine Aktion beim Ändern des Wertes ausführen etc.). Verhaltensweisen und Aktionen sind im gleichnamigen Kapitel ausführlich beschrieben.

Beschriftungen

images/download/attachments/106962373/image2018-5-29_15_10_45-version-1-modificationdate-1658998669317-api-v2.png
Wann immer im Eigenschaftseditor die oben gezeigte Kombination von Weltkugel-Button mit einem Textfeld auftaucht, kann alternativ zur Direkteingabe im Textfeld auch der Bezug zu einer Ressource in der Sprachverwaltung genommen werden.
Hat der Wert eine Ressource oder einen Standardwert als Quelle, so wird das Weltkugelsymbol entsprechend eingefärbt.

Wird die Sprache des Editors (Ribbon oben) geändert, so beeinflusst ein manuell eingetragener Wert die Übersetzung für die eingestellte Sprache. Dies sollte generell genutzt werden.


Beispiel

In der Sprachverwaltung befindet sich ein Eintrag für das Resource Bundle "Datumstyp" und Resource Name "DEPARTURE_ACTUAL". Die jeweiligen Lokalisierungen sind "Abfahrtsdatum tatsächlich" und "Departure date actual".

images/download/attachments/106962373/Selection_076-version-1-modificationdate-1658998669338-api-v2.png

Ist die Verwendung einer bestimmten Resource gewünscht, kann diese durch Klicken auf das Weltkugelsymbol (2 unten) ausgewählt werden. Das Eingabefeld bietet dabei den in der aktuell eingestellten Sprache übersetzten Wert an.

images/download/attachments/106962373/image2018-11-15_15-32-44-version-1-modificationdate-1658998669308-api-v2.png

Beim Markieren eines Elements in der Liste wird automatisch das entsprechende Bundle und der Resourcenname eingeblendet. Durch Klicken auf das Menüsymbol (1) kann das Bundle und der Resourcenname auch manuell festgelegt werden.
Wurde als Beschriftung eine Resource aus der Sprachverwaltung hinterlegt, wird das Weltkugelsymbol (2) farbig dargestellt.

Würde nun eine andere Sprache eingestellt werden (zum Beispiel an der Ribbonleiste oben), wird dieses Feld automatisch und unmittelbar übersetzt.

Größenangaben (Kategorie Layout)

Zudem bieten einige Elemente die Möglichkeit an, die Breite/Min. Breite und/oder die Höhe/Min. Höhe zu konfigurieren:

images/download/attachments/106962373/image2018-5-28_15_53_35-version-1-modificationdate-1658998669314-api-v2.png

Dabei werden drei Modi unterstützt:

  1. Fix: Die Größe wird als fixer Wert in Pixeln angegeben.

  2. Prozentual: Die Größe wird als prozentualer Wert angegeben.
    Dabei wird das Maß relativ zum übergeordneten Element errechnet.
    Achtung: Sollte ein übergeordneter Element Container eine automatische Größe (Auto) verwenden, kann dies zu Layoutproblemen führen, da die Größe dann mathematisch nicht definiert ist.

  3. Relativ zur Schriftgröße: Die Größe wird als Faktor zur aktuellen Schriftgröße interpretiert (z.B. bei Schriftgröße 14px würde der Wert 2 als Maß 28px liefern)

  4. Auto: Die Größe passt sich automatisch an den Inhalt an


Mehr Details und Layoutbeispiele finden sich im Kapitel Formular Layout.

Benutzerdefiniertes Gestalten mit CSS Klassen

Mit Hilfe der Layout Eigenschaft "CSS Klasse" kann einem Element eine oder mehrere (getrennt durch Leerzeichen) CSS Klassen zugewiesen werden.
Über das Lupensymbol kann auch nach CSS Klassen gesucht werden, die in beliebigen CSS Selektororen (Stylesheets) beinhaltet sind. Ebenfalls wird eine Vorschau angezeigt.

Unter dem Namensmuster "lb-style-" und "lb-effect-" werden bereits vorgefertigte Gestaltungsvorlagen angeboten.

Beispiele:

  • lb-effect-rotate-z-2-linear-infinite Setzt eine unbegrenzte Drehung des Elements um die z-Achse in Gang

  • lb-style-section-strong Lässt einen Element Container als stark hervorgehobenen Abschnitt erscheinen

Mit der Aktion "CSS-Klasse" können auch dynamisch CSS Klassen hinzugefügt oder entfernt werden.

Über die Experteneinstellungen der Styles können diese Klassen mit Hilfe von CSS Selektoren erweitert oder überschrieben werden oder eigene neue Klassen via CSS Selektor ".Klassenname" definiert werden.
Sobald der Style geladen wurde (Client neu laden oder "Vorschau"), werden die Änderungen angewandt.

Wert Transformation

Eine Adapterschicht zum Manipulieren von gelesenen und geschriebenen Elementdaten.
Für Details siehe Unterkapitel Werttransformation.