Änderungen von Dokument CSS-Einstellungen für Assistenten / JavaScript
Zuletzt geändert von MACH formsolutions am 15.10.2025
Von Version 432.1
bearbeitet von MACH formsolutions
am 15.10.2025
am 15.10.2025
Änderungskommentar:
Es gibt keinen Kommentar für diese Version
Auf Version 433.3
bearbeitet von MACH formsolutions
am 15.10.2025
am 15.10.2025
Änderungskommentar:
Es gibt keinen Kommentar für diese Version
Zusammenfassung
-
Seiteneigenschaften (2 geändert, 0 hinzugefügt, 0 gelöscht)
Details
- Seiteneigenschaften
-
- Syntax
-
... ... @@ -1,1 +1,1 @@ 1 - Markdown1.21 +XWiki 2.1 - Inhalt
-
... ... @@ -2,43 +2,50 @@ 2 2 3 3 {{toc start="2"/}} 4 4 5 - ##CSS-Einstellungen für Assistenten5 +== CSS-Einstellungen für Assistenten == 6 6 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_.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//. 9 9 10 +(% class="box warningmessage" %) 11 +((( 10 10 Änderungen im CSS-Bereich können die Barrierefreiheit der Anwendung beeinträchtigen. 13 +))) 11 11 12 -### Organisations-Konfiguration aufrufen 13 13 16 +=== Organisations-Konfiguration aufrufen === 17 + 14 14 **Voraussetzung:** Benutzerrecht **Layout verwalten** 15 15 16 -Klicken Sie im Formulareditor in der [[Hauptwerkzeugleiste |doc:Main.05_Assistenten.01_Hauptwerkzeugleiste.WebHome]] die Schaltfläche Administration an.![[Schaltfläche Administration|Main.05_Assistenten.01_Hauptwerkzeugleiste.WebHome@HauptwerkzeugleisteCSS.jpg]]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"]] 17 17 18 -{{icon name="far fa-arrow-right" }}{{/icon}}Der Dialog **Organisations-Konfiguration** öffnet sich.22 +{{icon name="far fa-arrow-right"/}}Der Dialog **Organisations-Konfiguration** öffnet sich. 19 19 20 -### Reiter "CSS" 21 21 25 +=== Reiter "CSS" === 26 + 22 22 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**). 23 23 24 -Im Feld **externes CSS (URL)** kann die Internetadresse einer CSS-Datei eingetragen werden, auf die der Formularserver Zugriff hat. 29 +Im Feld **externes CSS (URL)** kann die Internetadresse einer CSS-Datei eingetragen werden, auf die der Formularserver Zugriff hat. 25 25 Beim Feld **internes CSS** können alle gängigen CSS-Regeln verwendet werden. 26 26 27 27 Über **Attribute** können spezifische Assistenten, Panels oder Komponenten ausgewählt werden. 28 28 29 -| Attribut | Beschreibung | Beispiel | 30 -| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------- | 31 -| data-assistant-identifier | Wert ist die Artikelnummer 32 -Elternknoten für die Attribute "`data-panel-identifier`" und "`data-component-identifier`" | [data-assistant-identifier="KFAS_123456"] h2 { color: orange !important; } | 33 -| data-panel-identifier | Wert ist die technische Bezeichnung des Panels 34 -Elternknoten für das Attribut "`data-component-identifer`" | [data-panel-identifier="Beispielpanel_1"] h2 { color: yellow !important; } | 35 -| data-component-identifier | Wert ist die technische Bezeichnung der Komponente 36 -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; } | 34 +|=Attribut|=Beschreibung|=Beispiel 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; } 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; } 37 37 38 - 39 39 40 -### Reiter "CSS-Generator" 41 41 47 +=== Reiter "CSS-Generator" === 48 + 42 42 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. 43 43 44 44 **Nutzung des CSS-Generators:** ... ... @@ -47,12 +47,16 @@ 47 47 1. Schriftart(en)/Schriftfamilie(n) auswählen und mit den Pfeiltasten in den rechten Bereich verschieben 48 48 1. Schaltfläche **Generieren** anklicken 49 49 50 -{{icon name="far fa-arrow-right" }}{{/icon}}Der CSS-Code ist im Abschnitt **CSS** > **internes CSS** eingetragen.57 +{{icon name="far fa-arrow-right"/}}Der CSS-Code ist im Abschnitt **CSS** > **internes CSS** eingetragen. 51 51 52 -## JavaScript-Einstellungen 53 53 60 +== JavaScript-Einstellungen == 61 + 62 +(% class="box warningmessage" %) 63 +((( 54 54 Änderungen im JavaScript-Bereich können die Barrierefreiheit der Anwendung beeinträchtigen. 65 +))) 55 55 56 56 Im Reiter **JavaScript** der Organisations-Konfiguration kann JavaScript konfiguriert werden, das mandantenweit in allen Assistenten und Panels ausgeführt wird. 57 57 58 -Weitere Informationen zu JavaScript in MACH formsolutions finden Sie im Artikel [[JavaScript-Konfiguration|Main.05_Assistenten.04_Assistentenbauoberfläche.15_JavaScript]].69 +Weitere Informationen zu JavaScript in MACH formsolutions im Artikel [[JavaScript-Konfiguration>>Main.05_Assistenten.04_Assistentenbauoberfläche.15_JavaScript]].