[KieLive#26] How to embed DMN and BPMN editors in your own application, by Paulo Martins

Let's learn how to enhance front-end applications by adding DMN or BPMN editors that allow visualization and interaction via events.

About this Event
Link to the live streaming: http://red.ht/KieLive26

Kogito tooling applications have evolved in the past months to allow developers to use BPMN and DMN editors on multiple environments, such as VS Code, Chrome, and Desktop. Still, there was a demand for using those editors in custom web applications.

Standalone editors have come to solve that demand. With them, it is now possible to import the editors using JS libraries and embed them even in simple HTML pages, for example. In this session, we will go over on how to install and use an editor, as well as integrate with it using its comprehensive API for setup and control of its actions.

About the invited speaker:
Paulo Martins is a Senior Software Engineer at Red Hat, part of the KIE Group team, and responsible for applications like Drools, jBPM, and OptaPlanner. He currently works mainly on Kogito tooling applications, enabling editors to be available on the most used developer environments.

Transcript

1. 1 BPMN and DMN Standalone Editors
2. BPMN and DMN Standalone Editors / Topics 2 Goal Installation Usage Walk-through
3. Goal: Create an easy way for users to embed BPMN and DMN editors in their own applications 3 BPMN and DMN Standalone Editors
4. BPMN and DMN Standalone Editors / History 4 VS Code extension Github Chrome extension Desktop App Online Editor
5. How to start using it? 5 BPMN and DMN Standalone Editors
6. BPMN and DMN Standalone Editors / Installation 6 1) Community hosted JS files <script src="https://kiegroup.github.io/kogito-online/standalone/dmn/index.js"></script> <script src="https://kiegroup.github.io/kogito-online/standalone/bpmn/index.js"></script> Add them to your application:
7. BPMN and DMN Standalone Editors / Installation 7 2) Manual download of each JS file Download the files at: • DMN Editor: https://kiegroup.github.io/kogito-online/standalone/dmn/index.js • BPMN Editor: https://kiegroup.github.io/kogito-online/standalone/bpmn/index.js Add them to your application: <script src="https://<YOUR_PAGE>/dmn/index.js"></script> <script src="https://<YOUR_PAGE>/bpmn/index.js"></script>
8. BPMN and DMN Standalone Editors / Installation 8 3) NPM package Available at https://www.npmjs.com/package/@kogito-tooling/kie-editors-standalone Add it to your package.json file: "@kogito-tooling/kie-editors-standalone": "0.8.2" ( you can use this command too: npm install @kogito-tooling/kie-editors-standalone ) Add them to your application: import * as DmnEditor from "@kogito-tooling/kie-editors-standalone/dist/dmn" import * as BpmnEditor from "@kogito-tooling/kie-editors-standalone/dist/bpmn"
9. Usage 9 BPMN and DMN Standalone Editors
10. BPMN and DMN Standalone Editors / Usage 10 const editor = DmnEditor.open({ container: document.getElementById("editor-container"), initialContent: Promise.resolve(""), readOnly: false, resources: new Map([ [ "MyIncludedModel.dmn", { contentType: "text", content: Promise.resolve("") } ] ]) });
11. BPMN and DMN Standalone Editors / Usage 11 const editor = DmnEditor.open({ container: document.getElementById("editor-container"), initialContent: Promise.resolve(""), readOnly: false, resources: new Map([ [ "MyIncludedModel.dmn", { contentType: "text", content: Promise.resolve("") } ] ]) }); const editor = BpmnEditor.open({ container: document.getElementById("editor-container"), initialContent: Promise.resolve(""), readOnly: false, resources: new Map([ [ "MyWorkDefinitions.wid", { contentType: "text", content: Promise.resolve("") } ] ]) });
12. BPMN and DMN Standalone Editors / Usage 12 const editor = DmnEditor.open({ container: document.getElementById("editor-container"), initialContent: Promise.resolve(""), readOnly: false, resources: new Map([ [ "MyIncludedModel.dmn", { contentType: "text", content: Promise.resolve("") } ] ]) }); container: <div id="editor-container" />
13. BPMN and DMN Standalone Editors / Usage 13 const editor = DmnEditor.open({ container: document.getElementById("editor-container"), initialContent: Promise.resolve(""), readOnly: false, resources: new Map([ [ "MyIncludedModel.dmn", { contentType: "text", content: Promise.resolve("") } ] ]) }); initialContent:n(content => content.text()) 1) Promise.resolve("") 2) Promise.resolve("DIAGRAM_CONTENT_DIRECTLY_HERE>") 3) fetch("MyDmnModel.dmn").then(content => content.text())
14. BPMN and DMN Standalone Editors / Usage 14 const editor = DmnEditor.open({ container: document.getElementById("editor-container"), initialContent: Promise.resolve(""), readOnly: false, resources: new Map([ [ "MyIncludedModel.dmn", { contentType: "text", content: Promise.resolve("") } ] ]) }); readOnly:n(content => content.text()) true or false
15. BPMN and DMN Standalone Editors / Usage 15 const editor = DmnEditor.open({ container: document.getElementById("editor-container"), initialContent: Promise.resolve(""), readOnly: false, resources: new Map([ [ "MyIncludedModel.dmn", { contentType: "text", content: Promise.resolve("") } ] ]) }); resources (optional):n(content => content.text()) new Map([ [ "MyIncludedModel1.dmn", { contentType: "text", content: Promise.resolve("") } ], [ "MyIncludedModel2.dmn", { contentType: "text", content: Promise.resolve("") } ] ])
16. BPMN and DMN Standalone Editors / Usage 16 Returned object: • getContent(): Promise<string> • setContent(content: string): void • getPreview(): Promise<string> • subscribeToContentChanges(callback: (isDirty: boolean) => void): (isDirty: boolean) => void • unsubscribeToContentChanges(callback: (isDirty: boolean) => void): void • markAsSaved(): void • undo(): void • redo(): void • close(): void
17. Walk-through 17 BPMN and DMN Standalone Editors
18. linkedin.com/company/red-hat youtube.com/user/RedHatVideos facebook.com/redhatinc twitter.com/RedHat 18 Thank you Paulo Martins Senior Software Engineer