DEV Community

Cover image for Process Analytics - June 2023 News
Nour Assy for Process Analytics

Posted on • Originally published at Medium

Process Analytics - June 2023 News

Welcome to the Process Analytics monthly news 👋.

Our “always” reminder: The goal of the Process Analytics project is to provide a means to rapidly display meaningful Process Analytics components in your web pages using BPMN 2.0 notation and Open Source libraries.

Here is our June project news update ☀️! In this edition, we'll cover the highlights of some successful webinars, new API introductions, and the exciting integration of bpmn-visualization with the Vue framework. Let's get started!

Webinar highlights

This month has been quite a ride with our participation in two informative webinars!

  • A 3-hour virtual workshop as part of Vivatech Tech Days Week: during this workshop, we dove deep into process mining, shed light on our project's process analytics, and demonstrated how to extract process mining data from Bonita.

If you missed it, the replay (in French) is available right here.

  • As one of Bonitasoft's monthly webinars: 3 one-hour sessions in each of three languages: French, English, and Spanish! We seized this opportunity to showcase the capabilities of our bpmn-visualization through a monitoring demo.

If you didn't catch any of these webinars live, you can find the replays in all three languages (English, French and Spanish).

If you are interested in a hands-on experience, our demo is ready for you on GitHub. Feel free to give it a try here.

A big thank you to Vivatech and Bonitasoft for these opportunities.

bpmn-visualization TypeScript library

In June, we released two versions 0.36.0 and 0.37.0.

New API to reset the style programmatically

In bpmn-visualization, styling can be applied in two ways: either by adding a CSS class name or by updating the style programmatically. The same principle applies when it comes to resetting a style. Last month, we introduced removeCssClasses, an API designed to reset the CSS classes applied to one or multiple BPMN elements.

This month, we've added a new resetStyle API in version 0.37.0. This lets you easily reset styles applied programmatically via updateStyle. Just call resetStyle with element IDs to revert their style, or with no IDs to reset all elements as shown in the code snippet below.

// Reset task and sequence flow styles
bpmnVisualization.bpmnElementsRegistry.resetStyle('task_1', 'sequenceFlow_1'); 

// reset the style of all elements of the diagram 
bpmnVisualization.bpmnElementsRegistry.resetStyle();
Enter fullscreen mode Exit fullscreen mode

Support for Transaction Sub-Processes

Version 0.36.0 brought support for transaction Sub-Process in BPMN. Transaction Sub-Processes executes a group of activities as a single, fail-or-succeed unit within a larger process. If any activity fails, changes are rolled back to ensure data consistency.

Transaction Sub-Processes have a distinct double line edge as shown below.

Transaction Sub-Process rendering in bpmn-visualization

BPMN in color support officially referenced by BPMN MIWG

Following our announcement last month about the support for _BPMN in color _specification, we've now been formally referenced on the BPMN MIWG's official GitHub account. BPMN MIWG, also known as the OMG BPMN Model Interchange Working Group, is an initiative that aims to ensure the smooth interchange of BPMN models between various BPMN modeling tools.

An example of integration with Vue framework

A new integration project for Vue has been contributed to the bpmn-visualization Examples repository, thanks to the efforts of @brendanlaschke. We appreciate this contribution.

Feel free to explore this example here.

You can also check out the list of all integrations here.

Example of integration between bpmn-visualization and Vue framework

That’s all folks!

We hope you enjoyed this June project news and stay tuned for more exciting updates in the coming months 👋.

In the meantime, stay on top of the latest news and releases by following us:

Cover photo by Dominik Scythe on Unsplash

Top comments (0)