Wiki-Quellcode von Leitfaden-Plugin

Zeige letzte Bearbeiter
1 [[**Plugin-Download**>>url:https://customer.formcycle.eu/index.php/apps/files/?dir=/FORMCYCLE%20-%20Plugins%20Customer/Leitfaden%3Aleitfaden-resources&fileid=25265||rel="noopener noreferrer" target="_blank"]] (erfordert Anmeldung)
2
3 {{content/}}
4
5 {{velocity}}
6 ##{{info}}
7 ##Hinweis, dass das für bayr. LK ist.
8 ##Über das //???? Plugin// werden Möglichkeiten zur Einbindung der AKDB Basisdienste **Bürgerkonto** und **Postkorb** in {{formcycle/}} bereitgestellt.
9 ##{{/info}}
10 ##{{figure image="formular_vorlage.png"}}
11 ##TBD
12 ##{{/figure}}
13 {{/velocity}}
14
15 == Vorbemerkungen ==
16
17 In dem vom Bayerischen Landkreistag und dem Bayerischen Staatsministerium für Digitales herausgegebenen [[//Leitfaden zur nutzerorientierten und einheitlichen Formulargestaltung für die bayerischen Landkreise//>>https://www.stmd.bayern.de/wp-content/uploads/2020/10/10-2020_Leitfaden-nutzerfreundlicher-Formulargestaltung.pdf||target="_blank"]] werden für die Umsetzung von Online-Formularen konkrete Vorschläge gemacht und Empfehlungen gegeben.
18
19 Das //Leitfaden-Plugin// stellt Funktionalitäten zur Verfügung, welche im Leitfaden beschrieben wurden, aber nicht standardmäßig in {{formcycle/}} umsetzbar sind.
20
21 {{velocity}}
22 ##Im folgenden wird nach allgemeinen Installationshinweisen zunächst beschrieben, wie die einzelnen Punkte im Leitfaden unter Zuhilfenahme des Plugins [[umgesetzt werden können>>TODO]]. Danach folgt eine detaillierte Beschreibung der durch das Plugin vorgenommenen Anpassungen an der Darstellung von Formularen und der durch das Plugin hinzugefügten [[Widgets>>Formcycle.FormDesigner.FormElements.Widgets]] und Funktionalitäten im Punkt [[XXX>>TODO]].
23 {{/velocity}}
24
25 == Hinweis zur Verwendung des Leitfaden-Plugins zusammen mit dem Theme-Konfigurator-Plugin ==
26
27 Das //Leitfaden-Plugin// nimmt wie auch das [[Theme-Konfigurator-Plugin>>Formcycle.PluginDocumentation.ThemeConfiguratorPlugin]] Änderungen am Aussehen von Formularen vor. Daher kann es beim parallelen Betrieb von beiden Plugins zu Konflikten kommen, wodurch die Darstellungsoptionen des Leitfaden-Plugins eventuell überschrieben werden. Daher sollte bei einem parallen Einsatz beider Plugins darauf geachtet werden, dass möglichst nur Dinge durch das //Theme-Konfigurator-Plugin// angepasst werden, bei denen nicht auch durch das //Leitfaden-Plugin// Veränderungen vorgenommen werden, wie zum Beispiel das Logo.
28
29 == Installation ==
30
31 Das Plugin kann als Mandant-Plugin oder System-Plugin installiert werden. Eine Anleitung zur Installation von Plugins finden Sie [[hier>>doc:Formcycle.UserInterface.Client.Plugins.WebHome]].
32
33 == Technische Dokumentation des Leitfaden-Plugins ==
34
35 Das Plugin stellt Ressourcen zur Verfügung, welche in Formularen automatisch verwendet werden und fügt neue Validierungsreglen und Widgets hinzu. Diese werden im folgenden genauer beschrieben.
36
37 === Designanpassungen ===
38
39 Das //Leitfaden-Plugin// stellt folgende das Aussehen von Formularen beeinflussende Inhalte bereit und bindet diese automatisch in alle Formulare ein:
40
41 ; CSS-Designanpassungen
42 : Optische Anpassungen am Formular wie das Aussehen der Labels von Elementen, Upload-Elemente, Mussfeld-Sterne, usw.
43
44 ; Roboto-Schriftart
45 : Das Plugin stellt diese Schriftart als Ressource auf dem Server bereit und verwendet diese in den Formularen für alle Texte.
46
47 === Validatoren ===
48
49 Durch das Plugin werden 4 neue [[Validatoren>>Formcycle.FormDesigner.CodingPanel.Validators]] bereitgestellt. Zu beachten ist allen, dass sie nur überprüfen können, ob eine Eingabe formal dem Aufbau des jeweiligen Wertetyps entspricht. Es kann aber nicht überprüft werden, ob es tatsächlich einen solchen Wert, wie zum Beispiel eine konkrete BIC, gibt. Folgende Regeln werden hinzugefügt:
50
51 ; xm-vdt-bic
52 : Validierung für Eingabefelder, in die der Benutzer ein Geschäftskennzeichen (SWIFT-BIC) für Kontodaten eingibt
53
54 ; xm-vdt-iban
55 : Validierung für Eingabefelder, in die der Benutzer eine Bankverbindung in Schreibweise der internationalen Bankkontonummer (IBAN) eingibt
56
57 ; xm-vdt-iban-de
58 : Validierung für Eingabefelder, in die der Benutzer eine Bankverbindung in Schreibweise der internationalen Bankkontonummer (IBAN) eingibt
59
60 ; xm-vdt-steuerid
61 : Validierung für Eingabefelder, in die der Benutzer eine steuerliche Identifikationsnummer nach § 139b, Abgabenordnung eingibt
62
63 === Formularwidget: Hinweis ===
64 {{figure image="leitfaden_widget_hinweis.png" clear="h3"}}
65 Symbol des //Hinweis//-Widgets und Aussehen im Formular
66 {{/figure}}
67 Mit diesem Widget können farblich abgehobene Hinweistexte leichter im Formular platziert werden. Die Konfigurationsoptionen entsprechen denen von [[Text-Elementen>>Formcycle.FormDesigner.FormElements.Text]].
68
69 === Formularwidget: Kontaktdaten ===
70 {{figure image="leitfaden_widget_kontaktdaten.png" clear="h3"}}
71 Symbol des //Kontaktdaten//-Widgets und Aussehen im Formular
72 {{/figure}}
73 Mit diesem Widget können Kontaktinformationen leicht im Formular eingebunden und in einer leitfadengemäßen Form dargestellt werden.
74
75 === Formularwidget: Unsichtbarer Container ===
76 {{figure image="leitfaden_widget_unsichtbarer_container.png" clear="h3"}}
77 Symbol des //Unsichtbarer Container//-Widgets
78 {{/figure}}
79 Mit diesem Widget können Formularinhalte wie in einem normalen [[Container>>Formcycle.FormDesigner.FormElements.Container]] gruppiert werden, der Container ist jedoch unsichtbar. Dadurch ist es leichter möglich Dinge wie Sichtbarkeitsbedingungen an mehreren Formularelementen gleichzeitig zu konfigurieren, da die entsprechenden Einstellungen dann nur noch an dem die Elemente beinhaltenden //Unsichtbaren Container// vorgenommen werden müssen.
80
81 === Zusammenfassung ===
82 {{figure image="leitfaden_zusammenfassung_beispiel.png" clear="h4"}}
83 Beispiel für das Aussehen einer Zusammenfassung mit in [[Fieldsets>>Formcycle.FormDesigner.FormElements.Fieldset]] gruppierten Formularelementen.
84 {{/figure}}
85 Durch das Plugin werden im {{designer/}} zusätzliche Konfigurationsmöglichkeiten hinzugefügt, welche es ermöglichen, auf der letzten im Formular vorhandenen [[Seite>>Formcycle.FormDesigner.FormElements.Page]] eine Zusammenfassung anzuzeigen. Auf dieser Seite wird zuerst die Zusammenfassung aller vorangegangen Seiten angezeigt und darunter alle Elemente, welche im {{designer/}} auf dieser Seite platziert wurden.
86
87 In der Zusammenfassung tauchen nur die Formularelemente auf, welche sichtbar sind und einen Wert haben. Das bedeutet, dass leere Eingabefelder nicht in der Zusammenfassung aufgeführt werden. Werden Formularfelder in einem [[Fieldset>>Formcycle.FormDesigner.FormElements.Fieldset]] platziert, werden diese auch in der Zusammenfassung als Block dargestellt, in welchem oben rechts ein Link //Angaben ändern// angezeigt wird. Mit diesem kann im Formular zurück zum jeweiligen Fieldset gesprungen werden, um eingegebene Daten zu korrigieren. Diese Funktionalität ist nur bei Fieldsets, aber nicht bei [[Containern>>Formcycle.FormDesigner.FormElements.Container]] und Unsichtbaren Containern vorhanden.
88
89 Um die Zusammenfassung nutzen zu können, muss bei einer [[Schaltfläche>>Formcycle.FormDesigner.FormElements.Button]] //Zusammenfassung + prüfen// als Aktion konfiguriert werden. Dadurch wird beim klicken auf diese Schaltfläche auf die Zusammenfassungsseite gesprungen.
90
91 ==== Konfiguration von Formularelementen ====
92 {{figure image="leitfaden_zusammenfassung_elemente.png" clear="h4"}}
93 Konfigurationsmöglichkeiten für die Sichtbarkeit eines Formualrelements in der Zusammenfassung
94 {{/figure}}
95 Über die unter //Darstellung// zu findende Option //Bei Zusammenfassung// kann die Sichtbarkeit von Formularelementen in der Zusamenfassung gesteuert werden.
96
97 Diese Option wird bei allen [[Formularelementen>>Formcycle.FormDesigner.FormElements.WebHome]] und [[Widgets>>Formcycle.FormDesigner.FormElements.Widgets]] angezeigt, ist aber nur sinnvoll bei Bildern und bei Formularelementen, in denen der Nutzer eine Eingabe tätigen kann. Andere Elemente wie Schaltflächen werden generell nicht in der Zusammenfassung angezeigt.
98
99 Folgende Optionen stehen zur Auswahl:
100
101 ; Sichtbarkeit automatisch
102 : Das Element wird in der Zusammenfassung angezeigt, wenn es sichtbar ist und einen Wert hat oder vom Typ [[Bild>>Formcycle.FormDesigner.FormElements.Image]] ist. Standmäßig ist diese Option ausgewählt
103
104 ; nicht sichtbar
105 : Das element wird nicht in der Zusammenfassung angezeigt
106
107
108 ==== Konfiguration der Schaltfläche ====
109 {{figure image="leitfaden_zusammenfassung_buttons.png" clear="h4"}}
110 Aktion //Leitfaden-Plugin// in den Konfigurationseinstellungen einer Schaltfläche
111 {{/figure}}
112 Das //Leitfaden-Plugin// fügt für [[Schaltflächen>>Formcycle.FormDesigner.FormElements.Button]] eine neue Aktion mit dem Namen //Zusammenfassung + prüfen// hinzu. Diese Aktion springt dabei immer auf die letzte im Formular vorhandene Seite.
113
114 ==== Überschrift auf der Zusammenfassungsseite ====
115
116 Um mit standardmäßig in {{formcycle/}} vorhandenen Mitteln auf der Zusammenfassungsseite über der Zusammenfassung Informationen wie eine Überschrift oder einen Hinweis anzeigen zu können, muss für die letzte Formularseite
117
118 Falls dies beispielsweise nur eine Einfache Nachricht wie im Beispiel des Leitfadens sein soll und die standardmäßig verwendeten Schriftgrößen dafür zu groß sind, kann per //CSS//
119 Dies könnte für eine Zusammenfassungsseite mit dem technischen Namen //pZusammenfassung// bespielsweise wie folgt aussehen:
120
121 {{code language="css"}}
122 .CXPage[xn="pZusammenfassung"] .header h1 {
123 font-size: 20px; /* Setzt die Schriftgröße des Titels der Zusammenfassungsseite auf 20 Pixel */
124 }
125 .CXPage[xn="pZusammenfassung"] .header h2 {
126 font-size: 14px; /* Setzt die Schriftgröße des Untertitels der Zusammenfassungsseite auf 14 Pixel */
127 font-weight: normal; /* Sorgt dafür, dass der Text des Untertitel normal und nicht fett dargestellt wird */
128 }
129 {{/code}
130
131 {{velocity}}
132 ##== Weitere Anpassungen am Aussehen der Formulare ==
133 ##
134 ##-> jenseits von Leitfaden
135 ##
136 ##Logo einbinden als BILD oder per CSS. -> allgemeine links
137 ##Hier empfihlt sich
138 {{/velocity}}

Navigation

Copyright 2000-2025