Posted onJul 5, 2023 • Originally published atMedium

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 ofVivatech 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 availableright 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 andSpanish).

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

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

bpmn-visualization TypeScript library

InJune, we released two versions0.36.0 and0.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 introducedremoveCssClasses, an API designed to reset the CSS classes applied to one or multiple BPMN elements.

This month, we've added a newresetStyleAPI in version 0.37.0. This lets you easily reset styles applied programmatically viaupdateStyle. 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 stylesbpmnVisualization.bpmnElementsRegistry.resetStyle('task_1','sequenceFlow_1');// reset the style of all elements of the diagrambpmnVisualization.bpmnElementsRegistry.resetStyle();

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.

BPMN in color support officially referenced by BPMN MIWG

Following our announcementlast month about the support for _BPMN in color _specification, we've now been formally referenced on the BPMN MIWG'sofficial 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 examplehere.

You can also check out the list of all integrationshere.