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

Zusammenfassung

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

Details

Seiteneigenschaften

Titel

...	...	@@ -1,1 +1,1 @@
1		-CSS-Einstellungen für Assistenten / JavaScipt
	1	+CSS-Einstellungen für Assistenten / JavaScript

Inhalt

...	...	@@ -1,34 +1,36 @@
1		-In
	1	+**Inhaltsverzeichnis:**
2	2
	3	+{{toc start="2"/}}
	4	+
3	3	## CSS-Einstellungen für Assistenten
4	4
5		-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.
	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.
6	6	Die Einstellungen werden zentral verwaltet und sind für alle Assistenten gültig.
7	7
8		-oder JavaScript im Formulareditor zu hinterlegen. Hierzu steht die Schaltfläche „Administration“ in der [[Hauptwerkzeugleiste|Main.05_Assistenten.01_Hauptwerkzeugleiste]] zur Verfügung. Nach der Betätigung öffnet sich die Eingabemaske „Organisations-Konfiguration“ in der die CSS-Anweisungen oder das JavaScript mittels verschiedenen Möglichkeiten hinterlegt werden kann.
	10	+Änderungen im CSS-Bereich können die Barrierefreiheit der Anwendung beeinträchtigen.
9	9
10		-> {{icon name="far fa-info-circle" size="3"/}} _**Hinweis:**_
	12	+### Organisations-Konfiguration aufrufen
11	11
12		-1. Nur Benutzer die das [[Benutzerrecht|Main.07_Einstellungen-Fachadministration.02_Benutzer.01_Benutzerrollen]] „Layout verwalten“ besitzen, steht diese Funktion zur Verfügung.
	14	+**Voraussetzung:** Benutzerrecht **Layout verwalten**
13	13
14		-## Rubrik „CSS“
	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]]
15	15
16		-> {{icon name="far fa-info-circle" size="3"/}} _**Hinweis:**_ Sofern Sie kundespezifische Änderungen im CSS- oder JavaScript-Bereich vornehmen, kann dies die Barrierefreiheit der Anwendung beeinträchtigen.
	18	+{{icon name="far fa-arrow-right"}}{{/icon}}Der Dialog **Organisations-Konfiguration** öffnet sich.
17	17
18		-### Externes CSS (URL)
	20	+### Reiter CSS
19	19
20		-In der Eingabemaske „Organisations-Konfiguration“ besteht die Möglichkeit, in dem Eingabefeld ein externes CSS über eine URL zu hinterlegen.
	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**).
21	21
22		-### Internes CSS
	24	+Im Feld **data-assistant-identifierexternes CSS (URL)** kann die Adresse einer gültigen CSS-Datei eingetragen werden, auf die der Formularserver über das Internet Zugriff hat.
	25	+Beim Feld **internes CSS** können alle gängigen CSS-Regeln verwendet werden.
23	23
24		-Weiterhin besteht die Möglichkeit, direkt in dem Eingabefeld „internes CSS“ den Quellcode der CSS-Anweisungen zu hinterlegen. Im Editor können alle gängigen CSS Regeln verwendet werden. Zusätzlich stellen wir die Möglichkeit bereit den Assistenten, einzelne Panels oder einzelne Komponenten über entsprechende Attribute anzusprechen:
	27	+Über Attribute können bestimmte Assistenten, Panels oder Komponenten angesprochen werden.
25	25
26		-* **data-assistant-identifier**
27		-Dieses Attribut enthält als Wert die jeweilige Assistentennummer und kann dazu verwendet werden das CSS assistentenspezifisch zu gestalten. Das Attribut wird als Elternknoten für die Attribute "data-panel-identifier" und "data-component-identifier" dargestellt.
28		-* **data-panel-identifier**
29		-Dieses Attribut enthält als Wert die jeweilige technische Bezeichnung des Panels. Das Attribut wird als Elternknoten für das Attribut "data-component-identifer" dargestellt.
30		-* **data-component-identifier**
31		-Dieses Attribut enthält als Wert die jeweilige technische Bezeichnung der Komponente. 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_
	29	+| ------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------- |
	30	+| Attribut | | Beispiel |
	31	+| data-assistant-identifier | Dieses Attribut enthält als Wert die jeweilige Assistentennummer und kann dazu verwendet werden das CSS assistentenspezifisch zu gestalten. Das Attribut wird als Elternknoten für die Attribute "data-panel-identifier" und "data-component-identifier" dargestellt. | [data-assistant-identifier="KFAS_123456"] h2 { color: orange !important; } |
	32	+| data-panel-identifier | Dieses Attribut enthält als Wert die jeweilige technische Bezeichnung des Panels. Das Attribut wird als Elternknoten für das Attribut "data-component-identifer" dargestellt. | [data-panel-identifier="Beispielpanel_1"] h2 { color: yellow !important; } |
	33	+| data-component-identifier | Dieses Attribut enthält als Wert die jeweilige technische Bezeichnung der Komponente. 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; } |
32	32
33	33	**Beispiel Attribute**
34	34
...	...	@@ -36,7 +36,7 @@
36	36
37	37	#### Beispiel einer CSS Einstellung
38	38
39		-1. Beispiel: Im nachfolgenden Beispiel wurde mittels des CSS eingestellt, dass die Pflichtangaben mittels einem roten Quadrat ausgewiesen werden.![[Beispiel eines CSS im Assistenten|@CSSBeispiel.jpg]]
	41	+1. Beispiel: Im nachfolgenden Beispiel wurde mittels des CSS eingestellt, dass die Pflichtangaben mittels einem roten Quadrat ausgewiesen werden.
40	40	1. Beispiel: Mit dem nachfolgenden CSS-Beispiel werden die Platzierung der Schaltflächen „Abbruch“ und „Weiter“ vertauscht.`@media(min-width: 60em){ .fs-submitgroup
41	41
42	42	{ float: right; padding: 0 0 0 10px; } } .fs-exitButton, .fs-exitNoScriptButton