Wiki-Quellcode von CSS-Einstellungen für Assistenten / JavaScript
Zuletzt geändert von MACH formsolutions am 15.10.2025
Verstecke letzte Bearbeiter
| author | version | line-number | content |
|---|---|---|---|
 |
431.8 | 1 | **Inhaltsverzeichnis:** |
| |
431.7 | 2 | |
| |
431.8 | 3 | {{toc start="2"/}} |
| 4 | |||
| |
433.1 | 5 | == CSS-Einstellungen für Assistenten == |
| |
431.7 | 6 | |
| |
433.1 | 7 | 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. |
| 8 | Die Anpassungen werden zentral verwaltet und sind für alle Assistenten gültig, sowie im Bereich //Payment// und //eID//. | ||
| |
1.1 | 9 | |
| |
433.3 | 10 | (% class="box warningmessage" %) |
| 11 | ((( | ||
| |
431.10 | 12 | Änderungen im CSS-Bereich können die Barrierefreiheit der Anwendung beeinträchtigen. |
| |
433.3 | 13 | ))) |
| |
431.9 | 14 | |
| |
433.3 | 15 | |
| |
433.1 | 16 | === Organisations-Konfiguration aufrufen === |
| |
431.9 | 17 | |
| |
431.10 | 18 | **Voraussetzung:** Benutzerrecht **Layout verwalten** |
| |
431.2 | 19 | |
| |
433.1 | 20 | Klicken Sie im Formulareditor in der [[Hauptwerkzeugleiste>>doc:Main.05_Assistenten.01_Hauptwerkzeugleiste.WebHome]] die Schaltfläche Administration an.[[image:Main.05_Assistenten.01_Hauptwerkzeugleiste.WebHome@HauptwerkzeugleisteCSS.jpg||alt="Schaltfläche Administration"]] |
| |
1.1 | 21 | |
| |
433.1 | 22 | {{icon name="far fa-arrow-right"/}}Der Dialog **Organisations-Konfiguration** öffnet sich. |
| |
431.1 | 23 | |
| |
433.3 | 24 | |
| |
433.1 | 25 | === Reiter "CSS" === |
| |
1.1 | 26 | |
| |
431.10 | 27 | 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**). |
| |
1.1 | 28 | |
| |
433.1 | 29 | Im Feld **externes CSS (URL)** kann die Internetadresse einer CSS-Datei eingetragen werden, auf die der Formularserver Zugriff hat. |
| |
431.10 | 30 | Beim Feld **internes CSS** können alle gängigen CSS-Regeln verwendet werden. |
| |
1.1 | 31 | |
| |
431.19 | 32 | Über **Attribute** können spezifische Assistenten, Panels oder Komponenten ausgewählt werden. |
| |
431.11 | 33 | |
| |
433.1 | 34 | |=Attribut|=Beschreibung|=Beispiel |
| |
433.2 | 35 | |data-assistant-identifier|Wert ist die Artikelnummer((( |
| 36 | Elternknoten für die Attribute "{{code language="none"}}data-panel-identifier{{/code}}" und "{{code language="none"}}data-component-identifier{{/code}}" | ||
| 37 | )))|[data-assistant-identifier="KFAS_123456"] h2 { color: orange !important; } | ||
| |
433.3 | 38 | |data-panel-identifier|Wert ist die technische Bezeichnung des Panels((( |
| 39 | Elternknoten für das Attribut "{{code language="none"}}data-component-identifer{{/code}}" | ||
| 40 | )))|[data-panel-identifier="Beispielpanel_1"] h2 { color: yellow !important; } | ||
| 41 | |data-component-identifier|Wert ist die technische Bezeichnung der Komponente((( | ||
| 42 | Unterhalb des Attributs "{{code language="none"}}data-panel-identifier{{/code}}" können mehrere Attribute "{{code language="none"}}data-component-identifier{{/code}}" vorkommen. Verschachtelte Komponenten werden mit Punkten zwischen den technischen Bezeichnungen getrennt als Wert dargestellt. Beispiel: //Objektgruppenname.Komponentenname// | ||
| 43 | )))|[data-component-identifier="Textfeld (einzeilig)"] input{ border-color: orange !important; } | ||
| |
433.2 | 44 | |
| |
1.1 | 45 | |
| |
433.3 | 46 | |
| |
433.1 | 47 | === Reiter "CSS-Generator" === |
| |
1.1 | 48 | |
| |
432.1 | 49 | 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. |
| |
431.20 | 50 | |
| |
432.1 | 51 | **Nutzung des CSS-Generators:** |
| |
431.23 | 52 | |
| |
432.1 | 53 | 1. Hintergrundfarbe und/oder Schriftfarbe mithilfe der Farbwähler festlegen |
| 54 | 1. Schriftart(en)/Schriftfamilie(n) auswählen und mit den Pfeiltasten in den rechten Bereich verschieben | ||
| 55 | 1. Schaltfläche **Generieren** anklicken | ||
| |
1.1 | 56 | |
| |
433.1 | 57 | {{icon name="far fa-arrow-right"/}}Der CSS-Code ist im Abschnitt **CSS** > **internes CSS** eingetragen. |
| |
1.1 | 58 | |
| |
433.3 | 59 | |
| |
433.1 | 60 | == JavaScript-Einstellungen == |
| |
315.1 | 61 | |
| |
433.3 | 62 | (% class="box warningmessage" %) |
| 63 | ((( | ||
| |
432.1 | 64 | Änderungen im JavaScript-Bereich können die Barrierefreiheit der Anwendung beeinträchtigen. |
| |
433.3 | 65 | ))) |
| |
1.1 | 66 | |
| |
432.1 | 67 | Im Reiter **JavaScript** der Organisations-Konfiguration kann JavaScript konfiguriert werden, das mandantenweit in allen Assistenten und Panels ausgeführt wird. |
| |
1.1 | 68 | |
| |
434.1 | 69 | Weitere Informationen zu JavaScript in MACH formsolutions: [[Artikel JavaScript-Konfiguration>>Main.05_Assistenten.04_Assistentenbauoberfläche.15_JavaScript]] |