Seminar Flowable Forms und Benutzeroberflächen

Die Schulung verbindet fachlich verständliche Formulare mit stabiler Datenbindung und einer konsistenten Benutzerführung. Formulare werden nicht isoliert betrachtet, sondern im Zusammenhang mit Start, Bearbeitung, Entscheidung, Dokumenten, Aufgabenabschluss und Fallnavigation.

Inhaltsverzeichnis

1. Einordnung und Einsatzfelder
2. Zielgruppe
3. Voraussetzungen
4. Lernziele
5. Seminarinhalte
   • Tag 1: Formulardesign, Datenbindung und Validierung
   • Tag 2: Dynamische Oberflächen, Inhalte und Work-Kontext
   • Tag 3: React-Erweiterungen, Qualität und Bereitstellung
6. Praxisprojekt
7. Arbeitsweise im Seminar

Einordnung und Einsatzfelder

Für Anforderungen außerhalb des Standardbaukastens wird die Erweiterung durch eigene Komponenten und Oberflächen behandelt. Barrierefreiheit, Validierung, Sicherheit, Testbarkeit und Deployment sind Bestandteil jedes Entwurfs.

Zielgruppe

Low-Code-Entwickler, UX-Verantwortliche, Flowable-Modeler, Frontend-Entwickler, Business Analysts und Solution Architects.

Voraussetzungen

Grundkenntnisse in Flowable Design. Für den dritten Tag sind JavaScript-, TypeScript- oder React-Grundkenntnisse hilfreich.

Lernziele

• Formulare mit sauberer Datenbindung und verständlicher Struktur erstellen.
• Dynamik, Validierung, Ergebnisaktionen und Dokumente kontrolliert einsetzen.
• Aufgaben-, Prozess-, Fall- und App-Oberflächen konsistent gestalten.
• Eigene Komponenten und UI-Erweiterungen mit React einbinden.
• Formulare barrierearm, sicher, testbar und wartbar veröffentlichen.

Seminarinhalte

Tag 1: Formulardesign, Datenbindung und Validierung

1. Schritt 1: Benutzeraufgaben, Eingabeentscheidungen und Informationsbedarf analysieren und daraus eine schlanke Formularstruktur ableiten.
2. Schritt 2: Layout, Abschnitte, wiederverwendbare Komponenten und responsive Anordnung für unterschiedliche Bildschirmgrößen gestalten.
3. Schritt 3: Felder an Variablen und Datentypen binden, Standardwerte definieren und eindeutige Lese- beziehungsweise Schreibverantwortung festlegen.
4. Schritt 4: Pflichtfelder, Wertebereiche, Formate und fachliche Quervergleiche mit verständlichen Fehlermeldungen validieren.
5. Schritt 5: Start-, Aufgaben- und Ergebnisformulare in einem einfachen Prozess veröffentlichen und mit realistischen Daten testen.

Tag 2: Dynamische Oberflächen, Inhalte und Work-Kontext

1. Schritt 1: Sichtbarkeit, Aktivierung, Berechnung und abhängige Auswahllisten aus Rollen, Status und Formulardaten steuern.
2. Schritt 2: Datentabellen, wiederholbare Bereiche, modale Dialoge und komplexe Auswahlkomponenten sinnvoll einsetzen.
3. Schritt 3: Dokumente, Anhänge, Vorschau, Ordner und Metadaten in Aufgaben und Fällen integrieren.
4. Schritt 4: Ergebnisaktionen, Buttons und Zwischenvalidierung mit Prozess- oder Fallfortschritt verbinden.
5. Schritt 5: App-Seiten, Fallseiten, Detailansichten und Navigation so kombinieren, dass Benutzer Kontextwechsel vermeiden.

Tag 3: React-Erweiterungen, Qualität und Bereitstellung

1. Schritt 1: Entscheiden, wann Standardkomponenten, benutzerdefinierte Formularfunktionen oder eigene React-Komponenten erforderlich sind.
2. Schritt 2: Eine eigene Komponente mit klarer Property-Schnittstelle, Datenbindung, Ereignissen und Fehlerdarstellung implementieren.
3. Schritt 3: Theming, Übersetzungen, CSS-Anpassungen und Erweiterungspunkte der Work-Oberfläche strukturiert anwenden.
4. Schritt 4: Barrierefreiheit, Tastaturbedienung, Datenschutz, XSS-Schutz und performante Darstellung großer Datenmengen prüfen.
5. Schritt 5: Komponenten bauen, versionieren, automatisiert testen, in die Zielanwendung integrieren und kontrolliert bereitstellen.

Praxisprojekt

Im Praxisprojekt entsteht eine mehrstufige Benutzeroberfläche mit dynamischem Aufgabenformular, Dokumentbereich, Datentabelle, Ergebnisaktionen und einer eigenen wiederverwendbaren Komponente.

• Formular und Datenvertrag entwerfen.
• Dynamische Logik und Dokumente ergänzen.
• Eigene Komponente implementieren.
• Barrierefreiheits- und Funktionstest durchführen.

Arbeitsweise im Seminar

Die Inhalte werden in kurzen fachlichen Einführungen, Live-Demonstrationen und aufeinander aufbauenden Übungen erarbeitet. Jeder Arbeitsschritt wird zunächst begründet, anschließend am System umgesetzt und danach anhand eines prüfbaren Ergebnisses kontrolliert. Fehlerbilder und alternative Lösungswege werden bewusst einbezogen.