Inhalt

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 werden für die Umsetzung von Online-Formularen konkrete Vorschläge gemacht und Empfehlungen gegeben.

Das kostenpflichtige Leitfaden-Plugin stellt Funktionalitäten zur Verfügung, welche im Leitfaden beschrieben wurden, aber nicht standardmäßig in FORMCYCLE umsetzbar sind. Im folgenden wird nach allgemeinen Installationshinweisen zunächst beschrieben, wie die einzelnen Punkte im Leitfaden unter Zuhilfenahme des Plugins umgesetzt werden können. Danach folgt eine detaillierte Beschreibung der durch das Plugin vorgenommenen Anpassungen an der Darstellung von Formularen und der durch das Plugin hinzugefügten Widgets und Funktionalitäten im Punkt Technische Dokumentation. 

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

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.

Umsetzung von Formularen gemäß des Leitfadens

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.

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

• Diese Anforderung wird dadurch umgesetzt, dass das Formular beim Erstellen bereits entsprechend aufgebaut wird
• Dem Bürger können nach der Auswahl des Anliegens über Sichtbarkeitsbedingungen nur diejenigen Seiten und Formularelemente angezeigt werden, die für sein Anliegen notwendig sind

#2 Unterteile dein Formular in sinnvolle Prozessschritte und gebe Orientierung

• Für einen Fortschrittsanzeige kann das kostenfreie Widget-Plugin Navigationsleiste verwendet werden
• Das Widget muss entweder je einmal am Anfang von jeder Formularseite oder genau einmal im Header-Bereich (empfohlen) platziert werden
• Details zur Konfiguration des Widgets werden auf der Seite des Plugins genauer beschrieben

#3 Gib dem Bürger eine Übersicht über seine Angaben und verlinke zu den Seiten

• Auf der letzten Seite des Formulars kann mithilfe des Leitfaden-Plugins eine Zusammenfassung angezeigt werden
• Bei der Schaltfläche, mit der zu dieser letzten Seite gewechselt wird, muss dafür Zusammenfassung + prüfen als Aktion festgelegt werden
• In der Zusammenfassung werden für Fieldsets die Verlinkungen zu den entsprechenden Seiten gemäß des Leitfadens automatisch generiert
• Mehr Informationen finden sich unter dem Punkt Zusammenfassung

#4 Biete jederzeit die Möglichkeit an Kontakt aufzunehmen

• Das Leitfaden-Plugin bietet hierfür ein Widget Kontaktdaten an, mit dem die Kontaktdaten einfach eingepflegt werden können
• Diese können beispielsweise in den Header und/oder Footer platziert werden

#5 Gib dem Bürger die Möglichkeit sich zu erklären

• Bemerkungsfelder können an geeigneten Stellen als Textarea hinzugefügt werden
• Durch Anpassung der Option Max. Zeichen unter Bedingungen und Höhe (in px) unter Darstellung kann das Bemerkungsfeld individuell an die Situation angepasst werden 

#6 Komme den Fragen deiner Bürger zuvor

• Das Leitfaden-Plugin bietet hierfür ein Widget Hinweis an, mit dem fertig gesetzte Hilfeblöcke einfach in Formulare eingepflegt werden können
• Die Konfiguration entspricht dabei der eines normalen Text-Elements

#7 Positioniere die Feldbezeichnungen oberhalb des Feldes

• Die Position von Feldbezeichnungen ist in FORMCYCLE standardmäßig über dem Element
• Bei Formularelementen kann die Positionierung unter Elementeigenschaften Label angepasst werden

#8 Bilde sinnvolle visuelle Hierarchien

• Die in diesem Punkt angeregten Hervorhebungen durch Farbe und Fettschreibung werden durch das Leitfaden-Plugin vorgenommen
• Zusammenhängende Formularelemente können durch Verwendung von Fieldsets und Containern gruppiert werden
• Durch die Funktionsweise der Zusammenfassungs-Funktion des Leitfaden-Pluginswird folgende Verwendung empfohlen:
  • Verwendung von Fieldsets als erste Gruppierungsstufe, da durch diese in der Zusammenfassung Verlinkungen auf den jeweiligen Block vorhanden sind
  • Innerhalb von Fieldsets nur mit Containern oder unsichtbaren Containern gruppieren
  • Container ermöglichen dem Bürger durch Ihre Hintergrundfarbe, die darin enthaltenen Formularelemente deutlich als Gruppe wahrzunehmen

#9 Weise deinen Bürgern den Weg

• Durch das Leitfaden-Plugin wird das gerade aktive Formularelemente durch einen blauen Rahmen und eine dunklere Hintergrundfarbe hervorgehoben
• 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
• Erledigte Felder werden in der aktuellen Version des Leitfaden-Plugin nicht visuell zurückgestellt

#10 Gib deinen Bürgern auch Rückmeldungen

• In der aktuellen Version des Leitfaden-Plugin werden bereits richtig ausgefüllte Felder nicht optisch belohnt

#11 Wähle sinnvolle Feldgrößen

• Für das Eingeben von Text bietet FORMCYCLE die Formularelemente Eingabefeld und Textarea
• Eingabefelder eignen sich für die meisten Eingaben
  • Durch Platzieren von mehreren Eingabefeldern in einer Zeile und dem Hinzufügen von Abstandselmenten können Eingabefelder bei Bedarf kleiner gemacht werden
  • Der relative Anteil, den einzelne Formularfeld in einer Zeile annimmt kann durch das Anpassen des Wertes der Option Bereite in den Grundeigenschaften angepasst werden
  • 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
• Textareas können zum Beispiel für längere Freitextabschnitte verwendet werden
  • Standardmäßig ist bereits die Darstellungsoption Größe anpassen aktiv, wodurch das Feld mit den Eingaben des Nutzers mitwächst
  • Durch Höhe (in px) kann zudem die initiale Höhe der Textarea festgelegt werden
  • Die maximale mögliche Zeichenananzahl kann unter Bedingungen im Paramerter Max. Zeichen konfiguriert werden
  • 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

#12 Gehe sorgsam mit Auszeichnungen für Schrift um

• Verwendung von Fettschrift, Großschreibungen und Kursivschrift wird vom Formularersteller bestimmt
• Inhalte von Feldbezeichnungen und Textelementen werden in einem Rich-Text-Editor eingegeben und können dadurch im FORMCYCLE-Designer beliebig formatiert werden

#13 Mache Pflichtfelder in jeder Situation deutlich sichtbar

• Durch das Leitfaden-Plugin werden die Sterne, durch die Pflichtfelder gekennzeichnet werden, deutlich vergrößert
• Überschriften und Beschriftungen von Schaltflächen sind in FORMCYCLE bereits standardmäßig in Fettschrift und Fließtexte sind auch standardmäßig in normaler Schrift

#14 Hebe Schaltflächen hervor und beschrifte sie

• Bei den Kontrollschaltflächen von wiederholten Elementen werden durch das Leitfaden-Plugin entsprechend ihrer Funktion beschriftet und die Icons heben sich farblich deutlich ab

#15 Vermeide doppelte Eingaben

• Durch Verwendung von Auswahlfeldern mit Radiobuttons kann der Bürger gefragt werden, ob vorangegangene Eingaben oder ob er abweichende Daten eingeben möchte 
• Die Felder für abweichende Daten sind zunächst versteckt und werden über Sichtbar wenn-Bedingungen sichtbar
• Um die abhängig sichtbaren Eingabeelemente gruppieren zu können, können diese Beispielsweise in einen Container oder einen Unsichtbaren Container platziert werden

#16 Verwende vorausgefüllte Standardtexte als Beispielangabe

• Platzhalter können bei allen Eingabeelementtypen für Text unter Label eingetragen werden

#17 Gib proaktiv hilfreiche Hinweise und Erklärungen

• Hilfetexte können standardmäßig für alle Eingabeelemente in FORMCYCLE definiert werden
• Durch das Leitfaden-Plugin werden sie standardmäßig geöffnet werden, wenn das Feld ausgewählt wird

#18 Biete so oft wie möglich Auswahlfelder an

• Dropdown-Auswalelemente sind eine Ansichtsform des Elementtyps Auswahl
• Wenn Abfragen (z.B. Anrede, Staatsbürgerschaft, etc.) häufiger in Formularen vorkommen, können diese als Datenquelle hinterlegt und dadurch einfach eingebunden und für alle Formulare zentral gepflegt werden.

#19 Hilf deinen Bürgern Dokumente anzuhängen

• Das Leitfaden-Plugin passt das Aussehen des Uploadelements so an, dass die Standardansicht des verwendeten Webbrowsers durch eine neue Schaltfläche ersetzt wird
• 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

#20 Überprüfe die Angaben deiner Bürger

• An Eingabefeldern können im FORMCYCLE-Designer einfache Validatoren ausgewählt werden
• Zusätzliche Kontextabhängige Prüfungen können per JavaScript vorgenommen werden

#21 Mache Fehler sichtbar und erkläre sie

• FORMCYCLE markiert standardmäßig Felder, bei denen Angaben fehlen oder nicht valide sind und zeigt eine passende Fehlermeldung an. 
• Texte von Fehlermeldungen können im FORMCYCLE Backend unter i18n-Variablen gepflegt werden oder per JavaScript im Formular individuell überschrieben werden
• Das Aussehen von Fehlermeldungen kann über CSS zusätzlich angepasst werden

#22 Unterstütze die AutoFill-Funktion der Browser

• In FORMCYCLE ab Version 6.6.10 für Eingabefelder unter Erweitert   Automatisch ausfüllen konfigurierbar
• Alternativ können die entsprechenden Attribute auch bei Erweitert   Attribute festgelegt werden

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

• Zusätzliche Hinweise können als Textelement im Formular eingefügt werden

#24 Halte deine Bürger auf dem Laufenden

• Bei normaler Bearbeitung des Formulars durch die Sachbearbeiter kann nach jeder Bearbeitung eine E-Mail-Aktion zum Informieren des Kunden verwendet werden
• 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
• Über Statusverarbeitung kann zum Beispiel mithilfe eines Datum und Uhrzeit Trigger bzw. eines Zeitgesteuerten Statuswechsel nach einer definierten Zeitspanne in einen anderen Status gewechselt werden, in welchem dem Bürger eine automatische Statusinformation zugesendet wird

Technische Dokumentation des Leitfaden-Plugins

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.

Designanpassungen

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

CSS-Designanpassungen

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

Weiterhin kann am Upload-Element im Formular-Designer rechts unter "Erweitert" die CSS-Klasse "XUpload-Dropzone" am als Container-Klasse gesetzt werden. Das Upload-Element wird dann mit einem rechteckigen Kästchen dargestellt, wo man auch per Drag&Drop Dateien hochladen kann. 

Roboto-Schriftart

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

xm-vdt-bic

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

xm-vdt-iban

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

xm-vdt-iban-de

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

xm-vdt-steuerid

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

Formularwidget: Hinweis

Mit diesem Widget können farblich abgehobene Hinweistexte leichter im Formular platziert werden. Die Konfigurationsoptionen entsprechen denen von Text-Elementen.

Formularwidget: Kontaktdaten

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. 

Der Inhalt des Widgets kann auch aus einer CSV-Datenquelle 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.

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. 

Zusammenfassung

Durch das Plugin werden im FORMCYCLE-Designer zusätzliche Konfigurationsmöglichkeiten hinzugefügt, welche es ermöglichen, auf der letzten im Formular vorhandenen Seite eine Zusammenfassung anzuzeigen. Auf dieser Seite wird zuerst die Zusammenfassung aller vorangegangen Seiten angezeigt und darunter alle Elemente, welche im FORMCYCLE-Designer auf dieser Seite platziert wurden. 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 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 und Unsichtbaren Containern vorhanden.

Um die Zusammenfassung nutzen zu können, muss bei einer Schaltfläche Zusammenfassung + prüfen als Aktion konfiguriert werden. Dadurch wird beim Klicken auf diese Schaltfläche auf die Zusammenfassungsseite gesprungen.

Konfiguration von Formularelementen

Über die unter Darstellung zu findende Option Bei Zusammenfassung kann die Sichtbarkeit von Formularelementen in der Zusammenfassung gesteuert werden. Diese Option wird bei allen Formularelementen und 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. 

Folgende Optionen stehen zur Auswahl:

Sichtbarkeit automatisch

Das Element wird in der Zusammenfassung angezeigt, wenn es sichtbar ist und einen Wert hat oder vom Typ Bild ist. Standmäßig ist diese Option ausgewählt

nicht sichtbar

Das Element wird nicht in der Zusammenfassung angezeigt

Konfiguration der Schaltfläche

Das Leitfaden-Plugin fügt für Schaltflächen eine neue Aktion mit dem Namen Zusammenfassung + prüfen hinzu. Diese Aktion springt dabei immer auf die letzte im Formular vorhandene Seite.

Überschrift auf der Zusammenfassungsseite

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.

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

.CXPage[xn="pZusammenfassung"] .header h1 {
    /* Setzt die Schriftgröße des Titels der Zusammenfassungsseite auf 20 Pixel */
    font-size: 20px;
}
.CXPage[xn="pZusammenfassung"] .header h2 {
    /* Setzt die Schriftgröße des Untertitels der Zusammenfassungsseite auf 14 Pixel */
    font-size: 14px; 
    /* Sorgt dafür, dass der Text des Untertitel normal und nicht fett dargestellt wird */
    font-weight: normal; 
}

Drucken der Zusammenfassung

Um die Zusammenfassung drucken zu können, muss der Funktion showSummary() der Name der letzten Seite übergeben werden. Aufgerufen wird die Funktion innerhalb der on-print-Routine, d.h. wenn sich das Formular im Druckmodus befindet.

/* $.xutil.on('print') wird aufgerufen, wenn sich das Formular im Druckmodus befindet */
$.xutil.on('print', function(){
    /* nimmt alle Seiten des Formulars */
    var pages = $('.XPage') ;
    /* zählt die Seiten des Formulars (minus 1, weil JavaScript bei Null zu zählen anfängt) */    
    var lastPage = pages.get(pages.length - 1);
    /* er holt sich den Namen der letzten Seite */
    var lastPageName = $(lastPage).data('name');
    /* hier wird die letzte Seite der Funktion übergeben */ 
    $.leitfaden.showSummary(lastPageName);
});

Funktionen von $.leitfaden

Das Plugin enthält eine JavaScript-Bibliothek und stellt drei Hilfsfunktionen bereit, die über $.leitfaden verfügbar sind.

• setCompactMode(enabled: boolean)

- Beschreibung: Aktiviert den Kompaktmodus, der die Formatierung so ändert, dass das Formular kompakter angezeigt wird.

- Parameter:

- enabled (boolean): Aktiviert oder deaktiviert den Modus.

- Beispiel:

$.leitfaden.setCompactMode(true);

• showSummary(element: HTMLElement|string)

- Beschreibung: Zeigt die Zusammenfassung bis zur angegebenen Seite oder dem angegebenen Element an.

- Parameter:

- element (HTMLElement|string): Element, bis zu dem die Zusammenfassung angezeigt wird.

- Beispiel:

$.leitfaden.showSummary(lastPageName);

• showSummaryOn(requestTypes: string[])

- Beschreibung: Ähnlich wie showSummary, zeigt jedoch nur die Zusammenfassung für die angegebenen Anforderungstypen an und führt sonst keine Aktionen aus..

- Parameter:

- requestTypes (string[]): Anforderungstypen für die die Zusammenfassung angezeigt wird.

- Beispiel:

$.leitfaden.showSummaryOn(['provide', 'review']);

i18n Variablen

Verschiedene im Leitfaden-Plugin verwendete Texte können unter dem Menüpunkt Dateien & Templates > i18n-Variablen angepasst und internationalisiert werden. Hierfür muss in der Tabelle der Variablenname und der gewünschte Text in einer neuen Zeile eingetragen werden.

Einführungsvideo

Für die vorhergehende FORMCYCLE Version 6 gibt es ein Einführungsvideo für das Leitfaden-Plugin.

Versionshistorie

3.7.2

3.7.1

3.7.0

3.6.0

3.5.1

3.5.0

3.4.0

3.3.0

3.2.0

3.1.1

3.1.0

3.0.4

3.0.3

3.0.2

3.0.1

3.0.0