... |
... |
@@ -15,7
+15,7 @@ |
15 |
15 |
|
16 |
16 |
== Vorbemerkungen == |
17 |
17 |
|
18 |
|
-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 |
+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||rel="noopener noreferrer" target="_blank"]] werden für die Umsetzung von Online-Formularen konkrete Vorschläge gemacht und Empfehlungen gegeben. |
19 |
19 |
|
20 |
20 |
Das //Leitfaden-Plugin// stellt Funktionalitäten zur Verfügung, welche im Leitfaden beschrieben wurden, aber nicht standardmäßig in {{formcycle/}} umsetzbar sind. |
21 |
21 |
|
... |
... |
@@ -137,10
+137,12 @@ |
137 |
137 |
* Durch das //Leitfaden-Plugin// werden sie standardmäßig geöffnet werden, wenn das Feld ausgewählt wird |
138 |
138 |
|
139 |
139 |
=== #18 Biete so oft wie möglich Auswahlfelder an === |
|
140 |
+ |
140 |
140 |
{{velocity}} |
141 |
141 |
##* Mehrstufige Abfrage können mit Radiobuttons für die wichtigsten Auswahloptionen und Auswahlfeldern für sonstige Auswahlen umgesetzt werden |
142 |
142 |
##, bei den können mit {{formcycle/}} einfach mit [[Sichtbarkeitsbedingungen>>Formcycle.FormDesigner.ElementProperties.Constraints]] umgesetzt werden. |
143 |
143 |
{{/velocity}} |
|
145 |
+ |
144 |
144 |
* Dropdown-Auswalelemente sind eine Ansichtsform des Elementtyps [[Auswahl>>Formcycle.FormDesigner.FormElements.Selection]] |
145 |
145 |
* Wenn Abfragen (z.B. Anrede, Staatsbürgerschaft, etc.) häufiger in Formularen vorkommen, können diese als [[Datenquelle>>Formcycle.UserInterface.Data.Sources]] hinterlegt und dadurch einfach eingebunden und für alle Formulare zentral gepflegt werden. |
146 |
146 |
|
... |
... |
@@ -175,7
+175,6 @@ |
175 |
175 |
* Analog kann für Vorgänge, bei denen der Bürger sich mit der AKDB authentifiziert hat, [[eine Nachricht an den AKDB-Postkorb gesendet werden>>Formcycle.PluginDocumentation.AkdbBuergerkontoServicePlugin||anchor="HAKDBPostkorbanbindunginderStatusverarbeitung"]] |
176 |
176 |
* Über Statusverarbeitung kann zum Beispiel mit einem [[Zeitgesteuerten Statuswechsel>>Formcycle.UserInterface.MyForms.WorkflowProcessing.States||anchor="HZeigesteuerterStatuswechsel"]] nach einer definierten Zeitspanne in einen anderen Status gewechselt werden, in welchem dem Bürger eine automatische Statusinformation zugesendet wird |
177 |
177 |
|
178 |
|
- |
179 |
179 |
== Technische Dokumentation des Leitfaden-Plugins == |
180 |
180 |
|
181 |
181 |
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. |
... |
... |
@@ -207,46
+207,98 @@ |
207 |
207 |
: Validierung für Eingabefelder, in die der Benutzer eine steuerliche Identifikationsnummer nach § 139b, Abgabenordnung eingibt |
208 |
208 |
|
209 |
209 |
=== Formularwidget: Hinweis === |
|
211 |
+ |
210 |
210 |
{{figure image="leitfaden_widget_hinweis.png" clear="h3"}} |
211 |
211 |
Symbol des //Hinweis//-Widgets und Aussehen im Formular |
212 |
212 |
{{/figure}} |
|
215 |
+ |
|
216 |
+ |
|
217 |
+{{html wiki="true"}} |
|
218 |
+<div class='xm-figure xm-float-right xm-clear-h3' data-alt='Symbol des Hinweis-Widgets und Aussehen im Formular'><div class='xm-figure-inner' style='width:310px'>{{lightbox image='leitfaden_widget_hinweis.png' width='300' group='$height' group='$group' title='Symbol des Hinweis-Widgets und Aussehen im Formular'/}}<div class='xm-figure-caption'>Symbol des //Hinweis//-Widgets und Aussehen im Formular</div></div></div> |
|
219 |
+{{/html}} |
|
220 |
+ |
|
221 |
+ |
213 |
213 |
Mit diesem Widget können farblich abgehobene Hinweistexte leichter im Formular platziert werden. Die Konfigurationsoptionen entsprechen denen von [[Text-Elementen>>Formcycle.FormDesigner.FormElements.Text]]. |
214 |
214 |
|
|
224 |
+ |
215 |
215 |
=== Formularwidget: Kontaktdaten === |
|
226 |
+ |
216 |
216 |
{{figure image="leitfaden_widget_kontaktdaten.png" clear="h3"}} |
217 |
217 |
Symbol des //Kontaktdaten//-Widgets und Aussehen im Formular |
218 |
218 |
{{/figure}} |
|
230 |
+ |
|
231 |
+ |
|
232 |
+{{html wiki="true"}} |
|
233 |
+<div class='xm-figure xm-float-right xm-clear-h3' data-alt='Symbol des Kontaktdaten-Widgets und Aussehen im Formular'><div class='xm-figure-inner' style='width:310px'>{{lightbox image='leitfaden_widget_kontaktdaten.png' width='300' group='$height' group='$group' title='Symbol des Kontaktdaten-Widgets und Aussehen im Formular'/}}<div class='xm-figure-caption'>Symbol des //Kontaktdaten//-Widgets und Aussehen im Formular</div></div></div> |
|
234 |
+{{/html}} |
|
235 |
+ |
|
236 |
+ |
219 |
219 |
{{figure image="leitfaden_widget_kontaktdaten_quelle.png" clear="h3"}} |
220 |
220 |
Verwendung einer //CSV-Datenquelle// für den Inhalt des //Kontaktdaten//-Widgets |
221 |
221 |
{{/figure}} |
|
240 |
+ |
|
241 |
+ |
|
242 |
+{{html wiki="true"}} |
|
243 |
+<div class='xm-figure xm-float-right xm-clear-h3' data-alt='Verwendung einer CSV-Datenquelle für den Inhalt des Kontaktdaten-Widgets'><div class='xm-figure-inner' style='width:310px'>{{lightbox image='leitfaden_widget_kontaktdaten_quelle.png' width='300' group='$height' group='$group' title='Verwendung einer CSV-Datenquelle für den Inhalt des Kontaktdaten-Widgets'/}}<div class='xm-figure-caption'>Verwendung einer //CSV-Datenquelle// für den Inhalt des //Kontaktdaten//-Widgets</div></div></div> |
|
244 |
+{{/html}} |
|
245 |
+ |
|
246 |
+ |
222 |
222 |
Mit diesem Widget können Kontaktinformationen leicht im Formular eingebunden und in einer leitfadengemäßen Form dargestellt werden. Unter //Optionen// kann der Inhalt des Widgets direkt konfiguriert werden. |
223 |
223 |
|
224 |
|
-Der Inhalt des Widgets kann auch aus einer [[//CSV-Datenquelle//>>Formcycle.UserInterface.Data.Sources||anchor="HCSV"]] entnommen werden. Diese muss die einen Header aufweisen und in diesem eine Spalte mit der Bezeichung //id//. |
225 |
225 |
|
226 |
|
-Die Zeile in der Datenquelle, aus der die Daten entnommen werden, wird über den in //ID Wert// festgelegten Wert ermittelt, indem in der Tabelle nach einer Zeile mit diesem Wert in der //id//-Spalte gesucht wird. Bei den anderen Konfigurationsoptionen werden jeweils die Spaltenbezeichnungen angegeben, aus denen die Daten entnommen werden sollen. |
|
250 |
+Der Inhalt des Widgets kann auch aus einer [[//CSV-Datenquelle//>>Formcycle.UserInterface.Data.Sources||anchor="HCSV"]] bezogen werden. Dabei ist zu beachten, dass im Header eine Spalte mit der Bezeichnung //id// vorhanden ist. Diese dient als Bezugspunkt zur Ermittlung der Daten. Das Gleiche gilt für [[DB-Abfragen>>doc:Formcycle.UserInterface.Data.DBQueries||target="_blank"]]. |
227 |
227 |
|
|
252 |
+Die Zeile in der Datenquelle, aus der die Daten gelesen werden, wird über den eingetragenen //ID Wert// unter Optionen ermittelt und muss einem Wert in der Tabelle entsprechen. Bei den anderen Konfigurationsoptionen werden jeweils die Spaltenbezeichnungen angegeben, aus denen die Daten entnommen werden sollen. |
|
253 |
+ |
228 |
228 |
=== Formularwidget: Unsichtbarer Container === |
|
255 |
+ |
229 |
229 |
{{figure image="leitfaden_widget_unsichtbarer_container.png" clear="h3"}} |
230 |
230 |
Symbol des //Unsichtbarer Container//-Widgets |
231 |
231 |
{{/figure}} |
|
259 |
+ |
|
260 |
+ |
|
261 |
+{{html wiki="true"}} |
|
262 |
+<div class='xm-figure xm-float-right xm-clear-h3' data-alt='Symbol des Unsichtbarer Container-Widgets'><div class='xm-figure-inner' style='width:310px'>{{lightbox image='leitfaden_widget_unsichtbarer_container.png' width='300' group='$height' group='$group' title='Symbol des Unsichtbarer Container-Widgets'/}}<div class='xm-figure-caption'>Symbol des //Unsichtbarer Container//-Widgets</div></div></div> |
|
263 |
+{{/html}} |
|
264 |
+ |
|
265 |
+ |
232 |
232 |
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. |
233 |
233 |
|
|
268 |
+ |
234 |
234 |
=== Zusammenfassung === |
|
270 |
+ |
235 |
235 |
{{figure image="leitfaden_zusammenfassung_beispiel.png" clear="h4"}} |
236 |
236 |
Beispiel für das Aussehen einer Zusammenfassung mit in [[Fieldsets>>Formcycle.FormDesigner.FormElements.Fieldset]] gruppierten Formularelementen. |
237 |
237 |
{{/figure}} |
|
274 |
+ |
|
275 |
+ |
|
276 |
+{{html wiki="true"}} |
|
277 |
+<div class='xm-figure xm-float-right xm-clear-h4' data-alt='Beispiel für das Aussehen einer Zusammenfassung mit in Fieldsets gruppierten Formularelementen.'><div class='xm-figure-inner' style='width:310px'>{{lightbox image='leitfaden_zusammenfassung_beispiel.png' width='300' group='$height' group='$group' title='Beispiel für das Aussehen einer Zusammenfassung mit in Fieldsets gruppierten Formularelementen.'/}}<div class='xm-figure-caption'>Beispiel für das Aussehen einer Zusammenfassung mit in [[Fieldsets>>Formcycle.FormDesigner.FormElements.Fieldset]] gruppierten Formularelementen.</div></div></div> |
|
278 |
+{{/html}} |
|
279 |
+ |
|
280 |
+ |
238 |
238 |
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. |
239 |
239 |
|
|
283 |
+ |
240 |
240 |
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. |
241 |
241 |
|
242 |
242 |
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. |
243 |
243 |
|
244 |
244 |
==== Konfiguration von Formularelementen ==== |
|
289 |
+ |
245 |
245 |
{{figure image="leitfaden_zusammenfassung_elemente.png" clear="h4"}} |
246 |
246 |
Konfigurationsmöglichkeiten für die Sichtbarkeit eines Formularelements in der Zusammenfassung |
247 |
247 |
{{/figure}} |
|
293 |
+ |
|
294 |
+ |
|
295 |
+{{html wiki="true"}} |
|
296 |
+<div class='xm-figure xm-float-right xm-clear-h4' data-alt='Konfigurationsmöglichkeiten für die Sichtbarkeit eines Formularelements in der Zusammenfassung'><div class='xm-figure-inner' style='width:310px'>{{lightbox image='leitfaden_zusammenfassung_elemente.png' width='300' group='$height' group='$group' title='Konfigurationsmöglichkeiten für die Sichtbarkeit eines Formularelements in der Zusammenfassung'/}}<div class='xm-figure-caption'>Konfigurationsmöglichkeiten für die Sichtbarkeit eines Formularelements in der Zusammenfassung</div></div></div> |
|
297 |
+{{/html}} |
|
298 |
+ |
|
299 |
+ |
248 |
248 |
Über die unter //Darstellung// zu findende Option //Bei Zusammenfassung// kann die Sichtbarkeit von Formularelementen in der Zusammenfassung gesteuert werden. |
249 |
249 |
|
|
302 |
+ |
250 |
250 |
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. |
251 |
251 |
|
252 |
252 |
Folgende Optionen stehen zur Auswahl: |
... |
... |
@@ -257,13
+257,21 @@ |
257 |
257 |
; nicht sichtbar |
258 |
258 |
: Das Element wird nicht in der Zusammenfassung angezeigt |
259 |
259 |
|
260 |
|
- |
261 |
261 |
==== Konfiguration der Schaltfläche ==== |
|
314 |
+ |
262 |
262 |
{{figure image="leitfaden_zusammenfassung_buttons.png" clear="h4"}} |
263 |
263 |
Aktion //Leitfaden-Plugin// in den Konfigurationseinstellungen einer Schaltfläche |
264 |
264 |
{{/figure}} |
|
318 |
+ |
|
319 |
+ |
|
320 |
+{{html wiki="true"}} |
|
321 |
+<div class='xm-figure xm-float-right xm-clear-h4' data-alt='Aktion Leitfaden-Plugin in den Konfigurationseinstellungen einer Schaltfläche'><div class='xm-figure-inner' style='width:310px'>{{lightbox image='leitfaden_zusammenfassung_buttons.png' width='300' group='$height' group='$group' title='Aktion Leitfaden-Plugin in den Konfigurationseinstellungen einer Schaltfläche'/}}<div class='xm-figure-caption'>Aktion //Leitfaden-Plugin// in den Konfigurationseinstellungen einer Schaltfläche</div></div></div> |
|
322 |
+{{/html}} |
|
323 |
+ |
|
324 |
+ |
265 |
265 |
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. |
266 |
266 |
|
|
327 |
+ |
267 |
267 |
==== Überschrift auf der Zusammenfassungsseite ==== |
268 |
268 |
|
269 |
269 |
Um mit standardmäßig in {{formcycle/}} vorhandenen Mitteln auf der letzten Seite über der Zusammenfassung Informationen wie zum Beispiel eine Überschrift oder einen Hinweis anzuzeigen, kann auf der für die Zusammenfassung verwendeten letzten Formularseite ein Titel oder/und Untertitel definiert werden. |