Element required error

Developers Modeler
1

25%20PM

I get this issue when I import xml to modeler

2

Please share a running / prototypical example that clearly shows what you’re trying to achieve, what is working and what is not.

Use our existing starter projects to quickly hack it or share your existing, partial solution on GitHub. Provide the necessary pointers that allow us to quickly understand where you got stuck.

This way we may be able to help you in a constructive manner.

Thanks :heart:

3

Also, please do not share screenshots but copied stack traces that we can easily read and search.

1 Like
4

ok

core.js:15724 ERROR Error: element required
at Hd.execute (bpmn-modeler.production.min.js:27)
at bpmn-modeler.production.min.js:27
at Sh._atomicDo (bpmn-modeler.production.min.js:27)
at Sh._internalExecute (bpmn-modeler.production.min.js:27)
at Sh.execute (bpmn-modeler.production.min.js:27)
at am.updateProperties (bpmn-modeler.production.min.js:27)
at process-design.component.ts:1108
at ZoneDelegate.push…/node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
at Object.onInvokeTask (core.js:17290)
at ZoneDelegate.push…/node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422)

5

@ShefaliAgarwal can you please follow the step @barmac proposed to you? What did you actually do? What diagram you were trying to import? Without any additional information, we will not able to help you.

6

I can share the flow I am using

Firstly I am initiating modeler in ngAfterViewInit

ngAfterViewInit() {
this.modeler = new Modeler({
      container: '#canvas',
      width: '90%',
      height: '500px',
      additionalModules: [
        PropertiesPanelModule,
        OriginalPropertiesProvider,
        { [InjectionNames.bpmnPropertiesProvider]: ['type', OriginalPropertiesProvider.propertiesProvider[1]] },
      ]
    });
}

so after this I am calling download bpmn file api in which I get the file in response, if there is no file in response than I import by default bpmn file from assets folder

my default bpmn file is newDiagram.bpmn

<bpmn:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
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">
<bpmn:process id="Default_Process" name=" " isExecutable="false">
<bpmn:startEvent id="Start" name=" " />
<bpmn:endEvent id="End" name=" " />
</bpmn:process>
<bpmndi:BPMNDiagram id="BPMNDiagram_1">
<bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Default_Process">
<bpmndi:BPMNShape id="_BPMNShape_StartEvent_2" bpmnElement="Start" bioc:stroke="#00ff00">
<dc:Bounds x="173" y="102" width="36" height="36" />
<bpmndi:BPMNLabel><dc:Bounds x="179" y="145" width="24" height="14" />
</bpmndi:BPMNLabel>
</bpmndi:BPMNShape>
<bpmndi:BPMNShape id="EndEvent_1x1nmqt_di" bpmnElement="End" bioc:stroke="#ff0000">
<dc:Bounds x="542" y="102" width="36" height="36" />
<bpmndi:BPMNLabel>
<dc:Bounds x="380" y="145" width="20" height="14" />
</bpmndi:BPMNLabel>
</bpmndi:BPMNShape>
</bpmndi:BPMNPlane>
</bpmndi:BPMNDiagram>
</bpmn:definitions>

now code to import the file I have written is

this.httpClient.get('/assets/bpmn/newDiagram.bpmn', {
                headers: { observe: 'response' }, responseType: 'text'
              }).subscribe(
                (x: any) => {
                  this.modeler.importXML('');
                  this.modeler.importXML(x, this.handleError.bind(this));
                  this.bpmnTemplate = x;
                  setTimeout(() => {
                    let elementRegistry = this.modeler.get('elementRegistry');
                    let element = elementRegistry.get('newProcess');
                    let modeling = this.modeler.get('modeling');
                    let id = this.selectedProcess;
                    modeling.updateProperties(element, {
                      name: id,
                      id: id.replace(new RegExp(' ', 'g'), '_'),
                    })
                    document.getElementById("processId").focus();
                  })
                },
                this.handleError.bind(this)
              );

In the above code after importing diagram to modeler I am updating the properties of diagram with some selected value in code, I get error after this, whenever I import xml to modeler

error is

core.js:15724 ERROR Error: element required
at Hd.execute (bpmn-modeler.production.min.js:27)
at bpmn-modeler.production.min.js:27
at Sh._atomicDo (bpmn-modeler.production.min.js:27)
at Sh._internalExecute (bpmn-modeler.production.min.js:27)
at Sh.execute (bpmn-modeler.production.min.js:27)
at am.updateProperties (bpmn-modeler.production.min.js:27)
at process-design.component.ts:1108
at ZoneDelegate.push…/node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
at Object.onInvokeTask (core.js:17290)
at ZoneDelegate.push…/node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422)
7

There is no element.

importXML takes a callback as the second argument. You’re trying to do things before the diagram has been imported.

This is how it’s done:

modeler.importXML(xml, (err, warnings) => {
  // we're ready
});