The DMN editor continues evolving towards making users’ lives as simple as possible. On Kogito 0.8.1, we introduce a new mechanism to open DMN 1.1 and 1.3 assets. We’re still saving your model as a DMN 1.2 asset at conformance level 3. However, now any 1.1 or 1.3 model, non including DMN 1.3 features, isRead more →
The DMN editor continues evolving towards making users’ lives as simple as possible. On Kogito 0.8.1, we introduce a new mechanism to open DMN 1.1 and 1.3 assets.
We’re still saving your model as a DMN 1.2 asset at conformance level 3. However, now any 1.1 or 1.3 model, non including DMN 1.3 features, is converted to 1.2.
In other words, you can now open DMN 1.1, 1.2, and 1.3 models in the editor, as you can see 🙂
As you probably have already noticed, this is a baby step toward fully-supporting the DMN 1.3 spec, but it’s already great news. If you’re using an older version of the editor, or even if you have DMN models from other vendors persisted as DMN 1.1 or 1.3, you’re now able to open them on VSCode, Online Editor, and on any other Kogito channel.
Thinking on the tooling’s future, we’ve also introduced a backward compatibility test suite with almost every file pushed in the dmn-tck repository. It ensures that new Kogito releases will continue supporting older DMN versions without any regression.
We’ll release Kogito 0.8.1 in a few days with other surprising news. Stay tuned! 😉
We just launched a fresh new Kogito Tooling release! 🎉 On the 0.8.0 release, we made a lot of improvements and bug fixes. This post will do a quick overview of those. I hope you enjoy it! Kogito Tooling Examples Update! We’re happy to announce a big update on the Kogito Tooling Examples in order to help youRead more →
We just launched a fresh new Kogito Tooling release! 🎉
On the 0.8.0 release, we made a lot of improvements and bug fixes. This post will do a quick overview of those. I hope you enjoy it!
Kogito Tooling Examples Update!
We’re happy to announce a big update on the Kogito Tooling Examples in order to help you understand how to use and integrate the Kogito Tooling packages on your project!
The examples can be accessed here, the source code lives in this repository and you can follow this series of blog posts guiding you through them.
BPMN and DMN Standalone Editors
We also published on npm the alpha version of our BPMN and DMN Standalone Editors. Now it’s super easy to embed our editors in your own applications:
The DMN editor was already great for expressing business logic and decomposing complex decisions into multiple nodes.
On 0.7.0, we introduced tech preview support for Multiple DRDs. On 0.7.1, we delivered the last bit of this important feature. Check this post to understand this feature in detail.
Update Gist on Online Modeler
We also included in this version a small but important tweak on Online Modeler. Now you can create gists and also update them!
Kogito Tooling i18n Infrastructure
On the 0.7.1 release, we introduced a generic API for i18n in all the channels. Soon, editors will use this API to implement internationalization on all editors! Stay tuned.
Fixed issues and improvements
We also made a lot of refactorings and improvements, especially to allow our internal API’s extendability.
Infrastructure
[KOGITO-2926] — Provide readOnly property on EditorContext
[KOGITO-3709] — Creating GitHub gist with no token setup requires the users to click on “Gist it!” twice
[KOGITO-3347] — The input field on Gist modal is being marked as invalid with a valid token
[KOGITO-3705] — Cannot open files on private repos using the Chrome Extension
[KOGITO-3820] — Fix open from source Gist URLs double encoded
Editors
[KOGITO-2348] — Scenario fails if model includes another one
[KOGITO-2773] — [Test Scenario Editor] BC — Kogito generated scesim file are in same cases not compatible
[KOGITO-3152] — [DMN Designer] PMML support — function parameters generation
[KOGITO-3571] — [DMN Designer] Multiple DRDs support — Information requirements are duplicated into the DMN XML
[KOGITO-1489] — Editor is broken after See as source during loading (Chrome Extension)
[KOGITO-3192] — [DMN Designer] Multiple DRDs support — The undo/reado are lost when user changes between diagrams
[KOGITO-3364] — [DMN Designer] Multiple DRDs support — When a node is deleted in the DRG, undo/redo operations do not work properly
[KOGITO-3366] — [DMN Designer] Boxed Expression — Decision Tables — Users lost constraints when they change the focus
Further Reading/Watching
We had this month two talks on KIE youtube channel:
I would like to also recommend a blog post from Guilherme, where he shows how to maintain DMN models on Business Central and VS Code.
Thank you to everyone involved!
I would like to thank everyone involved with this release from the awesome KIE Tooling Engineers to the lifesavers QEs and the UX people that help us look awesome!
In 0.7.2.alpha3 we started shipping a new component of the KIE tooling, what we’re calling Standalone Editors. These Standalone Editors provide a straightforward way to use our tried-and-true DMN and BPMN Editors embedded in your own web applications. The editors are now distributed in a self contained library that provides an all-in-one JavaScript file forRead more →
In 0.7.2.alpha3 we started shipping a new component of the KIE tooling, what we’re calling Standalone Editors.
These Standalone Editors provide a straightforward way to use our tried-and-true DMN and BPMN Editors embedded in your own web applications.
The editors are now distributed in a self contained library that provides an all-in-one JavaScript file for each of them, that can be interacted using a comprehensive API for setup and control of them.
Installation
In this release, you can choose from three ways to install the Standalone Editors:
readOnly (optional, defaults to false): Use false to allow content edition, and true for read-only mode, in which the Editor will not allow changes. WARNING: Currently only the DMN Editor supports read-only mode.
origin (optional, defaults to window.location.origin): If for some reason your application needs to change this parameter, you can use it.
resources (optional, defaults to []): Map of resources that will be provided for the Editor. This can be used, for instance, to provide included models for the DMN Editor or Work Item Definitions for the BPMN Editor. Each entry in the map has the resource name as its key and an object containing the content-type (text or binary) and the resource content (Promise similar to the initialContent parameter) as its value.
The returned object will contain the methods needed to manipulate the Editor:
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 the SVG string of the current diagram.
subscribeToContentChanges(callback: (isDirty: boolean) => void): (isDirty: boolean) => void: Setup a callback to be called on every content change in the Editor. Returns the same callback to be used for unsubscription.
unsubscribeToContentChanges(callback: (isDirty: boolean) => void): void: Unsubscribes the passed callback from content changes.
markAsSaved(): void: Resets the Editor state, signalizing that its content is saved. This will also fire the subscribed callbacks of content changes.
undo(): void: Undo the last change in the Editor. This will also fire the callbacks subscribed for content changes.
redo(): void: Redo the last undone change in the Editor. This will also fire the callbacks subscribed for content changes.
close(): void: Closes the Editor.
getElementPosition(selector: string): Promise<Rect>: Provides an alternative for extending the standard query selector when the element lives inside a canvas or even a video component. The selector parameter must follow the format of “:::”, e.g. Canvas:::MySquare or Video:::PresenterHand. Returns a Rect representing the element position.
Now let’s implement an application that provides the DMN Editor and adds a simple toolbar to the top that explores the main features of the API.
First, we start with a simple HTML page, and add a script tag with the DMN Standalone Editor JS library. We also add a <div> for the toolbar and a <div> for the Editor.
For the toolbar, we will add a few buttons, that will take advantage of the Editor’s API:
This script will open an empty and modifiable DMN Editor inside the div#dmn-editor-container. But we still have to implement the toolbar actions. To be able to undo and redo changes, we can add the following script:
The KIE YouTube channel is regularly posting quite interesting content! Last week I had the pleasure of presenting a talk about DMN at the KieLive#11 session: Tomorrow (October 27th), Edson Tirelli will also talk about DMN, but from a different and more advanced perspective at the KieLive#12: I’ve just activated the YouTube reminder because IRead more →
Business Central is a tool to author and manage assets like processes, human tasks, and much more. It is also a great tool to explore data and display them in any way you want. With Dashbuilder Runtime (DB), we introduced a web application that can run any dashboard exported from Business Central. Dashboards in Business Central BeforeRead more →
Business Central is a tool to author and manage assets like processes, human tasks, and much more. It is also a great tool to explore data and display them in any way you want. With Dashbuilder Runtime (DB), we introduced a web application that can run any dashboard exported from Business Central.
Dashboards in Business Central
Before the jBPM 7.45 release, the import/export feature was a manual task, having the user the requirement to export a ZIP and then import it into DB. In jBPM 7.45, a new feature allows users to open pages and datasets from Business Central in DB easily.
Business Central <-> Dashbuilder link
Business Central is now linked to Dashbuilder Runtime (DB) using the gradual export feature. You select datasets and pages, but instead of downloading a ZIP, you can click on Open, and it will download the ZIP on the server and show it on Dashbuilder Runtime.
Link in action
It is the same export feature, but you will not have to download the ZIP and upload it to DB. When you click on Open, the exported ZIP file is exported, and DB updates the model content when it is opened.
The downloaded model has the name ${user id}-dashboard.zip, which means users can open their models without interfering with other existing models.
This was only possible because we now have an “update mode” in DB, which makes it possible to read the latest model in a ZIP file and update the model contents. We will talk about it later.
Setup
To this automatic process work, it is required to do some configuration on Business Central to make sure that the Open Button will show up in Gradual Export
The new Open button that only shows when Business Central is correctly configured.
The following system properties must be set to make the open button visible:
dashbuilder.runtime.multi must be set as true if you want users to open their models
dashbuilder.runtime.location must be set and have the dashboard root URL as the value (e.g.,http://localhost:8080);
dashbuilder.export.dir should be set to the shared directory where DB reads its models (e.g.,/tmp/dashbuilder/models);
System properties set in standalone.xml
If you want users to share the same open model or use SINGLE mode in DB, you can set dashbuilder.shareOpenModel system property as true, and then all users will open the same model in DB.
Dashbuilder Runtime update mode
The link feature was only possible with the introduction of update mode in Dashbuilder, which means that updating a ZIP file in Dashbuilder models dir will update the dashboards. This mode is set by default, but you can turn this off by putting dashbuilder.model.update as false.
Open Dashboards in Embedded Mode
Another small new feature you will find in Dashbuilder Runtime 7.45.0.Final is the Open Page in embedded mode feature. Any dashboard page in Dashbuilder Runtime will have a button in the top right which, when clicked, opens the current page with the embedded URL
Opening a dashboard page in embedded mode
Downloading Dashbuilder Runtime 7.45.0 Final
Dashbuilder Runtime 7.45.0 Final WAR can be downloaded directly from Maven. You then need to deploy it on a Widlfly 19.0.1 or JBoss EAP 7.3.0. One easy way is to download the WAR and drop in standalone/deployments directory from jBPM Server distribution.
This is part of a series of blog posts, and this one covers “How to integrate a custom Editor, an existing Editors, and custom Views on a Web App”. You can navigate through the series by clicking on the following topics: How to create a custom Editor in a React application; How to create a ChromeRead more →
How to integrate a custom Editor, an existing Editors, and custom Views on a Web App;
In this section, we will create a Web App where we put together our custom Base64Png Editor, the Kogito DMN Editor, the Kogito BPMN Editor, our ‘To-do’ List View, and our Ping Pong View.
Starting
Each example of this section will have 3 important files:
The only exception to this file organization is the Kogito BPMN Editor, which uses an Envelope already deployed in GitHub Pages.
Envelope HTML
The HTML Envelope file is a boilerplate. Here we have an example of the Base64Png Editor:
The only difference between the HTML Envelope files across the examples covered in this section is the src property from the script tag. In the above example, the src is base64-editor.js, which is the Envelope initialization path. The file organization on the dist folder is done by your bundler, which will not be covered here. You can check all the code of the Web App here.
Envelope Initialization
The initialization of the Envelope is pretty similar between the examples as well. Here follows the initialization method of the Base64Png Editor:
Kogito Tooling makes the Editor init method available on the @kogito-tooling/editor/dist/envelope package. We’re going to inform the Envelope container (as it is on the HTML Envelope file). The bus which is the method utilized to communicate from the Envelope to the Channel. A factory to create the Editor. Last but not least, the Editor context, providing some useful information to the Envelope.
The only difference between this initialization file and the DMN Envelope initialization is the factory.
Differently from the Base64Png Editor, here we use the ‘To-do’ List View initialization method. Again, the container is the same on the Envelope HTML file, and we pass the bus method to tell the Envelope how to communicate with the Channel. This View doesn’t have a custom factory, so it’s unnecessary to pass any other parameter.
Our Ping Pong View has a custom factory, so the difference between it and the ‘To-do’ List View is a new property called pingPongFactory.
And of course, the init method is now from the Ping Pong View.
Embedding an Editor
In this section, we will show how to embed our custom Editors and the Kogito BPMN/DMN Editors on our Web App.
Base64Png Editor
We’re going to create a Base64PngPage React component responsible for rendering our component and a custom gallery, where you’ll be able to choose a file to be opened.
Starting, we need to create a file state, which will store the current file. It’s essential to take notice that we’re using the File definition from Kogito Tooling. We start the state with an empty file and the correct file extension.
Now, we create a memoized value with an EditorEnvelopeLocator object. This object specifies who is going to send messages to this Envelope (targetOrigin). Also, it maps a file extension (base64png) to an Envelope location (the Base64Png Envelope). In this case, we’re using a local Envelope, and its location is determined by your bundler. Still, further in the BPMN Editor example, we’re going to see how to embed already deployed Envelopes.
The Base64PngGallery is a custom component made for this example, and it’s located on the Channel. Its function is to set a base64png file on the file state. So we can see an interaction between the Channel and the Envelope. You can check a running example here!
Kogito DMN Editor
Like in the example Base64PngPage, we’re going to create a DmnPage React component. Also, we’ll be creating a file state, used to store the current file.
Again, we’ll be setting up the editorEnvelopeLocator with a memoized value. Both Editors (DMN/BPMN) are available on the @kogito-tooling/kie-bc-editors-unpacked package, and here the DMN Editor was copied from node_modules/@kogito-tooling/kie-bc-editors-unpacked/dmn to the dist/gwt-editors/dmn.
To have imperative access to the EmbeddedEditor, it’s necessary to use the useEditorRef. It’ll provide an object with the reference to be used on the EmbeddedEditor component (ref) and a way to access its methods (editor). This Hook creates a reference callback, so it’s possible to use its methods as dependencies for other React hooks, such as the useDirtyState on the Sidebar component, which informs if the Editor is dirty or not.
The Sidebar component is used to handle new files, opening samples or files, etc. Check up the example here!
Kogito BPMN Editor
Here we’re going to use another approach to set up the EditorEnvelopeLocator. We already have a BPMN Envelope deployed for our Business Modeler Preview, and you’re going to use it. So we simply pass the URL of the Envelope and its resources, and voilá. It’s not necessary to copy any file using your bundler.
The editorEnvelopeLocator is the only difference between the DMN example.
And here is the running example of the BPMN Editor.
Embedding a View
In this section, we’ll show how to embed a View on your Web App.
‘To-do’ List View
On the ‘To-do’ List View section, we created an EmbeddedTodoList component, and we’re going to use this component here. We simply passed the ‘To-do’ List Envelope location and implemented a todoList_ItemRemoved method. The ActionSidebar is utilized to add new items to our todo list, showing the interaction between our Channel and Envelope.
Here is the finalized example, or you can use a running example here.
Ping Pong View
The idea of this View is to be used with other Ping Pong Views to show the interaction between them. To start, we will create two variables, pings and pongs, so the Channel can keep count of it. We need to create two states that will handle which View was the last to send the ping message, and the last to reply pong. Also, we implemented the PingPongChannelApi, which updates the states and values.
We use the EmbeddedPingPong component that we created on the Ping Pong implementation and simply started it with the Envelope location and the Channel API.
<EmbeddedPingPong
{…api}
name={"React 1"}
targetOrigin={window.location.origin}
mapping={{title: "Ping-Pong Page in React",envelopePath: "envelope/ping-pong-view-react-impl.html"}}
This is the final look with 3 Ping Pong Views and a Sidebar to show the information. You can use it by accessing here.
This screenshot was taken after a Ping request from React 1, React 2, and React 3 (respectively).
Wrapping up
This, for sure, was a long ride! We covered a lot of topics and almost everything that Kogito Tooling can do for you! We hope that this post could help you to implement your own custom Editor and/or View.
Thanks for reading, and stay tuned for more Kogito updates!
This is part of a series of blog posts, and this one covers “How to create a more complex custom View”. You can navigate through the series by clicking on the following topics: How to create a custom Editor in a React application; How to create a Chrome Extension for a custom Editor; How to create aRead more →
This section will cover a new View example called “Ping Pong View”, but now it will feature a factory. This change will make it more flexible to use other frameworks than React or no framework at all. You can check out all the code of this section here. A big part of the code is pretty similar to the ‘To-do’ List View, so this part is not going to be covered here.
A PingPongView is a component that can send “Pings” to the Channel and also receive ”Ping” and “Pong” notifications from the Channel. The main idea is that a PingPongView instance doesn’t know whether there are more than one PingPongViews on the screen, since it only communicates with the Channel.
As said before, the Ping Pong View’s main difference is the usage of a custom factory to create its Views. Our factory is a simple interface with a create method that returns a PingPongView.
The PingPongEnvelopeView is identical to the TodoListEnvelopeView except for the factory passed as argument on the init method and on the PingPongEnvelopeApiImpl instancialization.
Last but not least, the View implementation uses the reactComponent method to render the View content. In case the reactComponent wasn’t implemented (not using the React framework), the content to be rendered can be simply attached to the div using the id.
We’ve prepared a React implementation of the Ping Pong View, and this is how it looks like.
The red border can be implemented utilizing any tool you want!
In this implementation, we create a factory that implements the PingPongFactory, which simply returns an object with the reactComponent method. Remember, if we’ve implemented this factory using another framework, or no framework at all, we’d have manually added the PingPongView implementation on the specific div or utilizing any other option available.
A PingPongReactImpl is a React component that implements the PingPongApi. You can check its code here.
Wrapping up
Hopefully, after this example, you know what you need to do to create a View utilizing another framework! In the next and last section, we’re going to wrap up all the Kogito Tooling Examples in how to create a Web App, which will contain all our available Editors (Base64Png, BPMN and DMN) and our custom Views (“To-do” List and “Ping Pong”).
This is part of a series of blog posts, and this one covers “How to create a custom View”. You can navigate through the series by clicking on the following topics: How to create a custom Editor in a React application; How to create a Chrome Extension for a custom Editor; How to create a VS CodeRead more →
This section will cover how to create a VS Code Extension for our ‘To-do’ List View created in the previous example. Before we start, it’s recommended to access the VS Code Extension API reference to be aware of the VS Code Extension capabilities.
Here’s is a quick peek of how the extension will look like:
The ‘To-do’ List View as a VS Code Extension
Obs: This example requires the VS Code version 1.46 or later.
Starting
Firstly, we’re going to create a new submodule called vscode and inside it we’ll create a new file responsible for opening a Webview on the VS Code, which will basically be a new tab with our ‘To-do’ List View. We’ll name this file as TodoListWebview.ts.
We’ll build the class where we receive all the useful properties to set up the communication between the Webview (inside the Envelope) and the Extension. Also, we set up the location of the Envelope to be rendered. The open method will be used by the activate function on the extension.ts file, and it is responsible for opening the Webview on the new tab.
To communicate with the Extension, we create an EnvelopeServer typed with the Channel and Envelope API. Here we pass down the method used to send messages, the origin, and the initial method (like the pollInit on the EmbeddedTodoList).
Wrapping up, we set up the EnvelopeServer as the receiver of the messages coming from the Extension, and we register a clean up callback to be used when the Webview is closed. Of course, we can’t forget to start the EnvelopeServer and return the client to the Extension to communicate with the Envelope.
Now we’re going to inform the extension contribution points, which are responsible for adding commands to be used with the command palette (CTRL + SHIFT + P) or add new options into the file menus.
This file is responsible for the initialization of the Envelope. We set the container to the envelope-app of the TodoListWebview created, and we pass the acquireVsCodeApi to the bus property. This method is responsible for sending messages from a Webview to an Extension.
src/extension.ts
Like it was set on the package.json main property, this file will be the Extension entry point. Here we define two important methods: activate and deactivate.
The activate method will be called when the condition on the package.json activationEvents property is met.
The deactivate method will be called when the activationEvents condition isn’t met anymore.
In this Extension, the activation method is responsible for registering all commands specified on the contribution points and for starting the TodoListWebview with the Envelope path.
It isn’t necessary to clean up when the activationEvent isn’t met anymore, so the deactivate method is empty. You can check the entire file here.
Running
To run this Extension, you can use the vsce package to generate a vsix file and manually install it (read more about here), or you can run it in debug mode.
To run in debug mode, we need to create two files in the .vscode directory. The launch.json, which is the primary file used for debugging, and task.json, create a task used by the launch.json. The launch.json is executed when you open the VS Code Extension folder on utilizing the VS Code Editor and start the debug mode (use the F5 shortcut). You can check our setup on the repository used by this example.
Wrapping up
Now you know how to create a VS Code Extension with your custom View! In the next section, we’ll show you how to create a more complex View, so if you want, you’ll be able to use another framework instead of React.
Thanks for reading, and see you in the next section.
This is part of a series of blog posts, and this one covers “How to create a custom View”. You can navigate through the series by clicking on the following topics: How to create a custom Editor in a React application; How to create a Chrome Extension for a custom Editor; How to create a VS CodeRead more →
In this section, we’re going to cover how to create a custom View. If you have questions about what is a View (read more about it here), but to summarize it, a View is an Envelope. Or, to be more specific, an iframe element with your code inside and a strongly-typed communication interface with the Channel.
Like our previous sections, we’re going to utilize some React concepts to create and utilize Views (especially React hooks), so in case you’re not familiar with it, it’s suggested that you read the React documentation.
Starting
A custom View has three essential “submodules”, which are separated in directories:
api: the API definition, which is used to communicate with the Channel.
embedded: the Embedded Envelope component implementation, which is used by the Channel. (this is specific to React)
envelope: this custom View’s Envelope implementation.
In this first example, we’ll create a ‘To-do’ List View, which will enable the Channel to use this View at any place. This View will feature adding, removing and marking items as complete.
API
The ‘To-do’ List View api submodule has the following files:
TodoListViewApi.ts
This is the API of your View as a component. It exposes methods that allow you to control your View component.
This is a convenience submodule specific for React. Here is the implementation of the EmbeddedTodoList. It’s a component used by the Channel, which makes the communication between the Channel and the Envelope. Hence, it connects the interfaces from the api directory. To create this component, we’ll utilize the EmbeddedEnvelope component provided by Kogito Tooling.
RefForwardingComponent
To start, we’ll use a RefForwardingComponent which provides a way to access the component imperatively and accessing its exposed methods. Also, it enables the usage of React hooks.
Here the forwardedRef implements the TodoListApi. The props implement the TodoListChannelApi with two new attributes, which are used to tell the EmbeddedEnvelope component where the Envelope is located.
PoolInit
To start the communication between Channel and Envelope, we need to create a method used on the initialization. This method is called poollInit, and it receives an EnvelopeServer instance typed with the Channel and Envelope API’s. The EnvelopeServer is responsible for sending messages from the Channel to the Envelope (strictly in this direction), and receiving messages from the Envelope too. The pollInit method tells the EnvelopeServer what to do to “connect” with the Envelope. It can contain any parameters and this method can be called many times, since the Envelope can take a while to load. Beware of side-effects!
The methods implemented on the TodoListApi interface are going to be exposed through this component reference. In this example, the EnvelopeServer has the implementation of the methods. To abstract the EnvelopeServer instantiation, we delegate the exposure of the component reference to the EmbeddedEnvelopeFactory, which already has an EnvelopeServer instance, making the EmbeddedTodoList a lot simpler.
To create an EmbeddedEnvelope component, we utilize an available factory from Kogito Tooling, which will create the component, initializing the EnvelopeServer with the pollInit and then exposing the methods on the TodoListApi interface through the refDelegate method.
Now, we create a method that knows how to render a TodoListEnvelopeView and returns a function with its API. In this example, we’re using a React View, but it’s possible to use any other framework here or just plain Javascript, giving flexibility to your implementation.
To finalize, we start the Envelope passing the View, the context, and a factory, which instantiates an Envelope API. In this example, our factory is not generic, and can only instantiate the same Envelope Api, but further, in another example, we’re going to see a more advanced factory implementation. A context is an empty object because of this example’s simplicity, but you can check it out an implementation on the Kogito Tooling for a more advanced implementation.
This file has the implementation of the Envelope API, and it receives an EnvelopeApiFactoryArgs. It has access to the View API, the EnvelopeContext, and the EnvelopeBusController. The EnvelopeBusController is the class responsible for the communication from the Envelope to the Channel (strictly this flow of messages).
The Envelope API implementation relies on the View API except for the todoList__init method. It will associate the actual Envelope with the Channel and set the user on our View (TodoListEnvelopeView).
This file has what is going to be rendered on the View. Also, it has the View API, which is consumed by the TodoListEnvelopeApiImpl file.
Like our other components in this post, we will be using the React RefForwardingComponent, and now we typed it with the TodoListEnvelopeViewApi. Additionally, we created an user state to have a more friendly interface, and an items state, which has the list of all items on our ‘To-do’ List.
To manipulate our ‘To-do’ List View, we created some useful callbacks with the userCallback hook.
removeItem will create a copy of the items array, so it doesn’t modify the current state’s value. Using the copied array, it’ll search for the specified item, and then remove it by setting a state with the updated array (before the removal).
updateItemCompletedStatus will also create a copy of the current items array. It will search for the specified item and then update the state with the updated array.
allCompleted is a memoized value updated every time the items state is changed. It checks if all items have the completed property equals to true.
To finalize our View, the only missing part is what is going to be rendered. We’re not going to cover the specifics of this implementation because it involves personal choices. This is the look of the final implementation.
The ‘To-do’ List View with a user (“Tiago”) and two items that were manually created to exemplify how the View looks like
Wrapping up
Now you know how to create your own custom View. In the next section, we’ll see how to Embed it on a VS Code Extension.
Currently, the DMN editor is supported in a variety of environments. You can create a DMN model in an online editor, in a chrome extension, in a desktop app, in a VSCode extension, and even on Business Central. Until the latest release, you could face some differences between a model created by VSCode and aRead more →
Currently, the DMN editor is supported in a variety of environments. You can create a DMN model in an online editor, in a chrome extension, in a desktop app, in a VSCode extension, and even on Business Central.
Until the latest release, you could face some differences between a model created by VSCode and a one created by Business Central. Now, this post aims to demonstrate that both environments are fully compatible by showing the same project from two perspectives: I) how to create a project on VSCode and import it on Business Central, and II) how to create a project on Business Central and import it on VSCode.
Let’s check both environments.
–
The VSCode perspective
Let’s get started to understand how to use VSCode to handle a DMN file in a context of a Business Central project by relying only on VSCode.
In a shell prompt, enter the following mvn command to create a project:
When the archetype plug-in switches to interactive mode, accept the default values for the remaining fields
After generating your project, create a DMN asset at the src/main/resources/<your package> directory and populate it with some interesting decision, like the one in the video:
Now, initialize the git repository for your project, add all files, and commit them:
git init && git add . && git commit -m "Init"
Use pwd to get the local path of your project
Open the Business Central spaces screen, click on Import Project, and set file://<the local path of your project> as the Repository URL
Done! You’ve successfully created a Business Central project relying only on your terminal and on your VSCode DMN editor! 🎉
–
The Business Central perspective
Alright, now let’s do the opposite. Let’s create a project on Business Central and import it to VSCode.
Create a project on Business Central in the spaces screen
Create a DMN asset and populate it with some interesting decision, like the one in the video above
Now, click on “Settings” to open the project settings screen
Done! You’ve successfully opened your Business Central project with VSCode. You can now perform changes into your DMN mode, commit them with git, and the Business Central will automatically detect them
–
I hope you’ve enjoyed this quick tutorial! Stay tuned for new DMN features! 🙂