Label

Label-Elemente werden in Formularen hauptsächlich dazu verwendet, um Beschriftungstexte wie Überschriften, Hinweise, Erläuterungen, o. ä. anzuzeigen.

Der anzuzeigende Text wird im einfachsten Fall direkt in der Eigenschaft Beschriftung eingegeben, die im Formulardesign sprachspezifisch ausgeprägt oder durch Bezüge zu Einträgen der Sprachverwaltung (bzw. Firmenspezifische Sprachanpassungen) lokalisiert werden kann.

Portale bieten die Möglichkeit, ein Label-Element an ein Datenfeld zu binden, so dass die Beschriftung zur Laufzeit den entsprechenden Inhalt wiedergibt. Das Zuweisen von Daten per Datenfeld oder über eine Aktion konvertiert die Daten zur Darstellung in einen Text.

Im Standard ist die Beschriftung eines Labels gleichzeitig an seinen Wert gebunden, jedoch nicht umgekehrt. Durch Abschlaten der Option Beschriftung mit Wert verknüpfen kann diese Bindung von Wert zu Beschriftung aufgehoben werden.
Ist diese Option deaktiviert, kann ein Label-Element ebenfalls eine gängige Beschriftung anzeigen, während der eigentliche Elementwert als separater Schriftzug dargestellt wird.
In diesem Fall steht zusätzlich ein Feld Standardwert zur Verfügung, welcher ebenfalls Sprachabhängig definiert werden kann.
Die Kombination aus Beschriftung mit Wert verknüpfen und Beschriftung anzeigen kann zu verschiedenen Darstellungsarten führen:

Konfiguration

Erscheinungsbild

Beschriftung anzeigen: Nein

Beschriftung: Sendungs-Nr.

Beschriftung mit Wert verknüpfen: Ja

images/download/attachments/113285904/image2021-8-30_16-7-31-version-1-modificationdate-1665403234023-api-v2.png


Beschriftung anzeigen: Ja

Beschriftung: Sendungs-Nr.

Beschriftung mit Wert verknüpfen: Ja

images/download/attachments/113285904/image2021-8-30_16-8-35-version-1-modificationdate-1665403234016-api-v2.png


Beschriftung anzeigen: Ja

Beschriftung: Sendungs-Nr.

Beschriftung mit Wert verknüpfen: Nein

images/download/attachments/113285904/image2021-8-30_16-9-32-version-1-modificationdate-1665403234010-api-v2.png

Beschriftung anzeigen: Ja

Beschriftung: Sendungs-Nr.

Beschriftung mit Wert verknüpfen: Nein

Standardwert: 12345

images/download/attachments/113285904/image2021-8-30_16-10-20-version-1-modificationdate-1665403234004-api-v2.png


Hinweis: Im Gegensatz zur Beschriftung, wird der Standardwert auch in die Formulardaten geschrieben, wenn ein Datenfeld definiert ist (analog zu anderen Elementen wie z.B. Textfeld).

Tipp: Durch das Aktivieren der Option Zeilenhöhe erzwingen wenn leer nimmt das Label immer eine Schriftzeile hoch Platz ein und kollabiert nicht auf Höhe 0 zusammen.
Auf diese Weise lassen sich aneinander ausgerichtete Layouts aufrechterhalten.
Beispiel:

Ohne "Zeilenhöhe erzwingen wenn leer"

Mit "Zeilenhöhe erzwingen wenn leer"

images/download/attachments/113285904/image2021-8-30_16-26-43-version-1-modificationdate-1665403233990-api-v2.png

images/download/attachments/113285904/image2021-8-30_16-25-43-version-1-modificationdate-1665403233996-api-v2.png


Textinhalt über Berechnungsfeld

Durch das Aktivieren der Berechnungsfeld-Option in der gleichnamigen Rubrik, kann der Textinhalt des Labels über einen Berechnungsausdrücke hergeleitet werden.
Hinweis: Anders als bei anderen Elementen wird der hergeleitete Wert nicht in die Formulardaten zurückgeschrieben. Somit können z.B. Datumswerte in ein anderes Format überführt werden ohne die Elementdaten zu manipulieren.

Schrifteinstellungen

In der Eigenschaften-Rubrik Layout können stilistische Einstellungen für das Erscheinungsbild des Textinhaltes vorgenommen werden.

Eigenschaft

Wirkung

images/download/attachments/113285904/image2021-8-30_16-31-1-version-1-modificationdate-1665403233983-api-v2.png

Definiert die Schriftfarbe. Leer bedeutet Standard.

Über den Farbpicker können entweder Farben aus den Styles ausgewählt,
oder statische Farben (2) festgelegt werden.

Schriftgröße

Legt die Schriftgröße des Labels fest. Folgende Modi werden unterschieden:

  • auto - Schriftgröße des übergeordneten Elements (i.d.R. Standardgröße)

  • Pixel - Definiert die Schriftgröße im Pixelmaß

  • rel. Schriftgröße - Definiert die Größe relativ zur Schriftgröße des übergeordneten Elements

    • Der Wert ist dabei der Faktor. 2 bedeutet doppelte Schriftgröße. Kommawerte sind erlaubt

Unterstrichen
Durchgestrichen
Kursiv
Fett

Beeinflusst entsprechend das Aussehen und die Dekoration der Schrift

Textausrichtung

Legt fest, ob der Textinhalt des Labels linksbündig, zentriert oder rechtsbündig ausgerichtet ist.
Leer bedeutet Standard.
Tipp: Diese Einstellung kann natürlich nur Wirkung zeigen, wenn das Label breiter ist als sein Inhalt.

Wortumbruch

Steuert das Wortumbruchverhalten des Labelinhalts.

  • Kein - Text darf nicht umbrechen

  • Nur an Zeilenumbrüchen - Text bricht nur explizit an Zeilenumbruchzeichen um

  • Automatisch - Text bricht um, wenn er keinen Platz mehr hat oder an Zeilenumbruchzeichen

  • Leer (keine Option ausgewählt) - Text bricht um, wenn er keinen Platz mehr hat. Zeilenumbrüche werden ignoriert

HTML Markup Unterstützung

Der Textbereich des Labels (nicht die Beschriftung des Elements) unterstützt das Rendern von HTML Markups. Dabei werden sämtliche unbedenkliche Layoutdefinitionen unterstützt.
Bedenkliche Inhalte wie z.B. Javascript-Code oder manche Style-Sheet-Eigenschaften werden aus Sicherheitsgründen entfernt.

images/download/attachments/113285904/image2018-6-5_12_8_30-version-1-modificationdate-1665403234118-api-v2.png

images/download/attachments/113285904/image2018-7-12_8_33_0-version-1-modificationdate-1665403234124-api-v2.png

  • HTML-Quelltext mit einfachen Markups, der zum Beispiel auch Verknüpfungen (<a href="http://[...]" target="_blank">BESCHRIFTUNGSTEXT</a>), Bilder (<img>), Tabellen (<table></table>) enthalten kann. Da die Labels in der Maske sprachspezifisch gehandhabt werden, kann auch ein sprachspezifischer Quelltext hinterlegt sein, so dass nicht nur der sichtbare Beschriftungstext, sondern auch die Verknüpfungen oder Verweise auf Bilder sprachspezifisch sein können. Entsprechend können die Quelltexte auch in der Sprachverwaltung hinterlegt werden.

  • Die Option Beschriftung anzeigen muss deaktiviert sein

Interaktionen

Das Label-Element unterstützt als einzige Interaktion das "Anklicken". Falls ein Verhalten mit dem Auslöser Angeklickt konfiguriert ist, verändert sich der Mauszeiger beim Ansteuern der Beschriftung zum "Hand"-Symbol, sofern die Option Beschriftung anzeigen abgewählt ist. Ohne diese Option gilt der Bereich unterhalb des angezeigten Texts als "anklickbar", der nur im Formulardesign visuell abgegrenzt wird.

Im folgenden Beispiel unterstützt die Überschrift einer "Kurzanleitung" das Anklicken, um zu einer ausführlicheren Beschreibung zu gelangen. Für das Label wurde außerdem ein Tooltip festgelegt, der ebenfalls erscheint, wenn sich der Mauszeiger dem Bereich der Beschriftung nähert.

images/download/attachments/113285904/image2019-11-28_11-31-6-version-1-modificationdate-1665403234128-api-v2.png

Sowohl die Überschrift als auch die kurze Liste unterhalb sind hier mit HTML Markup innerhalb der Beschriftung angereichert, etwa um die Schriftgröße der Überschrift (<h4>...</h4>) oder die Bullet-Point-Liste (<ul><li>...</li>...</ul>) zu bestimmen. Details hierzu erklärt der vorherige Abschnitt.

►HINWEIS◄ HTML Markup bietet auch die Möglichkeit ausgehend von einem Label-Text zusätzliche Interaktionen anzubieten, etwa indem Anker-Elemente (<a href="..." target="_blank">Hier klicken!</a>) einbezogen werden.

Im folgenden Beispiel wird der anklickbare Inhalt des Anker-Elements als Button (<button>...</button) definiert, so dass innerhalb der Beschriftung eine Schaltfläche erscheint, über die die Verknüpfung des Ankers aufgerufen werden kann. Dies aktiviert allerdings immer auch den Auslöser Angeklickt, so dass parallel zum Abruf der Webressource ggf. konfigurierte Verhalten des Label-Elements angestoßen werden.

Konfiguration

Erscheinungsbild

Eigenschaft Beschriftung des Labels:

<h4>Kurzanleitung für SCM</h4><a href="..." target=_blank"><button>Mehr Information?</button></a>

images/download/attachments/113285904/image2019-11-28_11-52-5-version-1-modificationdate-1665403234133-api-v2.png

Darstellungsart "Tag"

Stellt das Label Element visuell als Tag dar. Zusätzlich kann in der Rubrik "Allgemein" ein "Tag Icon" festgelegt werden.

images/download/attachments/113285904/image2021-9-22_13-48-8-version-1-modificationdate-1665403233975-api-v2.png

Tipp: Mit Hilfe der Aktionen Icon URL setzen und Farbe setzen können Icon und Farbe des Tags entsprechend dynamisch geändert werden.

Tag Kontrastfarbenmodus

Der Kontrastmodus der Tagfarbe (Hintergrund v.s. Schriftfarbe) wird standardmäßig über den Styles Eintrag "tagContrastColorMode" festgelegt, kann jedoch in der Layout Sektion pro Label Element überschrieben werden.

Mögliche Werte:

  • Leer - Wert wird aus dem Styles Eintrag "tagContrastColorMode" übernommen

  • Standard - Farbe wird als Hintergrundfarbe gesetzt. Die Schriftfarbe ist, abhängig vom Farbton des Hintergrunds, Schwarz oder Weiß.

  • Vordergrund - Farbe wird als Hintergrundfarbe gesetzt. Die Schriftfarbe wird dynamisch als hellere/dunklere Version der Hintergrundfarbe errechnet.

  • Hintergrund - Farbe wird als Schriftfarbe gesetzt. Die Hintergrundfarbe wird dynamisch als hellere/dunklere Version der Schriftfarbe errechnet.

Beispiele für den Kontrastmodus (Vordergrund v.s. Hintergrund):

Farbwert

Standard

Vordergrund

Hintergrund

#980F45

images/download/attachments/113285904/image2021-9-22_13-59-42-version-1-modificationdate-1665403233955-api-v2.png

images/download/attachments/113285904/image2021-9-22_13-56-42-version-1-modificationdate-1665403233969-api-v2.png

images/download/attachments/113285904/image2021-9-22_13-57-41-version-1-modificationdate-1665403233961-api-v2.png

#23d323

images/download/attachments/113285904/image2021-9-22_14-3-58-version-1-modificationdate-1665403233947-api-v2.png

images/download/attachments/113285904/image2021-9-22_14-4-51-version-1-modificationdate-1665403233940-api-v2.png

images/download/attachments/113285904/image2021-9-22_14-5-17-version-1-modificationdate-1665403233935-api-v2.png

#40b3a2

images/download/attachments/113285904/image2021-9-22_14-6-55-version-1-modificationdate-1665403233929-api-v2.png

images/download/attachments/113285904/image2021-9-22_14-7-17-version-1-modificationdate-1665403233905-api-v2.png

images/download/attachments/113285904/image2021-9-22_14-7-42-version-1-modificationdate-1665403233885-api-v2.png