Display process id changes of bpmn:Participant

I have an angular app and I am trying to display the changes that happen to process id property while a user is changing it. My problem is that when I add an element bpmn:Participant and try to make some changes to process id it does not reflect in real time. Every other property reflects it’s changes but not the Process id. I have the following function:


  • Method for raise up changes about id of elements

  • @param eventBus listeners
    private async changePropertiesAlert(eventBus: any) {
    this.updatePropertiesChange.forEach((event) => {
    eventBus.on(event, e => {

    if (e && e.context && e.context.properties) {

     // Navigate through the context to find the processId property
     // const processId = e.context.properties.find(prop => prop.$type === 'bpmn:Participant' && prop.id === 'processId');
     const prop = e.context.properties;
     if (prop.id && this.actualElement != prop.id && this.documents && this.documents.length > 0) {
       // console.log(`Process ID changed to: ${processId.value}`);


I know that I can get the process id like this: event.context.element.di.bpmnElement.processRef.id; but how can I make it so that every time the user makes a changes to it, it can reflect it in real time like with the other properties ?

I find it difficult to understand the problem you described.

Please share a running / prototypical example that clearly shows what you’re trying to achieve, what is working and what is not.

Use our existing starter projects to quickly hack it or share your existing, partial solution on GitHub or via a CodeSandbox. Provide the necessary pointers that allow us to quickly understand where you got stuck.

This way we may be able to help you in a constructive manner.

Thanks :heart:

I apologize for the confusion my case is the following:

I have some tags which are associated with the process id and since in the beginning there in the root there is a process id which reflected the changes the user made of this process id in properties panel but after I add the element bpmn:Participant this process id passes to this element in the properties panel and when it does so when the user wanted to change the process id value in the properties panel it did not display in real time the changes it happened in the tags. And I was struggling to just simply log the behavior I wanted.

Found out later the right modification I needed to do to make this possible and is the following:

eventBus.on(‘element.changed’, (event) => {
const element = event.element;

if (element.type === 'bpmn:Participant' && element.businessObject && element.businessObject.processRef) {
  const displayProcessId = element.businessObject.processRef.id;



Hope it helps anyone if it has the same use case as mine. Thank you for responding I appreciate it :grinning: I believe I will open new topics in the future :laughing:

Thanks for sharing your solution. I am glad you were able to resolve the issue on your own :slight_smile:

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.