Leitfaden-Plugin - FORMCYCLE Wiki

{{version major="7" minor="2"/}}Für die {{formcycle/}} Version 7.2.0 muss das Plugin auf die Pluginversion 2.2.0 (oder höher) aktualisiert werden.

3

4

5

[[**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) - Bitte beachten Sie, dass für {{formcycle/}} in der Version 7 das Plugin zwingend in der Version 2.0.0 oder höher benötigt wird

##{{info}}

##Hinweis, dass das für bayr. LK ist.

12

##Über das //???? Plugin// werden Möglichkeiten zur Einbindung der AKDB Basisdienste **Bürgerkonto** und **Postkorb** in {{formcycle/}} bereitgestellt.

13

##{{/info}}

14

##{{figure image="formular_vorlage.png"}}

##TBD

##{{/figure}}

== Vorbemerkungen ==

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.

23

24

Das kostenpflichtige //Leitfaden-Plugin// stellt Funktionalitäten zur Verfügung, welche im Leitfaden beschrieben wurden, aber nicht standardmäßig in {{formcycle/}} umsetzbar sind. Das Plugin wird nur für die öffentliche Verwaltung in Bayern angeboten.

25

26

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.Designer.Form.FormElements.Widgets]] und Funktionalitäten im Punkt [[Technische Dokumentation>>||anchor="HTechnischeDokumentationdesLeitfaden-Plugins"]].

27

28

== Hinweis zur Verwendung des Leitfaden-Plugins mit bereits vorhanden eigenen CSS-Anpassungen ==

29

30

Das //Leitfaden-Plugin// nimmt Änderungen am Aussehen von Formularen vor. Daher kann es nach der Installation des Plugins zu Konflikten mit bereits vorhanden CSS-Anpassungen kommen, wodurch entweder die Darstellungsoptionen des //Leitfaden-Plugins// eventuell überschrieben werden oder das //Leitfaden-Plugin// vorhandene Darstellungsoptionen überschreibt. Daher sollte nach der Installation des Leitfaden-Plugins geprüft werden, ob das Aussehen noch den eigenen Richtlinien und den Richtlinien des Leitfadens entspricht, und bei Bedarf Anpassungen am eigenen CSS vorgenommen werden.

== Installation ==

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]].

35

36

37

== Umsetzung von Formularen gemäß des Leitfadens ==

38

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.

40

41

=== #1 Frage den Bürger als erstes, was er möchte. ===

42

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.Designer.Form.ElementProperties.Constraints]] nur diejenigen Seiten und Formularelemente angezeigt werden, die für sein Anliegen notwendig sind

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

49

* Das Widget muss entweder je einmal am Anfang von jeder Formularseite oder genau einmal im Header-Bereich (empfohlen) platziert werden

50

* Details zur Konfiguration des Widgets werden auf der Seite des Plugins genauer [[beschrieben>>Formcycle.PluginDocumentation.WidgetXNavigationBar||anchor="HKonfiguration"]]

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

56

* In der Zusammenfassung werden für Fieldsets die Verlinkungen zu den entsprechenden Seiten gemäß des Leitfadens automatisch generiert

57

* Mehr Informationen finden sich unter dem Punkt [[Zusammenfassung>>||anchor="HZusammenfassung"]]

58

59

=== #4 Biete jederzeit die Möglichkeit an Kontakt aufzunehmen ===

60

61

* Das //Leitfaden-Plugin// bietet hierfür ein Widget [[Kontaktdaten>>||anchor="HFormularwidget:Kontaktdaten"]] an, mit dem die Kontaktdaten einfach eingepflegt werden können

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.Designer.Form.FormElements.Textarea]] hinzugefügt werden

67

* Durch Anpassung der Option //Max. Zeichen// unter [[Bedingungen>>Formcycle.Designer.Form.FormElements.Textarea||anchor="HBedingungen"]] und //Höhe (in px)// unter [[Darstellung>>Formcycle.Designer.Form.FormElements.Textarea||anchor="HDarstellung"]] kann das Bemerkungsfeld individuell an die Situation angepasst werden

68

69

=== #6 Komme den Fragen deiner Bürger zuvor ===

70

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

72

* Die Konfiguration entspricht dabei der eines normalen [[Text-Elements>>Formcycle.Designer.Form.FormElements.Text]]

73

74

=== #7 Positioniere die Feldbezeichnungen oberhalb des Feldes ===

75

76

* Die Position von Feldbezeichnungen ist in {{formcycle/}} standardmäßig über dem Element

77

* Bei Formularelementen kann die Positionierung unter Elementeigenschaften [[Label>>Formcycle.Designer.Form.ElementProperties.Label]] angepasst werden

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

83

* Durch die Funktionsweise der [[Zusammenfassungs-Funktion>>||anchor="HZusammenfassung"]] des //Leitfaden-Plugins// wird folgende Verwendung empfohlen:

84

** Verwendung von Fieldsets als erste Gruppierungsstufe, da durch diese in der Zusammenfassung Verlinkungen auf den jeweiligen Block vorhanden sind

85

** Innerhalb von Fieldsets nur mit Containern oder [[unsichtbaren Containern>>||anchor="HFormularwidget:UnsichtbarerContainer"]] gruppieren

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

100

* Für das Eingeben von Text bietet {{formcycle/}} die Formularelemente [[Eingabefeld>>Formcycle.Designer.Form.FormElements.Input]] und [[Textarea>>Formcycle.Designer.Form.FormElements.Textarea]]

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.Designer.Form.FormElements.Spacer]] können Eingabefelder bei Bedarf kleiner gemacht werden

103

** Der relative Anteil, den einzelne Formularfeld in einer Zeile annimmt kann durch das Anpassen des Wertes der Option //Bereite// in den [[Grundeigenschaften>>Formcycle.Designer.Form.ElementProperties.BaseProperties]] angepasst werden

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

106

** Standardmäßig ist bereits die [[Darstellungsoption>>Formcycle.Designer.Form.FormElements.Textarea||anchor="HDarstellung"]] //Größe anpassen// aktiv, wodurch das Feld mit den Eingaben des Nutzers mitwächst

107

** Durch //Höhe (in px)// kann zudem die initiale Höhe der Textarea festgelegt werden

108

** Die maximale mögliche Zeichenananzahl kann unter [[Bedingungen>>Formcycle.Designer.Form.FormElements.Textarea||anchor="HDarstellung"]] im Paramerter //Max. Zeichen// konfiguriert werden

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

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

120

121

=== #14 Hebe Schaltflächen hervor und beschrifte sie ===

122

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

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.Designer.Form.ElementProperties.Constraints]] sichtbar

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

130

131

=== #16 Verwende vorausgefüllte Standardtexte als Beispielangabe ===

132

133

* Platzhalter können bei allen Eingabeelementtypen für Text unter [[Label {{rarrow/}} Platzhalter>>Formcycle.Designer.Form.ElementProperties.Label]] eingetragen werden

134

135

=== #17 Gib proaktiv hilfreiche Hinweise und Erklärungen ===

136

137

* Hilfetexte können standardmäßig für alle Eingabeelemente in {{formcycle/}} definiert werden

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 ===

141

142

143

##* Mehrstufige Abfrage können mit Radiobuttons für die wichtigsten Auswahloptionen und Auswahlfeldern für sonstige Auswahlen umgesetzt werden

144

##, bei den können mit {{formcycle/}} einfach mit [[Sichtbarkeitsbedingungen>>Formcycle.Designer.Form.ElementProperties.Constraints]] umgesetzt werden.

145

146

147

* Dropdown-Auswalelemente sind eine Ansichtsform des Elementtyps [[Auswahl>>Formcycle.Designer.Form.FormElements.Selection]]

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.

149

150

=== #19 Hilf deinen Bürgern Dokumente anzuhängen ===

151

152

* Das //Leitfaden-Plugin// passt das Aussehen des [[Uploadelements>>Formcycle.Designer.Form.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

158

* Zusätzliche Kontextabhängige Prüfungen können per JavaScript vorgenommen werden

159

160

=== #21 Mache Fehler sichtbar und erkläre sie ===

161

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.Designer.Form.CodingPanel.ScriptTab]] im Formular individuell überschrieben werden

164

* Das Aussehen von Fehlermeldungen kann über [[CSS>>Formcycle.Designer.Form.CodingPanel.CSSTab]] zusätzlich angepasst werden

165

166

=== #22 Unterstütze die AutoFill-Funktion der Browser ===

167

168

* In {{formcycle/}} ab Version 6.6.10 für Eingabefelder unter //Erweitert {{rarrow/}} Automatisch ausfüllen// konfigurierbar

169

* Alternativ können die entsprechenden Attribute auch bei //Erweitert {{rarrow/}} Attribute// festgelegt werden

170

171

=== #23 Kommuniziere mit deinen Bürgern auf Augenhöhe ===

172

173

* Zusätzliche Hinweise können als [[Textelement>>Formcycle.Designer.Form.FormElements.Text]] im Formular eingefügt werden

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"]]

179

* Über Statusverarbeitung kann zum Beispiel mithilfe eines [[//Datum und Uhrzeit// Trigger>>Formcycle.Designer.Workflow.Events.DateAndTime]] bzw. eines [[Zeitgesteuerten Statuswechsel>>Formcycle.Designer.Workflow.LegacyWorkflow.States||anchor="HZeigesteuerterStatuswechsel"]] nach einer definierten Zeitspanne in einen anderen Status gewechselt werden, in welchem dem Bürger eine automatische Statusinformation zugesendet wird

180

181

== Technische Dokumentation des Leitfaden-Plugins ==

182

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.

184

185

=== Designanpassungen ===

186

187

Das //Leitfaden-Plugin// stellt folgende das Aussehen von Formularen beeinflussende Inhalte bereit und bindet diese automatisch in alle Formulare ein:

188

189

; CSS-Designanpassungen

190

: Optische Anpassungen am Formular wie das Aussehen der Labels von Elementen, Upload-Elemente, Mussfeld-Sterne, usw.

191

192

; Roboto-Schriftart

193

: Das Plugin stellt diese Schriftart als Ressource auf dem Server bereit und verwendet diese in den Formularen für alle Texte.

=== Validatoren ===

Durch das Plugin werden 4 neue [[Validatoren>>Formcycle.Designer.Form.CodingPanel.Validators]] bereitgestellt. Zu beachten ist bei 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:

198

199

; xm-vdt-bic

200

: Validierung für Eingabefelder, in die der Benutzer ein Geschäftskennzeichen (SWIFT-BIC) für Kontodaten eingibt

201

202

; xm-vdt-iban

203

: Validierung für Eingabefelder, in die der Benutzer eine Bankverbindung in Schreibweise der internationalen Bankkontonummer (IBAN) eingibt

204

205

; xm-vdt-iban-de

206

: Validierung für Eingabefelder, in die der Benutzer eine Bankverbindung in Schreibweise der internationalen Bankkontonummer (IBAN) eingibt

207

208

; xm-vdt-steuerid

209

: Validierung für Eingabefelder, in die der Benutzer eine steuerliche Identifikationsnummer nach § 139b, Abgabenordnung eingibt

210

211

=== Formularwidget: Hinweis ===

212

213

214

Symbol des //Hinweis//-Widgets und Aussehen im Formular

<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>

Mit diesem Widget können farblich abgehobene Hinweistexte leichter im Formular platziert werden. Die Konfigurationsoptionen entsprechen denen von [[Text-Elementen>>Formcycle.Designer.Form.FormElements.Text]].

224

225

226

=== Formularwidget: Kontaktdaten ===

227

228

229

Symbol des //Kontaktdaten//-Widgets und Aussehen im Formular

<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>

{{figure image="leitfaden_widget_kontaktdaten_quelle.png" clear="h3"}}

239

Verwendung einer //CSV-Datenquelle// für den Inhalt des //Kontaktdaten//-Widgets

<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>

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.

249

250

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"]].

252

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

255

=== Formularwidget: Unsichtbarer Container ===

256

257

258

{{version major="7" minor="2"/}}Ab der {{formcycle/}} Version 7.2.0 wird dieses Element direkt von {{formcycle/}} bereitgestellt. In früheren Versionen erstellte //unsichtbare Container// sind vollständig kompatibel zur der in {{formcycle/}} integrierten Variante. Für {{formcycle/}} Version 7.2.0 muss lediglich das //Leitfaden-Plugin// auf die Pluginversion 2.2.0 oder höher aktualisiert werden.

259

260

261

{{figure image="leitfaden_widget_unsichtbarer_container.png" clear="h3"}}

262

Symbol des //Unsichtbarer Container//-Widgets

<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>

Mit diesem Widget können Formularinhalte wie in einem normalen [[Container>>Formcycle.Designer.Form.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.

272

273

274

=== Zusammenfassung ===

275

276

{{figure image="leitfaden_zusammenfassung_beispiel.png" clear="h4"}}

277

Beispiel für das Aussehen einer Zusammenfassung mit in [[Fieldsets>>Formcycle.Designer.Form.FormElements.Fieldset]] gruppierten Formularelementen.

<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.Designer.Form.FormElements.Fieldset]] gruppierten Formularelementen.</div></div></div>

Durch das Plugin werden im {{designer/}} zusätzliche Konfigurationsmöglichkeiten hinzugefügt, welche es ermöglichen, auf der letzten im Formular vorhandenen [[Seite>>Formcycle.Designer.Form.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.

287

288

289

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.Designer.Form.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.Designer.Form.FormElements.Container]] und Unsichtbaren Containern vorhanden.

290

291

Um die Zusammenfassung nutzen zu können, muss bei einer [[Schaltfläche>>Formcycle.Designer.Form.FormElements.Button]] //Zusammenfassung + prüfen// als Aktion konfiguriert werden. Dadurch wird beim Klicken auf diese Schaltfläche auf die Zusammenfassungsseite gesprungen.

292

293

==== Konfiguration von Formularelementen ====

294

295

{{figure image="leitfaden_zusammenfassung_elemente.png" clear="h4"}}

296

Konfigurationsmöglichkeiten für die Sichtbarkeit eines Formularelements in der Zusammenfassung

<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>

Über die unter //Darstellung// zu findende Option //Bei Zusammenfassung// kann die Sichtbarkeit von Formularelementen in der Zusammenfassung gesteuert werden.

306

307

308

Diese Option wird bei allen [[Formularelementen>>Formcycle.Designer.Form.FormElements.WebHome]] und [[Widgets>>Formcycle.Designer.Form.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.

309

310

Folgende Optionen stehen zur Auswahl:

311

312

; Sichtbarkeit automatisch

313

: Das Element wird in der Zusammenfassung angezeigt, wenn es sichtbar ist und einen Wert hat oder vom Typ [[Bild>>Formcycle.Designer.Form.FormElements.Image]] ist. Standmäßig ist diese Option ausgewählt

314

315

; nicht sichtbar

316

: Das Element wird nicht in der Zusammenfassung angezeigt

317

318

==== Konfiguration der Schaltfläche ====

319

320

{{figure image="leitfaden_zusammenfassung_buttons.png" clear="h4"}}

321

Aktion //Leitfaden-Plugin// in den Konfigurationseinstellungen einer Schaltfläche

<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>

Das //Leitfaden-Plugin// fügt für [[Schaltflächen>>Formcycle.Designer.Form.FormElements.Button]] eine neue Aktion mit dem Namen //Zusammenfassung + prüfen// hinzu. Diese Aktion springt dabei immer auf die letzte im Formular vorhandene Seite.

331

332

333

==== Überschrift auf der Zusammenfassungsseite ====

334

335

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.

336

337

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.Designer.Form.CodingPanel.CSSTab]] angepasst werden. Dies könnte für eine Zusammenfassungsseite mit dem technischen Namen //pZusammenfassung// beispielsweise wie folgt aussehen:

338

339

340

.CXPage[xn="pZusammenfassung"] .header h1 {

341

font-size: 20px; /* Setzt die Schriftgröße des Titels der Zusammenfassungsseite auf 20 Pixel */

342

}

343

.CXPage[xn="pZusammenfassung"] .header h2 {

344

font-size: 14px; /* Setzt die Schriftgröße des Untertitels der Zusammenfassungsseite auf 14 Pixel */

345

font-weight: normal; /* Sorgt dafür, dass der Text des Untertitel normal und nicht fett dargestellt wird */

}

=== i18n Variablen ===

350

351

352

In die Tabelle der [[i18n-Variablen>>Formcycle.UserInterface.FilesAndTemplates.I18nVariables]] eingefügte Variablen des //Leitfaden-Plugins//.

353

354

355

Verschiedene im //Leitfaden-Plugin// verwendete Texte können unter dem Menüpunkt [[Dateien & Templates {{rarrow/}} 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.

356

357

358

|=Variablenname|=Standardwert

359

|leitfadenUploadButtonSelect|Datei auswählen

360

|leitfadenUploadButtonChange|Datei ändern

361

|leitfadenUploadNone keine|Datei ausgewählt

362

|leitfadenUploadFormat|Erlaubte Formate:

363

|leitfadenUploadAnd|und

364

|leitfadenUploadMax|Maximal mögliche Dateigröße:

365

|summary_header|Bitte überprüfen Sie Ihre Angaben

366

|xm_summary_goto_page_link|Angaben ändern

367

368

369

=== Einführungsvideo ===

370

371

Für die vorhergehende {{formcycle/}} Version 6 gibt es ein Einführungsvideo für das Leitfaden-Plugin.

372

373

{{externalVimeoVideo id="562734466" image="Workshops.WebHome@fc_video_play.png" height="400"/}}

374

375

== Versionshistorie ==

=== 2.2.4 ===

* Change: Verbesserung der Benutzeroberfläche für Auswahlelemente in Frageform in der Zusammenfassung

380

* Fix: Bindestriche im Beschriftungstext des Hinzufügen-Buttons für wiederholte Elemente verhindern

=== 2.2.3 ===

* Fix: Unterstützung von HTML-Inhalten für Checkbox-Auswahloptionen beim Öffnen der Zusammenfassung

385

* Fix: Auslassen von Seiten in der Zusammenfassung, wenn sie im Formulardesigner als ausgeschlossen markiert wurden

=== 2.2.2 ===

* Fix: Unnötige Abstände vor dem Navigationsleisten-Widget entfernt

=== 2.2.1 ===

* Upload-Felder auf Seiten nach der Zusammenfassung funktionieren wieder

394

* Diverse kleine Fehlerbehebungen im Layout

395

** Bei Berechnungsfeld fehlte Abstand zwischen Label und Wert

396

** Umbrechen bei langen Label-Texten

397

** Im Druck werden Inhalte nicht mehr umgebrochen dargestellt

398

** Bei automatischen Uploads wurde "Datei ändern" anstatt "Datei auswählen" angezeigt

=== 2.2.0 ===

* Anpassungen für {{formcycle/}} Version 7.2, erfordert mindestens Version 7.2

403

* Das Element //Unsichtbarer Container// wird nicht mehr vom Plugin bereitgestellt, da dieses Element jetzt direkt von {{formcycle/}} angeboten wird.

=== 2.1.0 ===

* Anpassungen für {{formcycle/}} Version 7.1, verwendbar nur mit {{formcycle/}} Version 7.1.x

=== 2.0.28 ===

* Fix: Zusammenfassung mit Upload-Elementen funktioniert auch wieder in älteren FORMCYCLE-Versionen

=== 2.0.27 ===

* Minor: Die JavaScript-Funktion //showSummary(button: HTMLElement): void// wurde unter //window.jQuery.showSummary// nach außen zur Verfügung gestellt. Hiermit ist es möglich, die Zusammenfassung auch manuell via JavaScript anzuzeigen.

=== 2.0.26 ===

* Fix: Alle Texte im Kontaktdaten-Element haben wieder die Textfarbe schwarz

=== 2.0.25 ===

* Fix: Bedingungen wie //versteckt wenn// funktionieren wieder in Verbindung mit dem Kontaktdaten-Element.

=== 2.0.24 ===

* Fix: Drag&Drop von Elementen in Fieldsets und Container im Formulardesigner funktioniert wieder korrekt

428

* Fix: Upload-Elemente, welche gesperrt sind, sehen nun auch optisch wie gesperrt aus

429

* Fix: Breite von wiederholten Fieldsets und Containern im Formular ist wieder korrekt

=== 2.0.23 ===

* Fix: Upload-Felder mit automatischen Upload werden in der Zusammenfassung berücksichtigt

434

* Fix: Layout-Problem bezüglich fehlender Abstände in der Zusammenfassung mit wiederholten Elementen behoben

=== 2.0.22 ===

* Fix: Fehlerbehebungen für ältere Browser im Zusammenhang mit Upload-Feldern.

439

* Fix: Bei der Wiederanzeige von Formularen mit wiederholten Uploads werden die vorhandenen Dateien am richtigen Upload-Element angezeigt.

=== 2.0.21 ===

* Fix: Fehlerbehebungen für ältere Browser

=== 2.0.20 ===

* Fix: Bei Fragenelementen mit Labeldarstellung "oben" nimmt das Label nun die volle zur Verfügung stehende Breite ein und bricht nicht mehr frühzeitig um.

=== 2.0.19 ===

* Fix: Der Löschen-Knopf bei wiederholten Elementen in Container und Fieldsets wird nun mit etwas Abstand dargestellt, sodass der Knopf nicht mehr den Inhalt der Container und Fieldsets überlagert.

452

* Fix: Schrifstärke von Überschriften und fetten Texten wurde verringert, um das Aussehen voriger Versionen besser nachzustellen.

=== 2.0.18 ===

* Fix: Die Schriftart Roboto wird nun in allen Varianten (Schriftstärke / Kursiv) mit einer korrekten Schriftartdatei eingebunden. Vorher waren erzeugte PDF-Dateien sehr groß, da die Glyphen mit fetter Schriftstärke berechnet werden mussten und direkt im PDF eingebettet wurden. Da vorher eine nicht existente (berechnete) Schriftart verwendet wurde, kann es sein, dass Texte nun geringfügig anders aussehen.

=== 2.0.17 ===

* Fix: Schriftarten werden auch richtig geladen, wenn Formular inline ausgeliefert wird (etwa bei Wechsel der Sprache via Sprachwechsel-Plugin)

461

* Erfordert wenigstens FORMCYCLE 7.0.7+

=== 2.0.16 ===

* Fix: Setzt die CSS-Klasse //.active-before// an der Navigationsleiste, wenn die Zusammenfassung ausgeführt wird.

=== 2.0.15 ===

* Fix: Weiteres Problem beim Ausblenden von Zeilen in der Zusammenfassung, wenn kein anderes Formularelement darin enthalten ist.

=== 2.0.14 ===

* Fix: CSS-Problem bei Einheiten an Textfelder in der Zusammenfassung behoben

=== 2.0.13 ===

* Fix: Autocomplete-Felder werden nicht mehr doppelt in der Zusammenfassung dargestellt.

=== 2.0.12 ===

* Fix: Ausblenden leerer Reihen in der Zusammenfassung, wenn keine darin Elemente enthalten sind.

=== 2.0.11 ===

* Fix: CSS für W3C-konformen Modus im Designer

486

* Erfordert wenigstens FORMCYCLE 7.0.3+

=== 2.0.10 ===

* Fix: Darstellungsprobleme in der Zusammenfassung

491

* Fix: Einrückung von unsichtbaren Containern

=== 2.0.9 ===

* Fix: Darstellung von Umlauten

=== 2.0.8 ===

* Change: Unsichtbarer Container hat Mindestöhe von 45 Pixel

=== 2.0.7 ===

* Fix: Zurück-Knopf in der Zusammenfassung funktioniert wieder richtig

=== 2.0.6 ===

* Fix: Zusammenfassung funktioniert auch mit einigen anderen Widgets sowie anderen eingebauten Elementen

=== 2.0.5 ===

* Fix: Darstellung der Upload-Element im Designer wieder korrekt

512

* Erfordert wenigstens FORMCYCLE 7.0.1+

=== 2.0.4 ===

* Fix: Uploads sind nur noch auf der Zusammenfassungsseite deaktiviert

=== 2.0.3 ===

* Fix: Es werden nur noch sichtbare Seiten validiert.

=== 2.0.2 ===

* Fix: Der Text //Keine Datei ausgewählt// wird nicht mehr angezeigt, wenn das Formular in der Wiederanzeige geöffnet wird und es bereits eine hochgeladene Datei gibt.

=== 2.0.1 ===

* Feature: Bei Upload-Element wird nun auch die Dateierweiterung und die Größe der ausgewählten Datei angezeigt.

=== 2.0.0 ===

* Initiales öffentliches Release des //Leitfaden-Plugins// für {{formcycle/}} Version 7.