Chapter 2. Red Hat Process Automation Manager BPMN and DMN modelers

Procedure

1. In your VSCode 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.

2. When the Red Hat Business Automation Bundle extension appears in VSCode, select it and click Install.
3. For optimal VSCode editor behavior, after the extension installation is complete, reload or close and re-launch your instance of VSCode.

Procedure

1. Install the standalone editors using one of the following methods:

   Download each JavaScript file manually: For this method, follow these steps:

   1. Download the JavaScript files.
   2. Add the downloaded Javascript files to your hosted application.

   3. Add the following <script> tag to your HTML page:

      Script tag for your HTML page for the DMN editor

      <script src="https://<YOUR_PAGE>/dmn/index.js"></script>

      Script tag for your HTML page for the BPMN editor

      <script src="https://<YOUR_PAGE>/bpmn/index.js"></script>

   Use the NPM package: For this method, follow these steps:

   1. Add the NPM package to your package.json file:

      Adding the NPM package

      npm install @redhat/kogito-tooling-kie-editors-standalone

   2. Import each editor library to your TypeScript file:

      Importing each editor

      import * as DmnEditor from "@redhat/kogito-tooling-kie-editors-standalone/dist/dmn"
      import * as BpmnEditor from "@redhat/kogito-tooling-kie-editors-standalone/dist/bpmn"

2. 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(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.