Blog Posts BPMN DMN

New DMN Boxed Expression Editor – What’s new?

Blog: Drools & jBPM Blog

We already talked about the importance of the Boxed Expression Editor.

In this article, let’s explore better the reasons which led to the new editor.

Moreover, we will provide more information about the new Boxed Expression Editor structure and how it will interact with the rest of the editor.

Why a new editor?

As already stated, the existing editor is just working fine. However, it has few limitations that are slowing down the development of new features.

Why is this happening? In my opinion, for two reasons:

  1. First, it uses a technology that is not so open to integrations. The current Boxed Expression Editor is built upon a list of libraries and layers that are Java-based. HTML/CSS/JS/React are standard technologies largely known by almost every client-side programmer today. While a custom model based on Canvas may be powerful, but the cost to maintain and do some UI changes can get too high. As soon as you need to extend an already existing functionality or cover a new use case, the estimations will start to grow exponentially.
  2. Second, it is a Canvas-based component: elements on the page are difficult to manipulate. You don’t have a 1:1 correspondence between displayed elements and DOM nodes. For instance, there is no node element for the table.

The above points caused several issues. Just to mention a couple:

New Boxed Expression Editor – Structure

The rewrite of the Boxed Expression Editor is following the new architectural standards established by Kogito-based projects.

It is just a React component that is shipped as part of the boxed-expression-component package application.

A tiny React application in the showcase folder shows how it can integrate the BoxedExpressionEditor component inside another application. We talked about showcases there.

The main component exported by this package is the BoxedExpressionEditor.tsx.

This React component follows the composition pattern, composing (and often reusing) different small parts together. In the picture below, you can have an idea of it.

Since you can also have nested expressions, you may find out that the LogicTypeSelector subtree is also repeated in the nested expression cell.

For example, a list can have several items. Furthermore, each item can be a different expression:

New Boxed Expression Editor – Integration

The new DMN Boxed Expression Editor works as a standalone and stateless React/TypeScript component.

It can be added anywhere in the editor, giving as input to it the node selector, where the component will be appended, and the expression to render.

A layer between the component and the DMN Editor will be responsible for converting and synchronizing the expression models with the jsInterop classes.

When the expression model changes, the component is re-rendered.

When the component edits the expression definition, it propagates the changes to the model by using the functions defined in a JavaScript namespace called beeApiWrapper.

On the DMN editor side, a service will listen to these functions and update the models accordingly.


Development in this area is still evolving. In the DMN editor, during this transition period, you will be able to switch between the old and the new Boxed Expression Editor with a single click:

Anyway, you have also the possibility to switch back to the old implementation if you find that something is not working as expected:

In that case, don’t worry! Improvement is continuously in progress. Just remember to submit feedback that will help us to improve the new Boxed Expression Editor!

The post New DMN Boxed Expression Editor – What’s new? appeared first on KIE Community.

Leave a Comment

Get the BPI Web Feed

Using the HTML code below, you can display this Business Process Incubator page content with the current filter and sorting inside your web site for FREE.

Copy/Paste this code in your website html code:

<iframe src="" frameborder="0" scrolling="auto" width="100%" height="700">

Customizing your BPI Web Feed

You can click on the Get the BPI Web Feed link on any of our page to create the best possible feed for your site. Here are a few tips to customize your BPI Web Feed.

Customizing the Content Filter
On any page, you can add filter criteria using the MORE FILTERS interface:

Customizing the Content Filter

Customizing the Content Sorting
Clicking on the sorting options will also change the way your BPI Web Feed will be ordered on your site:

Get the BPI Web Feed

Some integration examples