Seminar bpmn.io – dmn-js und form-js einbetten und erweitern

Dieses Seminar verbindet Entscheidungsmodellierung und Formulargestaltung in einer gemeinsamen Webanwendung. dmn-js wird als Viewer und Editor für Entscheidungsanforderungsdiagramme, Entscheidungstabellen und Ausdrücke eingebettet. form-js ergänzt einen visuellen Form Editor und einen ausführbaren Form Viewer. Anschließend werden Events, Eigenschaften, Validierung, Datenübergabe und Erweiterungspunkte zu einer konsistenten Integrationsarchitektur zusammengeführt.

Inhaltsübersicht

1. Kapitel 1: Tag 1: dmn-js Viewer und Modeler
2. Kapitel 2: Tag 2: form-js Editor, Viewer und Datenfluss
3. Kapitel 3: Tag 3: Gemeinsame Architektur und Produktintegration

Lernziele

• DMN-XML, Views und aktiver Editor fachlich einordnen, praktisch umsetzen und anhand definierter Prüfpunkte bewerten
• Entscheidungsanforderungsdiagramme und Navigation fachlich einordnen, praktisch umsetzen und anhand definierter Prüfpunkte bewerten
• Formschema, Komponenten und Eigenschaften fachlich einordnen, praktisch umsetzen und anhand definierter Prüfpunkte bewerten
• Editor-Einbettung und Formulargestaltung fachlich einordnen, praktisch umsetzen und anhand definierter Prüfpunkte bewerten
• Gemeinsame Projektstruktur und Buildkonfiguration fachlich einordnen, praktisch umsetzen und anhand definierter Prüfpunkte bewerten
• Eventverarbeitung und Zustandsmanagement fachlich einordnen, praktisch umsetzen und anhand definierter Prüfpunkte bewerten

Kapitel 1: Tag 1: dmn-js Viewer und Modeler

DMN-Artefakte werden im Browser geladen, navigiert, bearbeitet und kontrolliert gespeichert.

Kapitelinhaltsverzeichnis: 1.1 DMN-XML, Views und aktiver Editor; 1.2 Entscheidungsanforderungsdiagramme und Navigation; 1.3 Entscheidungstabellen und Literal Expressions; 1.4 Import, Export, Warnungen und Versionsprüfung

1. Schritt 1: DMN-XML, Views und aktiver Editor

   Zunächst wird „DMN-XML, Views und aktiver Editor“ systematisch eingeordnet. Begriffe, Verantwortlichkeiten, Eingaben und erwartete Artefakte werden abgegrenzt. Das Teilziel wird mit den Qualitätskriterien des Kapitels verbunden.

2. Schritt 2: Entscheidungsanforderungsdiagramme und Navigation

   Danach wird „Entscheidungsanforderungsdiagramme und Navigation“ am Schulungssystem umgesetzt. Einstellungen, Dateien und Modellierungsschritte werden in einer nachvollziehbaren Reihenfolge ausgeführt; jeder Zwischenstand wird unmittelbar kontrolliert.

3. Schritt 3: Entscheidungstabellen und Literal Expressions

   Im nächsten Schritt wird „Entscheidungstabellen und Literal Expressions“ mit Positiv-, Grenz- und Fehlerfällen geprüft. Meldungen, Modellartefakte und sichtbares Verhalten werden ausgewertet, damit Abweichungen nicht nur behoben, sondern ursächlich verstanden werden.

4. Schritt 4: Import, Export, Warnungen und Versionsprüfung

   Abschließend wird „Import, Export, Warnungen und Versionsprüfung“ in eine wiederverwendbare Arbeitsanweisung überführt. Reviewpunkte, Versionshinweise, Zuständigkeiten und typische Fehlermuster werden so dokumentiert, dass der Ablauf im Projekt reproduzierbar bleibt.

Praxisaufgabe: Ein tabbasierter DMN-Editor wird eingebettet, lädt mehrere Sichten eines Modells und speichert Änderungen mit Fehler- und Warnungsanzeige.

Kontrollpunkte: Das Ergebnis ist reproduzierbar, fachlich nachvollziehbar, ohne ungeklärte Warnungen gespeichert und anhand mindestens eines Fehlerfalls geprüft.

Kapitel 2: Tag 2: form-js Editor, Viewer und Datenfluss

Formulare werden visuell erstellt, mit Daten versorgt, validiert und in eine Host-Anwendung eingebettet.

Kapitelinhaltsverzeichnis: 2.1 Formschema, Komponenten und Eigenschaften; 2.2 Editor-Einbettung und Formulargestaltung; 2.3 Viewer, Eingabedaten, Validierung und Submission; 2.4 Eigene Komponenten und Properties-Panel-Erweiterungen

1. Schritt 1: Formschema, Komponenten und Eigenschaften

   Zunächst wird „Formschema, Komponenten und Eigenschaften“ systematisch eingeordnet. Begriffe, Verantwortlichkeiten, Eingaben und erwartete Artefakte werden abgegrenzt. Das Teilziel wird mit den Qualitätskriterien des Kapitels verbunden.

2. Schritt 2: Editor-Einbettung und Formulargestaltung

   Danach wird „Editor-Einbettung und Formulargestaltung“ am Schulungssystem umgesetzt. Einstellungen, Dateien und Modellierungsschritte werden in einer nachvollziehbaren Reihenfolge ausgeführt; jeder Zwischenstand wird unmittelbar kontrolliert.

3. Schritt 3: Viewer, Eingabedaten, Validierung und Submission

   Im nächsten Schritt wird „Viewer, Eingabedaten, Validierung und Submission“ mit Positiv-, Grenz- und Fehlerfällen geprüft. Meldungen, Modellartefakte und sichtbares Verhalten werden ausgewertet, damit Abweichungen nicht nur behoben, sondern ursächlich verstanden werden.

4. Schritt 4: Eigene Komponenten und Properties-Panel-Erweiterungen

   Abschließend wird „Eigene Komponenten und Properties-Panel-Erweiterungen“ in eine wiederverwendbare Arbeitsanweisung überführt. Reviewpunkte, Versionshinweise, Zuständigkeiten und typische Fehlermuster werden so dokumentiert, dass der Ablauf im Projekt reproduzierbar bleibt.

Praxisaufgabe: Ein Fachformular wird modelliert, als Viewer ausgeführt und um eine kontrollierte eigene Komponente mit Validierung erweitert.

Kontrollpunkte: Das Ergebnis ist reproduzierbar, fachlich nachvollziehbar, ohne ungeklärte Warnungen gespeichert und anhand mindestens eines Fehlerfalls geprüft.

Kapitel 3: Tag 3: Gemeinsame Architektur und Produktintegration

Entscheidungen und Formulare werden mit konsistenten Zuständen, Schnittstellen und Tests verbunden.

Kapitelinhaltsverzeichnis: 3.1 Gemeinsame Projektstruktur und Buildkonfiguration; 3.2 Eventverarbeitung und Zustandsmanagement; 3.3 Datenmapping zwischen Formular und Entscheidung; 3.4 Tests, Fehlerbilder und wartbare Erweiterungsgrenzen

1. Schritt 1: Gemeinsame Projektstruktur und Buildkonfiguration

   Zunächst wird „Gemeinsame Projektstruktur und Buildkonfiguration“ systematisch eingeordnet. Begriffe, Verantwortlichkeiten, Eingaben und erwartete Artefakte werden abgegrenzt. Das Teilziel wird mit den Qualitätskriterien des Kapitels verbunden.

2. Schritt 2: Eventverarbeitung und Zustandsmanagement

   Danach wird „Eventverarbeitung und Zustandsmanagement“ am Schulungssystem umgesetzt. Einstellungen, Dateien und Modellierungsschritte werden in einer nachvollziehbaren Reihenfolge ausgeführt; jeder Zwischenstand wird unmittelbar kontrolliert.

3. Schritt 3: Datenmapping zwischen Formular und Entscheidung

   Im nächsten Schritt wird „Datenmapping zwischen Formular und Entscheidung“ mit Positiv-, Grenz- und Fehlerfällen geprüft. Meldungen, Modellartefakte und sichtbares Verhalten werden ausgewertet, damit Abweichungen nicht nur behoben, sondern ursächlich verstanden werden.

4. Schritt 4: Tests, Fehlerbilder und wartbare Erweiterungsgrenzen

   Abschließend wird „Tests, Fehlerbilder und wartbare Erweiterungsgrenzen“ in eine wiederverwendbare Arbeitsanweisung überführt. Reviewpunkte, Versionshinweise, Zuständigkeiten und typische Fehlermuster werden so dokumentiert, dass der Ablauf im Projekt reproduzierbar bleibt.

Praxisaufgabe: Eine kleine Anwendung übergibt Formulardaten an einen Entscheidungsdienst, zeigt die Entscheidungsstruktur an und behandelt unvollständige oder fehlerhafte Eingaben nachvollziehbar.

Kontrollpunkte: Das Ergebnis ist reproduzierbar, fachlich nachvollziehbar, ohne ungeklärte Warnungen gespeichert und anhand mindestens eines Fehlerfalls geprüft.

Zielgruppe und Voraussetzungen

Zielgruppe: Webentwickler, Entscheidungsmanagement-Teams, Formularentwickler, Softwarearchitekten und technische Produktverantwortliche.

Voraussetzungen: JavaScript- oder TypeScript-Praxis, Webentwicklungsgrundlagen sowie grundlegendes Verständnis von DMN-Entscheidungen und formularbasierten Eingaben.

Didaktik und Arbeitsweise

Kurze Fachimpulse wechseln mit Demonstrationen, strukturierten Arbeitsschritten, eigenständigen Übungen und kontrollierten Fehlerfällen. Jede Aufgabe enthält Ausgangslage, Ziel, Umsetzung, Prüfpunkte und Dokumentationsanforderungen. Dadurch entstehen nicht nur funktionierende Modelle oder Erweiterungen, sondern wiederholbare Vorgehensweisen für Projekt- und Teamarbeit.