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 |
|
Beschriftung anzeigen: Ja Beschriftung: Sendungs-Nr. Beschriftung mit Wert verknüpfen: Ja |
|
Beschriftung anzeigen: Ja Beschriftung: Sendungs-Nr. Beschriftung mit Wert verknüpfen: Nein |
|
Beschriftung anzeigen: Ja Beschriftung: Sendungs-Nr. Beschriftung mit Wert verknüpfen: Nein Standardwert: 12345 |
|
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" |
|
|
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 |
|
Definiert die Schriftfarbe. Leer bedeutet Standard. Über den Farbpicker können entweder Farben aus den Styles ausgewählt, |
Schriftgröße |
Legt die Schriftgröße des Labels fest. Folgende Modi werden unterschieden:
|
Unterstrichen |
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. |
Wortumbruch |
Steuert das Wortumbruchverhalten des Labelinhalts.
|
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.
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.
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> |
|
Darstellungsart "Tag"
Stellt das Label Element visuell als Tag dar. Zusätzlich kann in der Rubrik "Allgemein" ein "Tag Icon" festgelegt werden.
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 |
|
|
|
#23d323 |
|
|
|
#40b3a2 |
|
|
|