No All data display in properties panel

Developers Modeler
1

Hi,

I use Angular 7 ad I want to add modeler into this app.
Diagram display properly but in the properties panel, I see the only description of the task and nothing else.

I using these versions:


    "bpmn-js": "^4.0.3",
    "bpmn-js-properties-panel": "^0.30.0",
    "camunda-bpmn-moddle": "^3.0.0",
    "diagram-js": "^3.3.1",

Also when I want to add some listener into the task I got error ERROR
camunda:ExecutionListener

import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import BpmnModeler from 'bpmn-js/lib/Modeler';

import propertiesPanelModule from 'bpmn-js-properties-panel';
import propertiesProviderModule from 'bpmn-js-properties-panel/lib/provider/camunda';

import camundaModdleDescriptor from 'camunda-bpmn-moddle/resources/camunda.json';
@Component({
  selector: 'app-hot-deployment',
  templateUrl: './hot-deployment.component.html',
  styleUrls: ['./hot-deployment.component.scss']
})
export class HotDeploymentComponent implements OnInit {
  modeler;
  constructor(private http: HttpClient) {
    
   }

  ngOnInit() {
    this.modeler = new BpmnModeler({
      container: '#canvas',
      width: '100%',
      height: '600px',
      additionalModules: [
        propertiesPanelModule,
        propertiesProviderModule
      ],
      propertiesPanel: {
        parent: '#properties'
      },
      moddleExtension: {
        custom: camundaModdleDescriptor
      }
    });
  }

  handleError(err: any) {
    if (err) {
      console.warn('Ups, error: ', err);
    }
  }

  load(): void {
    const url = '/assets/bpmn/initial.bpmn';
    this.http.get(url, {
      headers: {observe: 'response'}, responseType: 'text'
    }).subscribe(
      (x: any) => {
        console.log('Fetched XML, now importing: ', x);
        this.modeler.importXML(x, this.handleError);
      },
      this.handleError
    );
  }

  save(): void {
    this.modeler.saveXML((err: any, xml: any) => console.log('Result of saving XML: ', err, xml));
  }
}

and this is my html

<button (click)="load()">Load <i class="fa fa-folder-open"></i></button>
<button (click)="save()">Save <i class="fa fa-save"></i></button>

<div class="modeler">
  <div id="canvas"></div>
  <div id="properties"></div>
</div>

And I haven’t an idea what is wrong
26-09-27-09

On attachment, the screenshot should also display Details, Asynchronous, Job configuration

2

Have you used inspect tool in your browser to check whether the SVG is created inside of the <div id="canvas"></div>? It looks like a CSS issue.

For Chrome, you can use this tutorial to check the above: https://developers.google.com/web/tools/chrome-devtools/open

1 Like