How to import BPMN Properties from propertise-panel like LinkProps, idProps in our project for customization?

K_K_SHAW · June 4, 2024, 11:51am

I hope you’re doing well!

I’m currently in the process of upgrading bpmn-js-properties-panel from version 0.44 to the latest version. My project has several customizations that require importing modules like LinkProps, IdProps, etc. However, I’m encountering difficulties in exporting these modules with the latest version.

Previously, I imported them like this:

import processProps from “bpmn-js-properties-panel/lib/provider/bpmn/parts/ProcessProps”;
import eventProps from “bpmn-js-properties-panel/lib/provider/bpmn/parts/EventProps”;
import linkProps from “bpmn-js-properties-panel/lib/provider/bpmn/parts/LinkProps”;
`

Could you please advise me on how to achieve similar functionality with the latest version, or suggest any alternative methods to handle these customizations?

Thank you so much for your help!

Martin · June 4, 2024, 2:24pm

Hi,

Since you started from version 0.x, you will have some breaking changes along the way.

Have you checked out the Breaking changes in 1.0.0? This was a complete rewrite of the 0.x codebase of the properties panel.

Another starting point is the properties panel extension example to understand how the new Properties panel works.

Martin · June 4, 2024, 2:26pm

For changing existing Entries (instead of only adding new ones), you can have a look at how we do it for specific properties panles, e.g. The camunda properties panel overwrites ID fields here:

github.com

bpmn-io/bpmn-js-properties-panel/blob/49d8575db38d65444e3bb51003804216585eb7c9/src/provider/camunda-platform/CamundaPlatformPropertiesProvider.js#L157-L182


      
          function updateGeneralGroup(groups, element) {
          
            const generalGroup = findGroup(groups, 'general');
          
            if (!generalGroup) {
              return;
            }
          
            const { entries } = generalGroup;
          
            // (1) replace id with camunda id
            const idIndex = findIndex(entries, (entry) => entry.id === 'id');
            entries.splice(idIndex, 1, ...IdProps());
          
            // (2) replace processId with camunda processId (if existing)
            const processIdIndex = findIndex(entries, (entry) => entry.id === 'processId');
            if (processIdIndex && processIdIndex >= 0) {
              entries.splice(processIdIndex, 1, ...ProcessProps({ element }));
            }

This file has been truncated. show original