Verwendung von HTML-Sonderzeichen mit K2-SmartForms

Um die Formulare in K2 grafisch etwas aufzupeppen sind nicht immer Bilder notwendig.
Mit den HTML-Sonderzeichen kann ein Formular ebenfalls auf einfache Art und Weise ansprechender gestaltet werden.

Insbesondere um Pflichtfelder hervorzuheben, oder um auf bestimmte Informationen hinzuweisen, kann mit den Sonderzeichen viel gemacht werden.
Nachfolgend möchte ich das kurz durch ein Beispiel verdeutlichen wie das aussehen kann – in diesem Fall soll der Benutzer grafisch auf korrekte Eingaben hingewiesen werden.

Ich habe in dem Beispiel ein einfaches Formular mit drei Pflichtfeldern – jedes Feld wird einzeln geprüft und entsprechend markiert. Außerdem weist noch ein Haken darauf hin, ob das gesamte Formular korrekt befüllt wurde.

Aber seht selbst:

1. Leeres Formular (alle Symbole rot / Gesamthäkchen rot)

2. Eine Angabe gemacht (ein Symbol grün / Gesamthäkchen rot)

3. Zwei Angaben gemacht (zwei Symbole grün / Gesamthäkchen rot)

4. Komplett ausgefüllt (alle Symbole grün / auch der Haken neben dem Formular ist nun grün)

Wie sieht das im Designer aus ….

Für die Symbole habe ich vier Label-Controls auf der SmartForms-View platziert.

Die Eigenschaft „Literal“ ist auf true gesetzt – damit wird dafür gesorgt, das der Text des Label-Controls als HTML interpretiert wird.
Als Text habe ich bei den Label-Controls einen entsprechenden Unicode eingegeben, der vom Browser entsprechend dargestellt wird.
Eine umfangreiche List der Sonderzeichen könnt ihr hier ersehen: https://nextlevelseo.de/html-sonderzeichen oder auch hier https://unicode-table.com/de/

Konfiguration des Label-Controls

Mittels Conditional Styles habe ich das Verhalten der Lables definiert.
In diesem Fall ganz einfach durch eine Überprüfung der Textboxen bzw. des Kalendercontrols.
Entsprechend der Conditional-Style Regeln wird das Symbol grün oder rot angezeigt.

Zwei Darstellungsvarianten

Ganz einfache Formatierung

Einfache Regel – Überprüfung ob eine Eingabe gemacht wurde oder eben nicht

Eigentlich war es das schon … aber natürlich kann man die ganzen Sonderzeichen auch für andere Dinge verwenden ….. ich denke der Phantasie ist da keine Grenzen gesetzt!

Ich hoffe der Beitrag hat Euch eine wenig weitergeholfen :-)

HINWEIS:
Ihr solltet vorher prüfen wie die Zeichen in Eurem Browser dargestellt werden. Im MS Edge z.B. wird das Symbol der schreibenden Hand farbig dargestellt und die Veränderung der Formatierung (Farbe) bleibt wirkungslos.
Hier eine Hardcopy des gleichen Formulars im Edge: