How to autofocus an bpmn.io event?

Developers Modeler
1

Hi,

How to auto focus an event in bpmn.io using its id, for example i want to auto focus a particular task in bpmn.io whose id was know, without using mouse/keyboard how can i acheive this, please help me out.

Thanks & Regards,
Siva

2

I found the solution, but got error

var task = this.modeler.get(‘elementRegistry’).get(this.currentTaskId);

this.modeler.get(‘selection’).select(task);

error,

Error: rootElement already set, need to specify override

here i’m importing the saved bpmn.io xml back to my modeler after importing i’m focusing an event, when the above piece of code executes it throws the error, please help me out to fix this,

Thanks & Regards,
Siva

3

Hi @SIva

Please try to not open multiple threads for the same issue. Let’s try to solve your problem in this one. Can you give us some more information about your problem, e.g. with example code or a test case so when we can help you in detail? It’s hard to find where the error is produced, when we can’t see your code.

4

Hi @Niklas_Kiefer,

I’ll close the other thread, thanks for replying, my usecase is simple, i’m saving a bpmn diagram as an XML and I’m viewing it back with the autofocus functionality using the above code, but while autofocus it throws the above error

Thanks,
Siva

5

hi @Niklas_Kiefer,

I’m using bpmn.io for my angular project, there i have loaded entire canvas and modeler in ngOnInit(),

This is how i’m importing my xml,

const url = ‘/assets/processlet/bpmn/initial.bpmn’;
this.http.get(url, {
headers: {observe: ‘response’}, responseType: 'text’
}).subscribe(
(x: any) => {
this.modeler.importXML(x, this.handleError);
},
this.handleError
);

after that i save the bpmn.io diagram and i just show it using the same below code,

this.modeler.importXML(this.checkXml, this.handleError);

after the saved diagram was shown i used the below code to auto focus a particular event (im using task id to auto focus it),

var focusEvent= this.modeler.get(‘elementRegistry’).get(this.currentTaskId);
this.modeler.get(‘selection’).select(task);

but after that it throws the error,

Error: rootElement already set, need to specify override

please help me out to fix this issue,

thanks,
siva

6

Where do you try to select the given task? What is inside your handleError function? Modeler#importXML is intended to get a callback after the xml was imported, not only for handling errors. See this example for using it correctly.

See this example code for selecting a task automatically:

bpmnModeler.importXML(xml, function(err) {

  if (err) {
     return console.error('could not import BPMN 2.0 diagram', err);
  }

   // select specific task
   var taskId = "TASK_1";

   bpmnModeler.get('selection').select(
     bpmnModeler.get('elementRegistry').get(taskId)
   );
});
7

Hi @Niklas_Kiefer,

I’m trying to select the task after initializing my component (as soon as the bpmn.io diagram got imported),

here is my code,

onLoad(){
this.currentTaskId='someTaskID’
const url = ‘/assets/processlet/bpmn/initial.bpmn’;
this.http.get(url, {
headers: {observe: ‘response’}, responseType: 'text’
}).subscribe(
() => {
console.log('Fetched XML, now importing: ', this.checkXml);
this.modeler.importXML(this.checkXml, function(err) {
if (err){
return console.error(‘could not import BPMN 2.0 diagram’,err);
}

** // select specific task**
var taskId = this.currentTaskId;
this.modeler.get(‘selection’).select(
this.modeler.get(‘elementRegistry’).get(taskId));
});
});
}

I tried the above example I got this error,

could not import BPMN 2.0 diagram Error: rootElement already set, need to specify override

Thanks,
Siva

8

The printed error reveals, that there are problems while importing the xml and not when it tries to select the task. What is your this.checkXml function doing? Maybe something is wrong with the xml which the modeler tries to import.

9

Hi @Niklas_Kiefer,

checkXml is not a function it was a variable that contains xml value,

here is the this.checkXml value,

<?xml version="1.0" encoding="UTF-8"?>

<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” id=“Definitions_1” targetNamespace=“http://bpmn.io/schema/bpmn”><bpmn:process id=“Process_1” isExecutable=“false”><bpmn:task id=“Task_1dzy1ew” name=“myTask” actionType="" channel="" triggerType="" /></bpmn:process><bpmndi:BPMNDiagram id=“BPMNDiagram_1”><bpmndi:BPMNPlane id=“BPMNPlane_1” bpmnElement=“Process_1”><bpmndi:BPMNShape id=“Task_1dzy1ew_di” bpmnElement=“Task_1dzy1ew”><dc:Bounds x=“264” y=“117” width=“100” height=“80” /></bpmndi:BPMNShape></bpmndi:BPMNPlane></bpmndi:BPMNDiagram></bpmn:definitions>

Thanks,
Siva

10

Thanks for sharing your xml!

After replacing the misleading “ and ” with a simple " I was able to open this diagram via modeler.importXml and also to select it via the selection module, with the code snippet I posted before.

image

Maybe it belongs with the wrong apostrophes in the xml, because when I try to exactly import the xml you shared, the import failed with a couple of errors.

That is the xml I was able to import (with replaced apostrophes):

<?xml version="1.0" encoding="UTF-8"?>
<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" id="Definitions_1" targetNamespace="http://bpmn.io/schema/bpmn">
    <bpmn:process id="Process_1" isExecutable="false">
        <bpmn:task id="Task_1dzy1ew" name="myTask" actionType="" channel="" triggerType="" />
    </bpmn:process>
    <bpmndi:BPMNDiagram id="BPMNDiagram_1">
        <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">
            <bpmndi:BPMNShape id="Task_1dzy1ew_di" bpmnElement="Task_1dzy1ew">
              <dc:Bounds x="264" y="117" width="100" height="80" />
            </bpmndi:BPMNShape>
        </bpmndi:BPMNPlane>
    </bpmndi:BPMNDiagram>
</bpmn:definitions>

However I am not an expert with angular, so I can’t say whether it could belong to the asynchronous fetching of the xml file as you showed above. That might be another reason.

11

Hi @Niklas_Kiefer,

I tried using the modified xml which was shared by you, but still the problem exists, any other suggestions,

I’m getting the same error,

rootElement already set, need to specify override

Thanks,
Siva