Change ID on Element Type Change

Developers Modeler
1

Hey there,

For my custom BPMN engine I’m trying to get the modeler to change the id of a element when the element gets a new type. The id will then represent the type, which would help me figure out which type an element is while purely looking at the html DOM.

Example of what I want to achieve:

There is a UserTask, with the id UserTask_103ffeg. I change the type to ManualTask.
Then I want the id to be changed from UserTask_103ffeg to ManualTask_103ffeg.

First I listened to the shape.added event. When this was thrown I’d change the ID using modeling.updateProperties. However this threw exceptions. See this previous post: Illegal invocation in <execute> or <revert> phase (action: element.updateProperties)

However, it seems to me like the element gets the new ID that I want, and that ID is then being overwritten by the old ID. Since when I catch the element.updateId event, there is no

Now I’m trying it another way, by listening to the element.updateId event. However, this triggers the same error:
image

Here is my event handler code:

	bpmnModeler.get('eventBus').on('element.updateId', function (event) {
		event.preventDefault(); //attempt to stop the id from being updated to the old id
		event.stopPropagation(); // same as above
		
                // this does what I want but throws errors
		modeling.updateProperties(event.element, {id: event.element.id}); 
	});

Is there another way to do what I want without using event listeners. Because the issue sounds to me that I’m not allowed to change an element in that event listener?

2

Listening to the shape.changed event now. This was the way to go from the beginning. An issue was that I couldn’t find an overview of possible events. I found one by logging the eventBus which will show all possible listeners.

bpmnModeler.get('eventBus').on('shape.changed', function (event) {
		var id = event.element.id;
		var type = event.element.type;
		  
		if (type === 'label') {
			return;
		}
		  
		var newID = type.substring(type.indexOf(':') + 1) + '_' + id.substring(id.indexOf('_') + 1);
		
		if (id == newID) {
			return;
		}
		
		modeling.updateProperties(event.element, {id: newID});
	});
2 Likes