Wiki-Quellcode von Leitfaden-Plugin

Verstecke letzte Bearbeiter
gru 16.2 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) - {{version major="6" minor="6" patch="10"/}} Bitte beachten Sie, dass das Plugin zwingend {{formcycle/}} in der Version 6.6.10 oder höher benötigt
gru 1.2 2
gru 16.2 3
gru 1.4 4 {{content/}}
gru 1.2 5
gru 1.23 6 {{velocity}}
7 ##{{info}}
8 ##Hinweis, dass das für bayr. LK ist.
gru 1.32 9 ##Über das //???? Plugin// werden Möglichkeiten zur Einbindung der AKDB Basisdienste **Bürgerkonto** und **Postkorb** in {{formcycle/}} bereitgestellt.
gru 1.23 10 ##{{/info}}
gru 4.17 11 ##{{figure image="formular_vorlage.png"}}
12 ##TBD
13 ##{{/figure}}
gru 1.23 14 {{/velocity}}
gru 1.5 15
gru 8.5 16
gru 1.32 17 == Vorbemerkungen ==
gru 1.5 18
sas 15.1 19 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.
gru 1.3 20
gru 1.42 21 Das //Leitfaden-Plugin// stellt Funktionalitäten zur Verfügung, welche im Leitfaden beschrieben wurden, aber nicht standardmäßig in {{formcycle/}} umsetzbar sind.
gru 1.3 22
gru 7.20 23 Im folgenden wird nach allgemeinen Installationshinweisen zunächst beschrieben, wie die einzelnen Punkte im Leitfaden unter Zuhilfenahme des Plugins [[umgesetzt werden können>>||anchor="HUmsetzungvonFormularengemE4DFdesLeitfadens"]]. 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 [[Technische Dokumentation>>||anchor="HTechnischeDokumentationdesLeitfaden-Plugins"]].
gru 1.18 24
gru 1.33 25 == Hinweis zur Verwendung des Leitfaden-Plugins zusammen mit dem Theme-Konfigurator-Plugin ==
gru 1.18 26
gru 7.55 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 parallelen 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.
gru 1.18 28
gru 7.15 29
gru 1.7 30 == Installation ==
gru 1.6 31
gru 8.4 32 {{version major="6" minor="6" patch="10"/}} Das Plugin benötigt mindestens die {{formcycle/}} Version 6.6.10
gru 8.1 33
gru 1.7 34 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]].
gru 1.6 35
gru 7.15 36
gru 7.18 37 == Umsetzung von Formularen gemäß des Leitfadens ==
38
gru 7.60 39 Im Folgenden wird auf die einzelnen Punkte des Leitfadens stichpunktartig eingegangen und gezeigt, wie diese nach der Installation des //Leitfaden-Plugins// in {{formcycle/}} realisiert werden können.
gru 7.18 40
41 === #1 Frage den Bürger als erstes, was er möchte. ===
42
gru 7.53 43 * Diese Anforderung wird dadurch umgesetzt, dass das Formular beim Erstellen bereits entsprechend aufgebaut wird
44 * Dem Bürger können nach der Auswahl des Anliegens über [[Sichtbarkeitsbedingungen>>Formcycle.FormDesigner.ElementProperties.Constraints]] nur diejenigen Seiten und Formularelemente angezeigt werden, die für sein Anliegen notwendig sind
gru 7.18 45
46 === #2 Unterteile dein Formular in sinnvolle Prozessschritte und gebe Orientierung ===
47
48 * Für einen Fortschrittsanzeige kann das kostenfreie [[Widget-Plugin Navigationsleiste>>Formcycle.PluginDocumentation.WidgetXNavigationBar]] verwendet werden
gru 7.52 49 * Das Widget muss entweder je einmal am Anfang von jeder Formularseite oder genau einmal im Header-Bereich (empfohlen) platziert werden
gru 7.51 50 * Details zur Konfiguration des Widgets werden auf der Seite des Plugins genauer [[beschrieben>>Formcycle.PluginDocumentation.WidgetXNavigationBar||anchor="HKonfiguration"]]
gru 7.18 51
52 === #3 Gib dem Bürger eine Übersicht über seine Angaben und verlinke zu den Seiten ===
53
54 * Auf der letzten Seite des Formulars kann mithilfe des //Leitfaden-Plugins// eine Zusammenfassung angezeigt werden
55 * Bei der Schaltfläche, mit der zu dieser letzten Seite gewechselt wird, muss dafür //Zusammenfassung + prüfen// als Aktion festgelegt werden
gru 7.50 56 * In der Zusammenfassung werden für Fieldsets die Verlinkungen zu den entsprechenden Seiten gemäß des Leitfadens automatisch generiert
gru 7.33 57 * Mehr Informationen finden sich unter dem Punkt [[Zusammenfassung>>||anchor="HZusammenfassung"]]
gru 7.18 58
59 === #4 Biete jederzeit die Möglichkeit an Kontakt aufzunehmen ===
60
gru 7.49 61 * Das //Leitfaden-Plugin// bietet hierfür ein Widget [[Kontaktdaten>>||anchor="HFormularwidget:Kontaktdaten"]] an, mit dem die Kontaktdaten einfach eingepflegt werden können
gru 7.18 62 * Diese können beispielsweise in den Header und/oder Footer platziert werden
63
64 === #5 Gib dem Bürger die Möglichkeit sich zu erklären ===
65
66 * Bemerkungsfelder können an geeigneten Stellen als [[Textarea>>Formcycle.FormDesigner.FormElements.Textarea]] hinzugefügt werden
gru 7.36 67 * Durch Anpassung der Option //Max. Zeichen// unter [[Bedingungen>>Formcycle.FormDesigner.FormElements.Textarea||anchor="HBedingungen"]] und //Höhe (in px)// unter [[Darstellung>>Formcycle.FormDesigner.FormElements.Textarea||anchor="HDarstellung"]] kann das Bemerkungsfeld individuell an die Situation angepasst werden
gru 7.18 68
69 === #6 Komme den Fragen deiner Bürger zuvor ===
70
gru 7.48 71 * Das //Leitfaden-Plugin// bietet hierfür ein Widget [[Hinweis>>||anchor="HFormularwidget:Hinweis"]] an, mit dem fertig gesetzte Hilfeblöcke einfach in Formulare eingepflegt werden können
gru 7.37 72 * Die Konfiguration entspricht dabei der eines normalen [[Text-Elements>>Formcycle.FormDesigner.FormElements.Text]]
gru 7.18 73
74 === #7 Positioniere die Feldbezeichnungen oberhalb des Feldes ===
75
gru 7.58 76 * Die Position von Feldbezeichnungen ist in {{formcycle/}} standardmäßig über dem Element
gru 7.48 77 * Bei Formularelementen kann die Positionierung unter Elementeigenschaften [[Label>>Formcycle.FormDesigner.ElementProperties.Label]] angepasst werden
gru 7.18 78
79 === #8 Bilde sinnvolle visuelle Hierarchien ===
80
81 * Die in diesem Punkt angeregten Hervorhebungen durch Farbe und Fettschreibung werden durch das //Leitfaden-Plugin// vorgenommen
82 * Zusammenhängende Formularelemente können durch Verwendung von Fieldsets und Containern gruppiert werden
gru 7.33 83 * Durch die Funktionsweise der [[Zusammenfassungs-Funktion>>||anchor="HZusammenfassung"]] des //Leitfaden-Plugins// wird folgende Verwendung empfohlen:
gru 7.18 84 ** Verwendung von Fieldsets als erste Gruppierungsstufe, da durch diese in der Zusammenfassung Verlinkungen auf den jeweiligen Block vorhanden sind
gru 7.33 85 ** Innerhalb von Fieldsets nur mit Containern oder [[unsichtbaren Containern>>||anchor="HFormularwidget:UnsichtbarerContainer"]] gruppieren
gru 7.18 86 ** Container ermöglichen dem Bürger durch Ihre Hintergrundfarbe, die darin enthaltenen Formularelemente deutlich als Gruppe wahrzunehmen
87
88 === #9 Weise deinen Bürgern den Weg ===
89
90 * Durch das //Leitfaden-Plugin// wird das gerade aktive Formularelemente durch einen blauen Rahmen und eine dunklere Hintergrundfarbe hervorgehoben
91 * Bestimmte Webbrowser setzen selbstständig einen dicken schwarzen Rahmen um das aktive Formularelement, wodurch der vom //Leitfaden-Plugin// gesetzte farbige Rahmen wieder überdeckt wird - Dieses Verhalten kann nicht verändert werden
92 * Erledigte Felder werden in der aktuellen Version des //Leitfaden-Plugin// nicht visuell zurückgestellt
93
94 === #10 Gib deinen Bürgern auch Rückmeldungen ===
95
96 * In der aktuellen Version des //Leitfaden-Plugin// werden bereits richtig ausgefüllte Felder nicht optisch belohnt
97
98 === #11 Wähle sinnvolle Feldgrößen ===
99
gru 7.58 100 * Für das Eingeben von Text bietet {{formcycle/}} die Formularelemente [[Eingabefeld>>Formcycle.FormDesigner.FormElements.Input]] und [[Textarea>>Formcycle.FormDesigner.FormElements.Textarea]]
gru 7.18 101 * Eingabefelder eignen sich für die meisten Eingaben
102 ** Durch Platzieren von mehreren Eingabefeldern in einer Zeile und dem Hinzufügen von [[Abstandselmenten>>Formcycle.FormDesigner.FormElements.Spacer]] können Eingabefelder bei Bedarf kleiner gemacht werden
gru 7.25 103 ** Der relative Anteil, den einzelne Formularfeld in einer Zeile annimmt kann durch das Anpassen des Wertes der Option //Bereite// in den [[Grundeigenschaften>>Formcycle.FormDesigner.ElementProperties.BaseProperties]] angepasst werden
gru 7.18 104 ** Durch das Einfügen von Abständen, kann die anteilige Größe eines Formularelements in einer Zeile verringert werden, ohne das weitere Formularelemente in der Zeile vorhanden sein müssen
105 * Textareas können zum Beispiel für längere Freitextabschnitte verwendet werden
gru 7.26 106 ** Standardmäßig ist bereits die [[Darstellungsoption>>Formcycle.FormDesigner.FormElements.Textarea||anchor="HDarstellung"]] //Größe anpassen// aktiv, wodurch das Feld mit den Eingaben des Nutzers mitwächst
gru 7.18 107 ** Durch //Höhe (in px)// kann zudem die initiale Höhe der Textarea festgelegt werden
gru 7.45 108 ** Die maximale mögliche Zeichenananzahl kann unter [[Bedingungen>>Formcycle.FormDesigner.FormElements.Textarea||anchor="HDarstellung"]] im Paramerter //Max. Zeichen// konfiguriert werden
gru 7.18 109 ** Durch die Option //Zeichenanzahl anzeigen// wird unter dem Feld die aktuell vorhandene und die maximal erlaube Zeichenmenge angezeigt, was dem Bürger einen Hinweis auf die ungefähr erwartete Informationsmenge liefern kann
110
111 === #12 Gehe sorgsam mit Auszeichnungen für Schrift um ===
112
113 * Verwendung von Fettschrift, Großschreibungen und Kursivschrift wird vom Formularersteller bestimmt
114 * Inhalte von Feldbezeichnungen und Textelementen werden in einem Rich-Text-Editor eingegeben und können dadurch im {{designer/}} beliebig formatiert werden
115
116 === #13 Mache Pflichtfelder in jeder Situation deutlich sichtbar ===
117
118 * Durch das //Leitfaden-Plugin// werden die Sterne, durch die Pflichtfelder gekennzeichnet werden, deutlich vergrößert
gru 7.58 119 * Überschriften und Beschriftungen von Schaltflächen sind in {{formcycle/}} bereits standardmäßig in Fettschrift und Fließtexte sind auch standardmäßig in normaler Schrift
gru 7.18 120
121 === #14 Hebe Schaltflächen hervor und beschrifte sie ===
122
gru 7.44 123 * Bei den Kontrollschaltflächen von wiederholten Elementen werden durch das //Leitfaden-Plugin// entsprechend ihrer Funktion beschriftet und die Icons heben sich farblich deutlich ab
gru 7.18 124
125 === #15 Vermeide doppelte Eingaben ===
126
127 * Durch Verwendung von Auswahlfeldern mit Radiobuttons kann der Bürger gefragt werden, ob vorangegangene Eingaben oder ob er abweichende Daten eingeben möchte
128 * Die Felder für abweichende Daten sind zunächst versteckt und werden über [[//Sichtbar wenn//-Bedingungen>>Formcycle.FormDesigner.ElementProperties.Constraints]] sichtbar
gru 7.32 129 * Um die abhängig sichtbaren Eingabeelemente gruppieren zu können, können diese Beispielsweise in einen Container oder einen [[Unsichtbaren Container>>||anchor="HFormularwidget:UnsichtbarerContainer"]] platziert werden
gru 7.18 130
131 === #16 Verwende vorausgefüllte Standardtexte als Beispielangabe ===
132
gru 7.26 133 * Platzhalter können bei allen Eingabeelementtypen für Text unter [[Label {{rarrow/}} Platzhalter>>Formcycle.FormDesigner.ElementProperties.Label]] eingetragen werden
gru 7.18 134
135 === #17 Gib proaktiv hilfreiche Hinweise und Erklärungen ===
136
gru 7.58 137 * Hilfetexte können standardmäßig für alle Eingabeelemente in {{formcycle/}} definiert werden
gru 7.18 138 * Durch das //Leitfaden-Plugin// werden sie standardmäßig geöffnet werden, wenn das Feld ausgewählt wird
139
140 === #18 Biete so oft wie möglich Auswahlfelder an ===
sas 15.1 141
gru 7.18 142 {{velocity}}
143 ##* Mehrstufige Abfrage können mit Radiobuttons für die wichtigsten Auswahloptionen und Auswahlfeldern für sonstige Auswahlen umgesetzt werden
gru 7.58 144 ##, bei den können mit {{formcycle/}} einfach mit [[Sichtbarkeitsbedingungen>>Formcycle.FormDesigner.ElementProperties.Constraints]] umgesetzt werden.
gru 7.18 145 {{/velocity}}
sas 15.1 146
gru 7.18 147 * Dropdown-Auswalelemente sind eine Ansichtsform des Elementtyps [[Auswahl>>Formcycle.FormDesigner.FormElements.Selection]]
gru 7.28 148 * 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.
gru 7.18 149
150 === #19 Hilf deinen Bürgern Dokumente anzuhängen ===
151
152 * Das //Leitfaden-Plugin// passt das Aussehen des [[Uploadelements>>Formcycle.FormDesigner.FormElements.Upload]] so an, dass die Standardansicht des verwendeten Webbrowsers durch eine neue Schaltfläche ersetzt wird
153 * Dadurch wird Schaltfläche situationsabhängig beschriftet und die verunsichernde Darstellung des gesamten Dateipfades der Datei in //Microsoft Internet Explorer// und //Edge (Alt)// entfällt
154
155 === #20 Überprüfe die Angaben deiner Bürger ===
156
157 * An Eingabefeldern können im {{designer/}} einfache Validatoren ausgewählt werden
gru 7.42 158 * Zusätzliche Kontextabhängige Prüfungen können per JavaScript vorgenommen werden
gru 7.18 159
160 === #21 Mache Fehler sichtbar und erkläre sie ===
161
gru 7.58 162 * {{formcycle/}} markiert standardmäßig Felder, bei denen Angaben fehlen oder nicht valide sind und zeigt eine passende Fehlermeldung an.
163 * Texte von Fehlermeldungen können im {{formcycle/}} Backend unter [[i18n-Variablen>>Formcycle.UserInterface.FilesAndTemplates.I18nVariables]] gepflegt werden oder [[per JavaScript>>Formcycle.FormDesigner.CodingPanel.ScriptTab]] im Formular individuell überschrieben werden
gru 7.31 164 * Das Aussehen von Fehlermeldungen kann über [[CSS>>Formcycle.FormDesigner.CodingPanel.CSSTab]] zusätzlich angepasst werden
gru 7.18 165
166 === #22 Unterstütze die AutoFill-Funktion der Browser ===
167
gru 7.58 168 * In {{formcycle/}} ab Version 6.6.10 für Eingabefelder unter //Erweitert {{rarrow/}} Automatisch ausfüllen// konfigurierbar
gru 7.56 169 * Alternativ können die entsprechenden Attribute auch bei //Erweitert {{rarrow/}} Attribute// festgelegt werden
gru 7.18 170
171 === #23 Kommuniziere mit deinen Bürgern auf Augenhöhe ===
172
gru 7.41 173 * Zusätzliche Hinweise können als [[Textelement>>Formcycle.FormDesigner.FormElements.Text]] im Formular eingefügt werden
gru 7.18 174
175 === #24 Halte deine Bürger auf dem Laufenden ===
176
177 * Bei normaler Bearbeitung des Formulars durch die Sachbearbeiter kann nach jeder Bearbeitung eine E-Mail-Aktion zum Informieren des Kunden verwendet werden
178 * 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"]]
gru 7.40 179 * Ü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
gru 7.18 180
gru 1.37 181 == Technische Dokumentation des Leitfaden-Plugins ==
gru 1.9 182
gru 4.16 183 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.
gru 1.9 184
gru 4.11 185 === Designanpassungen ===
gru 1.37 186
gru 4.11 187 Das //Leitfaden-Plugin// stellt folgende das Aussehen von Formularen beeinflussende Inhalte bereit und bindet diese automatisch in alle Formulare ein:
gru 1.37 188
gru 4.11 189 ; CSS-Designanpassungen
190 : Optische Anpassungen am Formular wie das Aussehen der Labels von Elementen, Upload-Elemente, Mussfeld-Sterne, usw.
191
192 ; Roboto-Schriftart
gru 7.8 193 : Das Plugin stellt diese Schriftart als Ressource auf dem Server bereit und verwendet diese in den Formularen für alle Texte.
gru 4.11 194
gru 4.15 195 === Validatoren ===
gru 1.37 196
gru 4.15 197 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:
gru 1.37 198
gru 1.46 199 ; xm-vdt-bic
gru 4.13 200 : Validierung für Eingabefelder, in die der Benutzer ein Geschäftskennzeichen (SWIFT-BIC) für Kontodaten eingibt
gru 1.43 201
gru 1.46 202 ; xm-vdt-iban
gru 4.13 203 : Validierung für Eingabefelder, in die der Benutzer eine Bankverbindung in Schreibweise der internationalen Bankkontonummer (IBAN) eingibt
gru 1.43 204
gru 1.46 205 ; xm-vdt-iban-de
gru 4.13 206 : Validierung für Eingabefelder, in die der Benutzer eine Bankverbindung in Schreibweise der internationalen Bankkontonummer (IBAN) eingibt
gru 1.43 207
gru 1.46 208 ; xm-vdt-steuerid
gru 4.13 209 : Validierung für Eingabefelder, in die der Benutzer eine steuerliche Identifikationsnummer nach § 139b, Abgabenordnung eingibt
gru 1.43 210
gru 7.7 211 === Formularwidget: Hinweis ===
sas 15.1 212
gru 4.18 213 {{figure image="leitfaden_widget_hinweis.png" clear="h3"}}
214 Symbol des //Hinweis//-Widgets und Aussehen im Formular
gru 4.8 215 {{/figure}}
sas 15.1 216
217
218 {{html wiki="true"}}
219 <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>
220 {{/html}}
221
222
gru 7.2 223 Mit diesem Widget können farblich abgehobene Hinweistexte leichter im Formular platziert werden. Die Konfigurationsoptionen entsprechen denen von [[Text-Elementen>>Formcycle.FormDesigner.FormElements.Text]].
gru 1.27 224
sas 15.1 225
gru 7.7 226 === Formularwidget: Kontaktdaten ===
sas 15.1 227
gru 4.8 228 {{figure image="leitfaden_widget_kontaktdaten.png" clear="h3"}}
gru 4.18 229 Symbol des //Kontaktdaten//-Widgets und Aussehen im Formular
gru 4.8 230 {{/figure}}
sas 15.1 231
232
233 {{html wiki="true"}}
234 <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>
235 {{/html}}
236
237
sas 16.1 238 {{figure image="leitfaden_widget_kontaktdaten_quelle.png" clear="h3"}}
239 Verwendung einer //CSV-Datenquelle// für den Inhalt des //Kontaktdaten//-Widgets
240 {{/figure}}
sas 15.1 241
242
243 {{html wiki="true"}}
244 <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>
245 {{/html}}
246
247
gru 12.2 248 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.
gru 1.27 249
gru 12.2 250
sas 16.1 251 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"]].
gru 12.2 252
sas 15.1 253 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.
254
gru 7.7 255 === Formularwidget: Unsichtbarer Container ===
sas 15.1 256
gru 4.10 257 {{figure image="leitfaden_widget_unsichtbarer_container.png" clear="h3"}}
gru 4.18 258 Symbol des //Unsichtbarer Container//-Widgets
gru 4.10 259 {{/figure}}
sas 15.1 260
261
262 {{html wiki="true"}}
263 <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>
264 {{/html}}
265
266
gru 4.18 267 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.
gru 1.27 268
sas 15.1 269
gru 1.24 270 === Zusammenfassung ===
sas 15.1 271
gru 1.49 272 {{figure image="leitfaden_zusammenfassung_beispiel.png" clear="h4"}}
gru 4.14 273 Beispiel für das Aussehen einer Zusammenfassung mit in [[Fieldsets>>Formcycle.FormDesigner.FormElements.Fieldset]] gruppierten Formularelementen.
gru 1.48 274 {{/figure}}
sas 15.1 275
276
277 {{html wiki="true"}}
278 <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>
279 {{/html}}
280
281
gru 4.14 282 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.
gru 1.27 283
sas 15.1 284
gru 4.14 285 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.
gru 1.27 286
gru 7.39 287 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.
gru 1.46 288
gru 1.44 289 ==== Konfiguration von Formularelementen ====
sas 15.1 290
gru 1.46 291 {{figure image="leitfaden_zusammenfassung_elemente.png" clear="h4"}}
gru 7.38 292 Konfigurationsmöglichkeiten für die Sichtbarkeit eines Formularelements in der Zusammenfassung
gru 1.46 293 {{/figure}}
sas 15.1 294
295
296 {{html wiki="true"}}
297 <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>
298 {{/html}}
299
300
gru 7.38 301 Über die unter //Darstellung// zu findende Option //Bei Zusammenfassung// kann die Sichtbarkeit von Formularelementen in der Zusammenfassung gesteuert werden.
gru 1.9 302
sas 15.1 303
gru 4.13 304 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.
gru 1.46 305
gru 1.47 306 Folgende Optionen stehen zur Auswahl:
307
gru 1.46 308 ; Sichtbarkeit automatisch
gru 4.12 309 : 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
gru 1.46 310
gru 1.47 311 ; nicht sichtbar
gru 7.38 312 : Das Element wird nicht in der Zusammenfassung angezeigt
gru 1.46 313
sas 15.1 314 ==== Konfiguration der Schaltfläche ====
gru 1.48 315
gru 1.45 316 {{figure image="leitfaden_zusammenfassung_buttons.png" clear="h4"}}
317 Aktion //Leitfaden-Plugin// in den Konfigurationseinstellungen einer Schaltfläche
318 {{/figure}}
sas 15.1 319
320
321 {{html wiki="true"}}
322 <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>
323 {{/html}}
324
325
gru 4.12 326 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.
gru 1.24 327
sas 15.1 328
gru 7.10 329 ==== Überschrift auf der Zusammenfassungsseite ====
330
gru 7.12 331 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.
gru 7.10 332
gru 7.38 333 Falls dies beispielsweise nur eine einfache Nachricht sein soll und die standardmäßig verwendeten Schriftgrößen dafür zu groß sind, kann das Aussehen des (Unter-)titels per [[//CSS//>>Formcycle.FormDesigner.CodingPanel.CSSTab]] angepasst werden. Dies könnte für eine Zusammenfassungsseite mit dem technischen Namen //pZusammenfassung// beispielsweise wie folgt aussehen:
gru 7.10 334
335 {{code language="css"}}
336 .CXPage[xn="pZusammenfassung"] .header h1 {
337 font-size: 20px; /* Setzt die Schriftgröße des Titels der Zusammenfassungsseite auf 20 Pixel */
338 }
339 .CXPage[xn="pZusammenfassung"] .header h2 {
340 font-size: 14px; /* Setzt die Schriftgröße des Untertitels der Zusammenfassungsseite auf 14 Pixel */
341 font-weight: normal; /* Sorgt dafür, dass der Text des Untertitel normal und nicht fett dargestellt wird */
342 }
gru 7.11 343 {{/code}}
gru 7.10 344
gru 17.1 345 === i18n Variablen ===
346
gru 17.2 347 {{figure image="leitfaden_i18n.jpg" clear="h4"}}
gru 17.1 348 In die Tabelle der [[i18n-Variablen>>Formcycle.UserInterface.FilesAndTemplates.I18nVariables]] eingefügte Variablen.
349 {{/figure}}
350
351 Verschiedene im //Leitfaden-Plugin// verwendete Texte können in der Tabelle [[i18n-Variablen>>Formcycle.UserInterface.FilesAndTemplates.I18nVariables]] angepasst und internationalisiert werden. Hierfür muss in der Tabelle der Variablenname und der gewünschte Text in einer neuen Zeile eingetragen werden.
352
353 {{table dataTypeAlpha="0-1"}}
354 |=Variablenname|=Standardwert
355 |leitfadenUploadButtonSelect|Datei auswählen
356 |leitfadenUploadButtonChange|Datei ändern
357 |leitfadenUploadNone keine|Datei ausgewählt
358 |leitfadenUploadFormat|Erlaubte Formate:
359 |leitfadenUploadAnd|und
360 |leitfadenUploadMax|Maximal mögliche Dateigröße:
361 |summary_header|Bitte überprüfen Sie Ihre Angaben
362 |xm_summary_goto_page_link|Angaben ändern
363 {{/table}}
364
gru 7.17 365 == Versionshistorie ==
366
gru 16.4 367 === 1.1.11 ===
368
369 * UI Anpassung
370
371 === 1.1.10 ===
372
373 * Anpassung an CSS von Upload-Element
374
375 === 1.1.8 ===
376
377 * Beheben von Darstellungsproblemen bei Umlauten
378
gru 16.3 379 === 1.1.7 ===
gru 8.6 380
gru 16.3 381 * Beheben von Darstellungsproblemen bei Überschriften und Navigationsleiste auf der Zusammenfassungsseite
382
383 === 1.1.6 ===
384
gru 8.6 385 * Beheben von Darstellungsproblemen bei Umlauten
386
gru 7.17 387 === 1.1.2 ===
388
gru 8.6 389 * Anpassungen an Verhalten unsichtbarer Container in der Zusammenfassung und Kontrast von Elementen
390
391 === 1.1.1 ===
392
gru 7.17 393 * Initiales öffentliches Release des //Leitfaden-Plugins//.
394
gru 1.44 395 {{velocity}}
396 ##== Weitere Anpassungen am Aussehen der Formulare ==
397 ##
398 ##-> jenseits von Leitfaden
399 ##
400 ##Logo einbinden als BILD oder per CSS. -> allgemeine links
401 ##Hier empfihlt sich
402 {{/velocity}}

Navigation

Copyright 2000-2025