importXML issue(bpmn file angular)

Developers Modeler
1

Hi.I am using bpmn with angular 4.When importing bpmn file and attaching customElements with the modeler i am facing the issue of undefined .The exact error on console is
cannot read property ‘modeler’ of undefined
The code in ngOnInit is

const url = 'assets/bpmn/initial.bpmn';
    this.http.get(url, {
      headers: {observe: 'response'}, responseType: 'text'
    }).subscribe(
      (x: any) => 
      {
        this.modeler.importXML(x, function(err){
          if(err){
            console.log(err);
          }
           this.modeler.get('canvas').zoom('fit-viewport');
          this.modeler.addCustomElements(customElements);
        });
       
      },
    );

The code is simple.It basically import bpmn file and after that it attaches he customElements form json file with the xml.This part is important in my case.Attaching customElements with the xml file.My bpmn package version in package.json is
"bpmn-js": “^2.4.1”,

Any help in this issue is highly appreciated
thanks

2

Hint: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

3

thanks .But on the other hand if i remove the lines inside call back function,the error does not appear any more.Can you kindly elaborate the answer more

thanks

4

Please try to understand why.

5

I have initialized this.modeler earlier with

this.modeler = new CustomModeler({
      container: '#canvas',
       keyboard: {
        bindTo: document
      },
      width: '100%',
      height: '600px',
      additionalModules: 
      [
        // PropertiesPanelModule,
        //comments,
        CustomPalette,
        {[InjectionNames.bpmnPropertiesProvider]: ['type', OriginalPropertiesProvider.propertiesProvider[1]]},
        {[InjectionNames.propertiesProvider]: ['type', CustomPropsProvider]},
      ],
      propertiesPanel: {
        parent: '#properties'
      },
      moddleExtension: {
        custom: customModdle
      }
    });
6

Please make sure you understand how this works in JavaScript. The error you get has nothing to do with bpmn-js.

7

thanks alot.this issue is solved

1 Like
8

@abdur91 hello I am facing your same problem, can please help me how can we call angular function inside bpmn modeler importXml function?
Any hints please

9

You must inject angular service or component to modeler object. Like this: (Pass by “value”. Not “type”)

        this.modeler = new CustomModeler({
            container: '#js-canvas',
            propertiesPanel: {
                parent: '#js-properties-panel',
            },
            additionalModules: [
                { dialogService: ['value', this.dialogService] },
                { processEditor: ['value', this] },
                ..............................................
            ],
            moddleExtensions: {
                flowable: CamundaModdleDescriptor,
            }
        });

This is custom properties panel example:

import { IPropertiesProvider } from './bpmn-js';
import customProperties from './customProperties';
import { DialogService } from '@ms/core/components/dialog/service/dialog.service';

export class CustomPropertiesProvider implements IPropertiesProvider {
    static $inject = ['eventBus', 'translate', 'camundaPropertiesProvider', 'dialogService','processEditor'];

    // Note that names of arguments must match injected modules, see InjectionNames.
    constructor(
        private eventBus,
        private translate,
        private camundaPropertiesProvider,
        private dialogService: DialogService,
        private processEditor: ProcessEditorComponent
    ) {
    }

    createCustomGroup(element, translate) {
        const customTab = {
            id: 'customText',
            label: this.translate('customText'),
            entries: [],
        };
        customProperties(customTab, element, translate);
        return [customTab];
    }

    getTabs(element) {
        console.log(this.constructor.name, 'Creating property tabs');
        const customTab = {
            id: 'custom',
            label: this.translate('Custom'),
            groups: this.createCustomGroup(element, this.translate),
        };
        return this.camundaPropertiesProvider.getTabs(element).concat(customTab);
    }
}
1 Like