Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

KIE Community
February 23, 2021

[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.

KIE Community

February 23, 2021
Tweet

More Decks by KIE Community

Other Decks in Technology

Transcript

  1. Goal: Create an easy way for users to embed BPMN

    and DMN editors in their own applications 3 BPMN and DMN Standalone Editors
  2. BPMN and DMN Standalone Editors / History 4 VS Code

    extension Github Chrome extension Desktop App Online Editor
  3. 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:
  4. 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>
  5. 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"
  6. 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("") } ] ]) });
  7. 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("") } ] ]) });
  8. 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" />
  9. 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())
  10. 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
  11. 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("") } ] ])
  12. 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