Pass html element reference for propertiesPanel in Angular

Developers Modeler
1

I went with the properties panel code example given here: bpmn-js-examples/properties-panel at main · bpmn-io/bpmn-js-examples · GitHub, and made a working codesandbox here: custom-elements-variables-properties-panel - CodeSandbox

However, when I transferred this code into my angular app, I hit a problem manifested in the console error:

image

I am quite sure that the modeler can’t initialize because it can’t find the element behind the “#properties-panel” reference, since I’m not using jquery in my angular project.

My first attempt to fix this was to change my attachCanvas() wrapper method.
I have wrapped the bpmnJS plugin in an angular service class, and the attachCanvas() method looks like:

public attachCanvas(htmlElement: ElementRef) {
this.bpmnJS.attachTo(htmlElement);
}

so I just changed that to:

public attachCanvas(htmlElement: ElementRef, propertiesPanelParentElement: ElementRef) {
this.propertiesPanelParentElement = propertiesPanelParentElement;
this.bpmnJS.attachTo(htmlElement);
}

and then changed

this.bpmnJS = new Modeler({
additionalModules: [bpmnCustomControls, propertiesPanelModule, propertiesProviderModule],
moddleExtensions: {
camunda: camundaModdleDescriptor,
},
propertiesPanel: {
parent: ‘#properties-panel’,
},
});

to

this.bpmnJS = new Modeler({
additionalModules: [bpmnCustomControls, propertiesPanelModule, propertiesProviderModule],
moddleExtensions: {
camunda: camundaModdleDescriptor,
},
propertiesPanel: {
parent: this.propertiesPanelParentElement,
},
});

and started passing an elementRef for the properties panel the same way I am passing it for the canvas element. This prevented the console error I’ve shown above, but the properties panel is still not being loaded.

Since my solution was guesswork, can you offer a way to pass an element reference that positively works?

2

Can you maybe share your Angular Example in a CodeSandbox as well? It will make it easier for us to reproduce.

3

Sorry for the delayed response. Yesterday was a national holiday here.

4

Thanks for sharing!

One reason for your problem could be that you don’t attach the parent element to the properties panel as well

public attachCanvas(
    htmlElement: ElementRef,
    propertiesPanelParentElement: ElementRef
  ) {
    const propertiesPanel = this.bpmnJS.get("propertiesPanel");

    this.bpmnJS.attachTo(htmlElement);

    // you need to attach the properties panel parent as well
    propertiesPanel.attachTo(propertiesPanelParentElement);
}

the parent element is only available once you execute the attachCanvas method, but on initialization

constructor() {
    this.bpmnJS = new Modeler({
      additionalModules: [propertiesPanelModule, propertiesProviderModule],
      moddleExtensions: {
        camunda: camundaModdleDescriptor
      },
      propertiesPanel: {
        parent: this.propertiesPanelParentElement // this is empty !!
      }
    });

// ...

}
5

Thank you, that was the next thing I was going to ask you about.

So, I take it that I can delay the assignment of propertiesPanel.parent by calling attachTo() on propertiesPanel within the attachCanvas() method, the same way as I am doing it for the diagram itself?

6

I did the changes you proposed, and also uncommented the lines which give the additionalModules[] and modldeExtensions{}

There is a new console error now, beginning with ‘ERROR TypeError: Cannot read property ‘depends’ of undefined’

You can see the full thing in the codesandbox, it’s quite long.

7

Seems like the propertiesPanelModule is undefined after importing it. There might be something wrong with your setup.

8

Both propertiesPanelModule and propertiesProviderModule are undefined after import. I don’t know whether that’s an issue with your CodeSandbox. Here’s an example that works: https://codesandbox.io/s/bpmn-js-with-properties-panel-forked-nyrtp?file=/src/index.js

9

In the first post I also have a non-angular codesanbox where the properties panel works - it’s based on the bpmn.io code example for the properties panel. If you could make this example work in an angular codesadbox, then it would be interesting to study what’s different in my angular condesandbox.

The importing of the modeler itself works, although Codesandbox underlines it. As you can see I am using the same addresses to the properties panel in the Angular codesandbox as those in the non-Angular codesandbox. I can’t make a guess as to why the propertiesPanelModule and propertiesProviderModule are undefined.

Niklas’ last advice, about supplying a value to propertiesPanel with attachTo() did give me good results in my “actual project” code - now the panel is visible constantly.

How can I make it visible only when a diagram element is selected, which is how it works in the non-angular codesandbox? I’m researching this myself too, but also asking in order to possibly speed up things on my end.

– My bad, I thought that’s how it works by default, but I see the panel is meant to be always visible as long as there is a diagram loaded.