Tweet
Tweet

Slide 1

Slide 1 text

1 BPMN and DMN Standalone Editors

Slide 2

Slide 2 text

BPMN and DMN Standalone Editors / Topics 2 Goal Installation Usage Walk-through

Slide 3

Slide 3 text

Goal: Create an easy way for users to embed BPMN and DMN editors in their own applications 3 BPMN and DMN Standalone Editors

Slide 4

Slide 4 text

BPMN and DMN Standalone Editors / History 4 VS Code extension Github Chrome extension Desktop App Online Editor

Slide 5

Slide 5 text

How to start using it? 5 BPMN and DMN Standalone Editors

Slide 6

Slide 6 text

BPMN and DMN Standalone Editors / Installation 6 1) Community hosted JS files Add them to your application:

Slide 7

Slide 7 text

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:

Slide 8

Slide 8 text

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"

Slide 9

Slide 9 text

Usage 9 BPMN and DMN Standalone Editors

Slide 10

Slide 10 text

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("") } ] ]) });

Slide 11

Slide 11 text

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("") } ] ]) });

Slide 12

Slide 12 text

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:

Slide 13

Slide 13 text

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())

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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("") } ] ])

Slide 16

Slide 16 text

BPMN and DMN Standalone Editors / Usage 16 Returned object: ● getContent(): Promise ● setContent(content: string): void ● getPreview(): Promise ● subscribeToContentChanges(callback: (isDirty: boolean) => void): (isDirty: boolean) => void ● unsubscribeToContentChanges(callback: (isDirty: boolean) => void): void ● markAsSaved(): void ● undo(): void ● redo(): void ● close(): void

Slide 17

Slide 17 text

Walk-through 17 BPMN and DMN Standalone Editors

Slide 18

Slide 18 text

linkedin.com/company/red-hat youtube.com/user/RedHatVideos facebook.com/redhatinc twitter.com/RedHat 18 Thank you Paulo Martins Senior Software Engineer