Ä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,50 @@
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	+(% 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: [[Artikel JavaScript-Konfiguration>>Main.05_Assistenten.04_Assistentenbauoberfläche.15_JavaScript]]