Chapter 2. Red Hat Process Automation Manager BPMN and DMN modelers Red Hat Process Automation Manager provides the following extensions or applications that you can use to design Business Process Model and Notation (BPMN) process models and Decision Model and Notation (DMN) decision models using graphical modelers. Business Central : Enables you to view and design BPMN models, DMN models, and test scenario files in a related embedded designer. To use Business Central, you can set up a development environment containing a Business Central to design business rules and processes, and a KIE Server to execute and test the created business rules and processes. Red Hat Process Automation Manager VS Code extension : Enables you to view and design BPMN models, DMN models, and test scenario files in Visual Studio Code (VS Code). The VS Code extension requires VS Code 1.46.0 or later. To install the Red Hat Process Automation Manager VS Code extension, select the Extensions menu option in VS Code and search for and install the Red Hat Business Automation Bundle extension. Standalone BPMN and DMN editors : Enable you to view and design BPMN and DMN models embedded in your web applications. To download the necessary files, you can either use the NPM artifacts from the NPM registry or download the JavaScript files directly for the DMN standalone editor library at https://<YOUR_PAGE>/dmn/index.js and for the BPMN standalone editor library at https://<YOUR_PAGE>/bpmn/index.js . 2.1. Installing the Red Hat Process Automation Manager VS Code extension bundle Red Hat Process Automation Manager provides a Red Hat Business Automation Bundle VS Code extension that enables you to design Decision Model and Notation (DMN) decision models, Business Process Model and Notation (BPMN) 2.0 business processes, and test scenarios directly in VS Code. VS Code is the preferred integrated development environment (IDE) for developing new business applications. Red Hat Process Automation Manager also provides individual DMN Editor and BPMN Editor VS Code extensions for DMN or BPMN support only, if needed. Important The editors in the VS Code are partially compatible with the editors in the Business Central, and several Business Central features are not supported in the VS Code. Prerequisites The latest stable version of VS Code is installed. Procedure In your VS Code IDE, select the Extensions menu option and search for Red Hat Business Automation Bundle for DMN, BPMN, and test scenario file support. For DMN or BPMN file support only, you can also search for the individual DMN Editor or BPMN Editor extensions. When the Red Hat Business Automation Bundle extension appears in VS Code, select it and click Install . For optimal VS Code editor behavior, after the extension installation is complete, reload or close and re-launch your instance of VS Code. After you install the VS Code extension bundle, any .dmn , .bpmn , or .bpmn2 files that you open or create in VS Code are automatically displayed as graphical models. Additionally, any .scesim files that you open or create are automatically displayed as tabular test scenario models for testing the functionality of your business decisions. If the DMN, BPMN, or test scenario modelers open only the XML source of a DMN, BPMN, or test scenario file and displays an error message, review the reported errors and the model file to ensure that all elements are correctly defined. Note For new DMN or BPMN models, you can also enter dmn.new or bpmn.new in a web browser to design your DMN or BPMN model in the online modeler. When you finish creating your model, you can click Download in the online modeler page to import your DMN or BPMN file into your Red Hat Process Automation Manager project in VS Code. 2.2. Configuring the Red Hat Process Automation Manager standalone editors Red Hat Process Automation Manager provides standalone editors that are distributed in a self-contained library providing an all-in-one JavaScript file for each editor. The JavaScript file uses a comprehensive API to set and control the editor. You can install the standalone editors using the following methods: Download each JavaScript file manually Use the NPM package Procedure Install the standalone editors using one of the following methods: Download each JavaScript file manually : For this method, follow these steps: Download the JavaScript files. Add the downloaded Javascript files to your hosted application. Add the following <script> tag to your HTML page: Script tag for your HTML page for the DMN editor Script tag for your HTML page for the BPMN editor Use the NPM package : For this method, follow these steps: Add the NPM package to your package.json file: Adding the NPM package Import each editor library to your TypeScript file: Importing each editor After you install the standalone editors, open the required editor by using the provided editor API, as shown in the following example for opening a DMN editor. The API is the same for each editor. Opening the DMN standalone editor const editor = DmnEditor.open({ container: document.getElementById("dmn-editor-container"), initialContent: Promise.resolve(""), readOnly: false, origin: "", resources: new Map([ [ "MyIncludedModel.dmn", { contentType: "text", content: Promise.resolve("") } ] ]) }); Use the following parameters with the editor API: Table 2.1. Example parameters Parameter Description container HTML element in which the editor is appended. initialContent Promise to a DMN model content. This parameter can be empty, as shown in the following examples: Promise.resolve("") Promise.resolve("<DIAGRAM_CONTENT_DIRECTLY_HERE>") fetch("MyDmnModel.dmn").then(content ⇒ content.text()) readOnly (Optional) Enables you to allow changes in the editor. Set to false (default) to allow content editing and true for read-only mode in editor. origin (Optional) Origin of the repository. The default value is window.location.origin . resources (Optional) Map of resources for the editor. For example, this parameter is used to provide included models for the DMN editor or work item definitions for the BPMN editor. Each entry in the map contains a resource name and an object that consists of content-type ( text or binary ) and content (similar to the initialContent parameter). The returned object contains the methods that are required to manipulate the editor. Table 2.2. Returned object methods Method Description getContent(): Promise<string> Returns a promise containing the editor content. setContent(path: string, content: string): void Sets the content of the editor. getPreview(): Promise<string> Returns a promise containing an SVG string of the current diagram. subscribeToContentChanges(callback: (isDirty: boolean) ⇒ void): (isDirty: boolean) ⇒ void Sets a callback to be called when the content changes in the editor and returns the same callback to be used for unsubscription. unsubscribeToContentChanges(callback: (isDirty: boolean) ⇒ void): void Unsubscribes the passed callback when the content changes in the editor. markAsSaved(): void Resets the editor state that indicates that the content in the editor is saved. Also, it activates the subscribed callbacks related to content change. undo(): void Undoes the last change in the editor. Also, it activates the subscribed callbacks related to content change. redo(): void Redoes the last undone change in the editor. Also, it activates the subscribed callbacks related to content change. close(): void Closes the editor. getElementPosition(selector: string): Promise<Rect> Provides an alternative to extend the standard query selector when an element lives inside a canvas or a video component. The selector parameter must follow the <PROVIDER>:::<SELECT> format, such as Canvas:::MySquare or Video:::PresenterHand . This method returns a Rect representing the element position. envelopeApi: MessageBusClientApi<KogitoEditorEnvelopeApi> This is an advanced editor API. For more information about advanced editor API, see MessageBusClientApi and KogitoEditorEnvelopeApi .

Commands:
<script src="https://<YOUR_PAGE>/dmn/index.js"></script>
<script src="https://<YOUR_PAGE>/bpmn/index.js"></script>
npm install @kie-tools/kie-editors-standalone
import * as DmnEditor from "@kie-tools/kie-editors-standalone/dist/dmn" import * as BpmnEditor from "@kie-tools/kie-editors-standalone/dist/bpmn"
const editor = DmnEditor.open({ container: document.getElementById("dmn-editor-container"), initialContent: Promise.resolve(""), readOnly: false, origin: "", resources: new Map([ [ "MyIncludedModel.dmn", { contentType: "text", content: Promise.resolve("") } ] ]) });