Seminar bpmn.io – bpmn-js in Webanwendungen einbetten

Dieses Praxisseminar erschließt bpmn-js als eingebetteten BPMN-Viewer und als browserbasierten Modeler. Im Mittelpunkt stehen eine belastbare Projektstruktur, der kontrollierte Import und Export von BPMN-XML, die Interaktion mit dem Diagramm sowie die Integration in bestehende Webanwendungen. Die Arbeit erfolgt an einer kleinen Fachanwendung, die schrittweise vom reinen Viewer zu einem editierbaren Modellierungsbaustein ausgebaut wird.

Inhaltsübersicht

1. Kapitel 1: Tag 1: Viewer, Projektstruktur und Diagramm-Lebenszyklus
2. Kapitel 2: Tag 2: Modeler, Interaktion und Anwendungsintegration

Lernziele

• Projektaufbau, Abhängigkeiten und Containerstruktur fachlich einordnen, praktisch umsetzen und anhand definierter Prüfpunkte bewerten
• BPMN-XML importieren, darstellen und exportieren fachlich einordnen, praktisch umsetzen und anhand definierter Prüfpunkte bewerten
• Modeler-Bootstrap, Palette und Context Pad fachlich einordnen, praktisch umsetzen und anhand definierter Prüfpunkte bewerten
• Modellierungs-API und programmatische Änderungen fachlich einordnen, praktisch umsetzen und anhand definierter Prüfpunkte bewerten

Kapitel 1: Tag 1: Viewer, Projektstruktur und Diagramm-Lebenszyklus

Der erste Tag schafft eine reproduzierbare Einbettung und einen kontrollierten BPMN-XML-Lebenszyklus.

Kapitelinhaltsverzeichnis: 1.1 Projektaufbau, Abhängigkeiten und Containerstruktur; 1.2 BPMN-XML importieren, darstellen und exportieren; 1.3 Canvas, Zoom, Auswahl und Diagrammereignisse; 1.4 Fehlerbehandlung, Warnungen und Ladezustände

1. Schritt 1: Projektaufbau, Abhängigkeiten und Containerstruktur

   Zunächst wird „Projektaufbau, Abhängigkeiten und Containerstruktur“ systematisch eingeordnet. Begriffe, Verantwortlichkeiten, Eingaben und erwartete Artefakte werden abgegrenzt. Das Teilziel wird mit den Qualitätskriterien des Kapitels verbunden.

2. Schritt 2: BPMN-XML importieren, darstellen und exportieren

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

3. Schritt 3: Canvas, Zoom, Auswahl und Diagrammereignisse

   Im nächsten Schritt wird „Canvas, Zoom, Auswahl und Diagrammereignisse“ 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: Fehlerbehandlung, Warnungen und Ladezustände

   Abschließend wird „Fehlerbehandlung, Warnungen und Ladezustä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 BPMN-Viewer wird in eine vorbereitete Anwendung eingebettet, mit einem Beispieldiagramm geladen und um robuste Lade-, Fehler- und Statusanzeigen ergänzt.

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

Kapitel 2: Tag 2: Modeler, Interaktion und Anwendungsintegration

Der zweite Tag erweitert den Viewer zu einem editierbaren Modellierungsbaustein und verbindet ihn mit der umgebenden Anwendung.

Kapitelinhaltsverzeichnis: 2.1 Modeler-Bootstrap, Palette und Context Pad; 2.2 Modellierungs-API und programmatische Änderungen; 2.3 Overlays, Marker und fachliche Zusatzinformationen; 2.4 Speicherung, Versionsgrenzen und Integrationsschnittstellen

1. Schritt 1: Modeler-Bootstrap, Palette und Context Pad

   Zunächst wird „Modeler-Bootstrap, Palette und Context Pad“ systematisch eingeordnet. Begriffe, Verantwortlichkeiten, Eingaben und erwartete Artefakte werden abgegrenzt. Das Teilziel wird mit den Qualitätskriterien des Kapitels verbunden.

2. Schritt 2: Modellierungs-API und programmatische Änderungen

   Danach wird „Modellierungs-API und programmatische Änderungen“ am Schulungssystem umgesetzt. Einstellungen, Dateien und Modellierungsschritte werden in einer nachvollziehbaren Reihenfolge ausgeführt; jeder Zwischenstand wird unmittelbar kontrolliert.

3. Schritt 3: Overlays, Marker und fachliche Zusatzinformationen

   Im nächsten Schritt wird „Overlays, Marker und fachliche Zusatzinformationen“ 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, Versionsgrenzen und Integrationsschnittstellen

   Abschließend wird „Speicherung, Versionsgrenzen und Integrationsschnittstellen“ 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 editierbare Modellierungsoberfläche wird mit Speichern, Laden, Änderungsstatus, fachlichen Overlays und einer klaren Schnittstelle zur Host-Anwendung fertiggestellt.

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

Zielgruppe und Voraussetzungen

Zielgruppe: Webentwickler, Frontend- und Full-Stack-Entwickler, Softwarearchitekten sowie technische Produktteams.

Voraussetzungen: Sichere Grundlagen in JavaScript oder TypeScript, HTML, CSS, npm-basierten Buildprozessen und asynchroner Programmierung.

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.