Hi everyone, I’m experiencing a small problem when installing the BPMN.IO property-panel, when I add the propertiesPanel, and add the parent it gives the message saying that the childdren is null, follow my code below. Could anyone help me please?
import {
Component,
OnInit,
AfterViewInit,
ViewChild,
ElementRef,
AfterContentInit,
OnDestroy,
} from '@angular/core';
import BpmnModeler from 'camunda-bpmn-js/lib/camunda-platform/Modeler';
import minimapModule from 'diagram-js-minimap';
import BpmnColorPickerModule from 'bpmn-js-color-picker';
import {
BpmnPropertiesPanelModule,
BpmnPropertiesProviderModule,
} from 'bpmn-js-properties-panel';
import * as camundaModdleDescriptors from 'camunda-bpmn-moddle/resources/camunda.json';
@Component({
selector: 'lib-modeler',
template: `
<div #bpmn style="height: 100vh;"></div>
<div #properties id="properties"></div>`,
styleUrls: ['modeler.component.scss']
})
export class ModelerComponent implements OnInit, AfterViewInit, AfterContentInit, OnDestroy {
@ViewChild('bpmn', { static: true }) private el: ElementRef;
@ViewChild('properties', { static: true }) private properties: ElementRef;
public bpmnJS: BpmnModeler;
constructor() {
this.bpmnJS = new BpmnModeler({
// propertiesPanel: {
// parent: "#properties"
// },
additionalModules: [
minimapModule,
BpmnColorPickerModule,
BpmnPropertiesPanelModule,
BpmnPropertiesProviderModule,
],
moddleExtensions: {
camunda: camundaModdleDescriptors
}
})
}
ngOnInit(): void {
// fetch('https://cdn.staticaly.com/gh/bpmn-io/bpmn-js-examples/dfceecba/starter/diagram.bpmn')
fetch('../../assets/processo-de-vendas.bpmn')
.then(res => res.text())
.then((xml) => {
this.bpmnJS.importXML(xml)
})
}
ngAfterContentInit(): void {
this.bpmnJS.attachTo(this.el.nativeElement);
// this.bpmnJS.attachTo(this.properties.nativeElement);
const propertiesPanel = this.bpmnJS.get('propertiesPanel') as BpmnPropertiesPanelModule;
propertiesPanel.attachTo(this.properties.nativeElement);
}
ngOnDestroy(): void {
this.bpmnJS.destroy();
}
ngAfterViewInit(): void {
}
}