Änderungen von Dokument CSS-Einstellungen für Assistenten / JavaScript

Zusammenfassung

• Seiteneigenschaften (2 geändert, 0 hinzugefügt, 0 gelöscht)

Details

Seiteneigenschaften

Syntax

...	...	@@ -1,1 +1,1 @@
1		-Markdown 1.2
	1	+XWiki 2.1

Inhalt

...	...	@@ -2,43 +2,40 @@
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.![[Schaltfläche Administration|Main.05_Assistenten.01_Hauptwerkzeugleiste.WebHome@HauptwerkzeugleisteCSS.jpg]]
	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"]]
17	17
18		-{{icon name="far fa-arrow-right"}}{{/icon}}Der Dialog **Organisations-Konfiguration** öffnet sich.
	18	+{{icon name="far fa-arrow-right"/}}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		-| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------- |
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; } |
	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; }
37	37
38		-
	37	+=== Reiter "CSS-Generator" ===
39	39
40		-### Reiter "CSS-Generator"
41		-
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,12 @@
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.
	47	+{{icon name="far fa-arrow-right"/}}Der CSS-Code ist im Abschnitt **CSS** > **internes CSS** eingetragen.
51	51
52		-## JavaScript-Einstellungen
	49	+== JavaScript-Einstellungen ==
53	53
54	54	Änderungen im JavaScript-Bereich können die Barrierefreiheit der Anwendung beeinträchtigen.
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]].
	55	+Weitere Informationen zu JavaScript in MACH formsolutions finden Sie im Artikel [[JavaScript-Konfiguration>>Main.05_Assistenten.04_Assistentenbauoberfläche.15_JavaScript]].