CSS-Einstellungen für Assistenten / JavaScript
Inhaltsverzeichnis:
CSS-Einstellungen für Assistenten
Mit CSS-Anweisungen (Cascading Style Sheets) können Sie die visuelle Gestaltung Ihrer veröffentlichten Assistenten verändern. Damit gleichen Sie die Assistenten optisch nahtlos an Ihre Website und Ihre gewohnte Corporate Identity an.
Die Anpassungen werden zentral verwaltet und sind für alle Assistenten gültig, sowie im Bereich Payment und eID.
Änderungen im CSS-Bereich können die Barrierefreiheit der Anwendung beeinträchtigen.
Organisations-Konfiguration aufrufen
Voraussetzung: Benutzerrecht Layout verwalten
Klicken Sie im Formulareditor in der Hauptwerkzeugleiste die Schaltfläche Administration an.
Der Dialog Organisations-Konfiguration öffnet sich.
Reiter "CSS"
Verweisen Sie auf eine externe Quelle, aus der die CSS-Anweisungen geladen werden (externes CSS), oder tragen Sie Anweisungen/Code direkt in der Konfiguration ein (internes CSS).
Im Feld externes CSS (URL) kann die Internetadresse einer CSS-Datei eingetragen werden, auf die der Formularserver Zugriff hat.
Beim Feld internes CSS können alle gängigen CSS-Regeln verwendet werden.
Über Attribute können spezifische Assistenten, Panels oder Komponenten ausgewählt werden.
| Attribut | Beschreibung | Beispiel |
|---|---|---|
| data-assistant-identifier | Wert ist die Artikelnummer | |
| Elternknoten für die Attribute "data-panel-identifier" und "data-component-identifier" | [data-assistant-identifier="KFAS_123456"] h2 { color: orange !important; } | |
| data-panel-identifier | Wert ist die technische Bezeichnung des Panels | |
| Elternknoten für das Attribut "data-component-identifer" | [data-panel-identifier="Beispielpanel_1"] h2 { color: yellow !important; } | |
| data-component-identifier | Wert ist die technische Bezeichnung der Komponente | |
| Unterhalb des Attributs "data-panel-identifier" können mehrere Attribute "data-component-identifier" vorkommen. Verschachtelte Komponenten werden mit Punkten zwischen den technischen Bezeichnungen getrennt als Wert dargestellt. Beispiel: Objektgruppenname.Komponentenname | [data-component-identifier="Textfeld (einzeilig)"] input{ border-color: orange !important; } |
Reiter "CSS-Generator"
Mithilfe grafischer Werkzeuge können Sie hier grundlegende Einstellungen für die Assistentensicht festlegen. Der generierte Code kann anschließend manuell bearbeitet und weiter angepasst werden.
Nutzung des CSS-Generators:
- Hintergrundfarbe und/oder Schriftfarbe mithilfe der Farbwähler festlegen
- Schriftart(en)/Schriftfamilie(n) auswählen und mit den Pfeiltasten in den rechten Bereich verschieben
- Schaltfläche Generieren anklicken
Der CSS-Code ist im Abschnitt CSS > internes CSS eingetragen.
JavaScript-Einstellungen
Änderungen im JavaScript-Bereich können die Barrierefreiheit der Anwendung beeinträchtigen.
Im Reiter JavaScript der Organisations-Konfiguration kann JavaScript konfiguriert werden, das mandantenweit in allen Assistenten und Panels ausgeführt wird.
Weitere Informationen zu JavaScript in MACH formsolutions finden Sie im Artikel JavaScript-Konfiguration.