Dynamic overlay

[ali]

Hi all,

I am using an overlay with a bpmneditor in react typescript code. I can add a hard-coded overlay but I would like to add a dynamic overlay to each “bpmn:Task” element.

I would also like to use a attribute from the “bpmn:Task” element (which has already been saved to xml) to display in the overlay. - this will be a url to use in an <a> in the overlay.

              const url = "https://tailwindcss.com"

              overlays.add("usertask1", {
                position: {
                  bottom: 0,
                  right: 0
                },
                html: `<a href=${url}>link to sop</a>`
              });

In the above code “usertask1” is the id of the element. But it will not be possible to know the id in advance which is why I would like to add an overlay to every “bpmn:task” element. I can then conditionally add a overlay if “element.busineesObject.sopurl” is a valid url.

Any tips or advice would be greatly appreciated.
Thanks

[barmac]

To grab all of the bpmn:Task elements, you can use the ElementRegistry and filter out the tasks. The code could look similar to this:

import { is } from 'bpmn-js/lib/util/ModelUtil.js';

// later in the code
const elementRegistry = modeler.get('elementRegistry');
const tasks = elementRegistry.filter(element => is(element, 'bpmn:Task');

console.log(tasks);