Seminar bpmn.io Intensivseminar – Einbettung, Erweiterung und Integration

Das Intensivseminar bündelt den vollständigen bpmn.io-Entwicklungspfad in einem zusammenhängenden Projekt. bpmn-js wird als Viewer und Modeler eingebettet, anschließend durch Renderer, Palette, Context Pad, Regeln und Properties Panel erweitert. Moddle-Deskriptoren sichern domänenspezifische Daten im XML. dmn-js und form-js ergänzen Entscheidungen und Formulare. Am Ende steht eine getestete, paketierte Modellierungsanwendung mit dokumentierten Erweiterungsgrenzen.

Inhaltsübersicht

1. Kapitel 1: Tag 1: bpmn-js Viewer, Modeler und XML-Lebenszyklus
2. Kapitel 2: Tag 2: Visuelle Erweiterungen und Controls
3. Kapitel 3: Tag 3: Regeln, Properties Panel und Moddle
4. Kapitel 4: Tag 4: dmn-js und form-js
5. Kapitel 5: Tag 5: Tests, Packaging und Produktarchitektur

Lernziele

• Projektstruktur, Bundle und Styles fachlich einordnen, praktisch umsetzen und anhand definierter Prüfpunkte bewerten
• Viewer, Modeler und BPMN-XML fachlich einordnen, praktisch umsetzen und anhand definierter Prüfpunkte bewerten
• Modularchitektur und Dependency Injection fachlich einordnen, praktisch umsetzen und anhand definierter Prüfpunkte bewerten
• Custom Renderer, Marker und Overlays fachlich einordnen, praktisch umsetzen und anhand definierter Prüfpunkte bewerten
• Custom Modeling Rules fachlich einordnen, praktisch umsetzen und anhand definierter Prüfpunkte bewerten
• Properties-Panel-Provider fachlich einordnen, praktisch umsetzen und anhand definierter Prüfpunkte bewerten
• DMN Viewer, Modeler und Views fachlich einordnen, praktisch umsetzen und anhand definierter Prüfpunkte bewerten
• Entscheidungstabellen und Properties fachlich einordnen, praktisch umsetzen und anhand definierter Prüfpunkte bewerten

Kapitel 1: Tag 1: bpmn-js Viewer, Modeler und XML-Lebenszyklus

Die Anwendung erhält eine stabile Grundlage für Anzeige, Bearbeitung und Speicherung von BPMN.

Kapitelinhaltsverzeichnis: 1.1 Projektstruktur, Bundle und Styles; 1.2 Viewer, Modeler und BPMN-XML; 1.3 Canvas, Events und Modeling API; 1.4 Speicherung, Warnungen und Fehlerzustände

1. Schritt 1: Projektstruktur, Bundle und Styles

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

2. Schritt 2: Viewer, Modeler und BPMN-XML

   Danach wird „Viewer, Modeler und BPMN-XML“ am Schulungssystem umgesetzt. Einstellungen, Dateien und Modellierungsschritte werden in einer nachvollziehbaren Reihenfolge ausgeführt; jeder Zwischenstand wird unmittelbar kontrolliert.

3. Schritt 3: Canvas, Events und Modeling API

   Im nächsten Schritt wird „Canvas, Events und Modeling API“ 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: Speicherung, Warnungen und Fehlerzustände

   Abschließend wird „Speicherung, Warnungen und Fehlerzustände“ 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 vollständiger Viewer/Modeler-Grundbau mit Lade-, Speicher- und Fehlerzuständen wird erstellt.

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

Kapitel 2: Tag 2: Visuelle Erweiterungen und Controls

Domänenspezifische Interaktionen werden als eigenständige Module umgesetzt.

Kapitelinhaltsverzeichnis: 2.1 Modularchitektur und Dependency Injection; 2.2 Custom Renderer, Marker und Overlays; 2.3 Palette und Context Pad; 2.4 Events, Commands und Undo/Redo

1. Schritt 1: Modularchitektur und Dependency Injection

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

2. Schritt 2: Custom Renderer, Marker und Overlays

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

3. Schritt 3: Palette und Context Pad

   Im nächsten Schritt wird „Palette und Context Pad“ 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: Events, Commands und Undo/Redo

   Abschließend wird „Events, Commands und Undo/Redo“ in eine wiederverwendbare Arbeitsanweisung überführt. Reviewpunkte, Versionshinweise, Zuständigkeiten und typische Fehlermuster werden so dokumentiert, dass der Ablauf im Projekt reproduzierbar bleibt.

Praxisaufgabe: Die Anwendung erhält eigene Visualisierung und Erzeugungsaktionen, ohne Kernmodule zu verändern.

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

Kapitel 3: Tag 3: Regeln, Properties Panel und Moddle

Fachliche Daten und Modellierungsregeln werden persistent und editierbar.

Kapitelinhaltsverzeichnis: 3.1 Custom Modeling Rules; 3.2 Properties-Panel-Provider; 3.3 Moddle-Deskriptor und Extension Elements; 3.4 Validierung, Versionierung und Migration

1. Schritt 1: Custom Modeling Rules

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

2. Schritt 2: Properties-Panel-Provider

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

3. Schritt 3: Moddle-Deskriptor und Extension Elements

   Im nächsten Schritt wird „Moddle-Deskriptor und Extension Elements“ 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: Validierung, Versionierung und Migration

   Abschließend wird „Validierung, Versionierung und Migration“ 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 eigenes Fachattribut wird im XML gespeichert, im Panel bearbeitet und durch Regeln abgesichert.

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

Kapitel 4: Tag 4: dmn-js und form-js

Entscheidungen und Formulare ergänzen die Modellierungsanwendung.

Kapitelinhaltsverzeichnis: 4.1 DMN Viewer, Modeler und Views; 4.2 Entscheidungstabellen und Properties; 4.3 Form Editor, Viewer und Datenbindung; 4.4 Gemeinsame Zustände und Schnittstellen

1. Schritt 1: DMN Viewer, Modeler und Views

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

2. Schritt 2: Entscheidungstabellen und Properties

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

3. Schritt 3: Form Editor, Viewer und Datenbindung

   Im nächsten Schritt wird „Form Editor, Viewer und Datenbindung“ 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: Gemeinsame Zustände und Schnittstellen

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

Praxisaufgabe: DMN- und Form-Komponenten werden eingebettet und mit einem gemeinsamen Projekt- und Datenkontext verbunden.

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

Kapitel 5: Tag 5: Tests, Packaging und Produktarchitektur

Das Gesamtprojekt wird reproduzierbar getestet, gebaut und für Weiterentwicklung vorbereitet.

Kapitelinhaltsverzeichnis: 5.1 Unit-, Integrations- und Browser-Tests; 5.2 Custom Bundle und Buildoptimierung; 5.3 Kompatibilität und Upgrade-Strategie; 5.4 Releasepaket, Diagnose und Betriebsdokumentation

1. Schritt 1: Unit-, Integrations- und Browser-Tests

   Zunächst wird „Unit-, Integrations- und Browser-Tests“ systematisch eingeordnet. Begriffe, Verantwortlichkeiten, Eingaben und erwartete Artefakte werden abgegrenzt. Das Teilziel wird mit den Qualitätskriterien des Kapitels verbunden.

2. Schritt 2: Custom Bundle und Buildoptimierung

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

3. Schritt 3: Kompatibilität und Upgrade-Strategie

   Im nächsten Schritt wird „Kompatibilität und Upgrade-Strategie“ 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: Releasepaket, Diagnose und Betriebsdokumentation

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

Praxisaufgabe: Die Anwendung wird automatisiert geprüft, paketiert und mit einer technischen Betriebs- und Upgradeanweisung abgenommen.

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

Zielgruppe und Voraussetzungen

Zielgruppe: Erfahrene Webentwickler, Frontend- und Plattformarchitekten, Entwickler eigener Modellierungsprodukte und technische Leads.

Voraussetzungen: Sehr gute JavaScript- oder TypeScript-Kenntnisse, npm- und Buildpraxis sowie BPMN-Grundverständnis.

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.