Änderungen von Dokument CSS-Einstellungen für Assistenten / JavaScript
Zuletzt geändert von MACH formsolutions am 15.10.2025
Von Version 433.1
bearbeitet von MACH formsolutions
am 15.10.2025
am 15.10.2025
Änderungskommentar:
Es gibt keinen Kommentar für diese Version
Auf Version 432.1
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 - XWiki2.11 +Markdown 1.2 - Inhalt
-
... ... @@ -2,40 +2,43 @@ 2 2 3 3 {{toc start="2"/}} 4 4 5 - ==CSS-Einstellungen für Assistenten==5 +## 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 10 Änderungen im CSS-Bereich können die Barrierefreiheit der Anwendung beeinträchtigen. 11 11 12 - ===Organisations-Konfiguration aufrufen===12 +### Organisations-Konfiguration aufrufen 13 13 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.[[image:Main.05_Assistenten.01_Hauptwerkzeugleiste.WebHome@HauptwerkzeugleisteCSS.jpg||alt="Schaltfläche Administration"]]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]] 17 17 18 -{{icon name="far fa-arrow-right"/}}Der Dialog **Organisations-Konfiguration** öffnet sich. 18 +{{icon name="far fa-arrow-right"}}{{/icon}}Der Dialog **Organisations-Konfiguration** öffnet sich. 19 19 20 - ===Reiter "CSS"===20 +### Reiter "CSS" 21 21 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. 24 +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 -|data-assistant-identifier|Wert ist die Artikelnummer 31 -|Elternknoten für die Attribute "{{code language="none"}}data-panel-identifier{{/code}}" und "{{code language="none"}}data-component-identifier{{/code}}"|[data-assistant-identifier="KFAS_123456"] h2 { color: orange !important; } 32 -|data-panel-identifier|Wert ist die technische Bezeichnung des Panels 33 -|Elternknoten für das Attribut "{{code language="none"}}data-component-identifer{{/code}}"|[data-panel-identifier="Beispielpanel_1"] h2 { color: yellow !important; } 34 -|data-component-identifier|Wert ist die technische Bezeichnung der Komponente 35 -|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//|[data-component-identifier="Textfeld (einzeilig)"] input{ border-color: orange !important; } 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; } | 36 36 37 - ===Reiter "CSS-Generator" ===38 + 38 38 40 +### Reiter "CSS-Generator" 41 + 39 39 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. 40 40 41 41 **Nutzung des CSS-Generators:** ... ... @@ -44,12 +44,12 @@ 44 44 1. Schriftart(en)/Schriftfamilie(n) auswählen und mit den Pfeiltasten in den rechten Bereich verschieben 45 45 1. Schaltfläche **Generieren** anklicken 46 46 47 -{{icon name="far fa-arrow-right"/}}Der CSS-Code ist im Abschnitt **CSS** > **internes CSS** eingetragen. 50 +{{icon name="far fa-arrow-right"}}{{/icon}}Der CSS-Code ist im Abschnitt **CSS** > **internes CSS** eingetragen. 48 48 49 - ==JavaScript-Einstellungen==52 +## JavaScript-Einstellungen 50 50 51 51 Änderungen im JavaScript-Bereich können die Barrierefreiheit der Anwendung beeinträchtigen. 52 52 53 53 Im Reiter **JavaScript** der Organisations-Konfiguration kann JavaScript konfiguriert werden, das mandantenweit in allen Assistenten und Panels ausgeführt wird. 54 54 55 -Weitere Informationen zu JavaScript in MACH formsolutions finden Sie im Artikel [[JavaScript-Konfiguration >>Main.05_Assistenten.04_Assistentenbauoberfläche.15_JavaScript]].58 +Weitere Informationen zu JavaScript in MACH formsolutions finden Sie im Artikel [[JavaScript-Konfiguration|Main.05_Assistenten.04_Assistentenbauoberfläche.15_JavaScript]].