Hello friends, it’s a great pleasure to be part of this incredible community!
I’m working on an ionic/angular application, using the following versions:
“@bpmn-io/form-js”: “^1.11.3”,
“@bpmn-io/properties-panel”: “^3.25.0”,
“bpmn-js”: “^17.11.1”,
“bpmn-js-properties-panel”: “^5.27.0”,
“camunda-bpmn-moddle”: “^7.0.1”,"
To display a BPMN modeler and the properties panel, but in the properties panel, it only displays “general” and “documentation”
I will share my code with you:
Blockquote
import { Component, ElementRef, OnInit, ViewChild, AfterViewInit } from ‘@angular/core’;
import BpmnModeler from ‘bpmn-js/lib/Modeler’;
import {
BpmnPropertiesPanelModule,
BpmnPropertiesProviderModule,
} from ‘bpmn-js-properties-panel’; // Corrigido para a importação correta
import ContextPadModule from ‘bpmn-js/lib/features/context-pad’;
import KeyboardModule from ‘bpmn-js/lib/features/keyboard’;
import PaletteModule from ‘bpmn-js/lib/features/palette’;
import camundaModdleDescriptor from ‘camunda-bpmn-moddle/resources/camunda.json’;
import CamundaBpmnModdle from ‘camunda-bpmn-moddle/resources/camunda.json’;
@Component({
selector: ‘app-bpmn-modeler’,
templateUrl: ‘./bpmn-modeler.component.html’,
styleUrls: [‘./bpmn-modeler.component.scss’],
})
export class BpmnModelerComponent implements OnInit, AfterViewInit {
@ViewChild(‘canvas’) canvas!: ElementRef; // Adicionando o operador ‘!’ para indicar que será inicializado depois
@ViewChild(‘properties’) properties!: ElementRef; // Adicionando o operador ‘!’ para indicar que será inicializado depois
private bpmnModeler!: BpmnModeler; // Adicionando o operador ‘!’ para indicar que será inicializado depois
constructor() {}
ngOnInit(): void {}
ngAfterViewInit(): void {
this.initializeModeler();
}
private initializeModeler(): void {
if (this.canvas?.nativeElement && this.properties?.nativeElement) {
this.bpmnModeler = new BpmnModeler({
container: this.canvas.nativeElement,
propertiesPanel: {
parent: this.properties.nativeElement,
},
additionalModules: [
BpmnPropertiesPanelModule, // Painel de propriedades
BpmnPropertiesProviderModule, // Provedor de propriedades BPMN
ContextPadModule,
CamundaBpmnModdle,
KeyboardModule,
PaletteModule
],
moddleExtensions: {
camunda: camundaModdleDescriptor,
}
});
this.loadDiagram();
} else {
console.error(‘Canvas ou container de propriedades não encontrado.’);
}
}
private async loadDiagram(): Promise {
const defaultBpmnXml = `<?xml version="1.0" encoding="UTF-8"?>
<bpmn:definitions xmlns:bpmn=“http://www.omg.org/spec/BPMN/20100524/MODEL”
xmlns:bpmndi=“http://www.omg.org/spec/BPMN/20100524/DI”
xmlns:dc=“http://www.omg.org/spec/DD/20100524/DC”
xmlns:di=“http://www.omg.org/spec/DD/20100524/DI”
xmlns:camunda=“http://camunda.org/schema/1.0/bpmn”
id=“Definitions_1”
targetNamespace=“http://bpmn.io/schema/bpmn”>
<bpmn:process id=“Process_1” isExecutable=“true”>
<bpmn:userTask id=“UserTask_1” name=“User Task”>
bpmn:extensionElements
camunda:formData
<camunda:formField id=“field1” label=“Field 1” type=“string” />
</camunda:formData>
</bpmn:extensionElements>
</bpmn:userTask>
</bpmn:process>
<bpmndi:BPMNDiagram id="BPMNDiagram_1">
<bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">
<bpmndi:BPMNShape id="StartEvent_1_di" bpmnElement="StartEvent_1">
<dc:Bounds x="173" y="102" width="36" height="36"/>
</bpmndi:BPMNShape>
<bpmndi:BPMNShape id="EndEvent_1_di" bpmnElement="EndEvent_1">
<dc:Bounds x="473" y="102" width="36" height="36"/>
</bpmndi:BPMNShape>
<bpmndi:BPMNEdge id="Flow_1_di" bpmnElement="Flow_1">
<di:waypoint x="209" y="120"/>
<di:waypoint x="473" y="120"/>
</bpmndi:BPMNEdge>
</bpmndi:BPMNPlane>
</bpmndi:BPMNDiagram>
</bpmn:definitions>`;
try {
await this.bpmnModeler.importXML(defaultBpmnXml);
console.log('Diagrama carregado com sucesso.');
} catch (error) {
console.error('Erro ao importar o XML:', error);
}
}
exportDiagram(): void {
this.bpmnModeler.saveXML({ format: true }).then((result: { xml?: string }) => {
if (result.xml) {
console.log(result.xml);
}
}).catch((error: any) => {
console.error(‘Erro ao salvar o XML:’, error);
});
}
}
Blockquote
I don’t know what I’m doing wrong, I’ve been researching for days and I find myself in a bind.
Any help will be greatly appreciated!