Process Analytics - June 2023 News
Tags: news, bpm, visualization, vue
Published: 2023-07-05 07:58:25

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](https://vivatechnology.com/): 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](https://fr.bonitasoft.com/videos/replay-creusez-vos-processus-decouvrez-le-potentiel-du-bpm-et-du-process-mining). 

* **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](https://www.bonitasoft.com/videos/replay-stop-5-process-mining), [French](https://fr.bonitasoft.com/videos/replay-arret-5-process-mining) and [Spanish](https://es.bonitasoft.com/videos/replay-parada-5-process-mining)).

If you are interested in a hands-on experience, our demo is ready for you on [GitHub](https://github.com/process-analytics/bonita-day-demo-2023). Feel free to give it a try [here](https://process-analytics.github.io/bonita-day-demo-2023/). 

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

## bpmn-visualization TypeScript library


In **June**, we released two versions [0.36.0](https://github.com/process-analytics/bpmn-visualization-js/releases/tag/v0.36.0) and [0.37.0](https://github.com/process-analytics/bpmn-visualization-js/releases/tag/v0.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](https://dev.to/process-analytics/process-analytics-may-2023-news-109k), we introduced [removeCssClasses](https://process-analytics.github.io/bpmn-visualization-js/api/classes/BpmnElementsRegistry.html#removeCssClasses), an API designed to reset the CSS classes applied to one or multiple BPMN elements. 

This month, we've added a new [resetStyle ](https://process-analytics.github.io/bpmn-visualization-js/api/classes/BpmnElementsRegistry.html#resetStyle)API in version 0.37.0. This lets you easily reset styles applied programmatically via [updateStyle](https://process-analytics.github.io/bpmn-visualization-js/api/classes/BpmnElementsRegistry.html#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. 

```javascript
// 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();
```


### 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6rnzaqcm78ea4zknchjd.png)

### _BPMN in color_ support officially referenced by BPMN MIWG

Following our announcement [last month](https://dev.to/process-analytics/process-analytics-may-2023-news-109k) about the support for _BPMN in color _specification, we've now been formally referenced on the BPMN MIWG's [official GitHub account](https://github.com/bpmn-miwg/bpmn-in-color). 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](https://github.com/brendanlaschke). We appreciate this contribution. 

Feel free to explore this example [here](https://github.com/process-analytics/bpmn-visualization-examples/tree/master/projects/typescript-vue). 

You can also check out the list of all integrations [here](https://github.com/process-analytics/bpmn-visualization-examples/#bpmn-visualization-usage-in-projects).

![Example of integration between bpmn-visualization and Vue framework](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5wshy2rjjlz5dl40ausl.gif)

## 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:



* Website: [https://process-analytics.dev](https://process-analytics.dev/?utm_source=dev.to&utm_medium=display&utm_campaign=news)
* Twitter: [@ProcessAnalyti1](https://twitter.com/ProcessAnalyti1)
* GitHub: [https://github.com/process-analytics](https://github.com/process-analytics)
* Discord: [Join our server!](https://discord.com/invite/HafnBYsRXd)
* YouTube: [Process Analytics YouTube channel](https://www.youtube.com/@process-analytics)

_Cover photo by [Dominik Scythe](https://unsplash.com/photos/Sot0f3hQQ4Y) on[ Unsplash](https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)_