Change ID on Element Type Change

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?

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});
	});
1 Like