How to add/display selected icon to Task box

So far I have a custom context pad element icon in the palette. By clicking on it I am able to choose an image from the system (png, svg, …).

How can I upload/render the selected icon in the top-right of the Task box?
Not only render but the icon has to be persistent, meaning that it has to be saved in XML.


Thanks a lot in advance.

Can you explain your use case and why you’d want to save an image in the XML? Note that the user icon is not part of the XML but simply rendered by bpmn-js to indicate that the task is a user task. So my assumption would be that you simply want to set some custom property on the element which combined with a custom renderer would lead to the expected behavior. This example should help you: bpmn-js-examples/custom-elements at master · bpmn-io/bpmn-js-examples · GitHub

Well that user icon was just an example. The goal is only to render such icon in order to have a better overview/assignment of the Task, nothing else than that and the Icon has to be chosen/uploaded from the system.
The link you provided should still help with that?.
I assumed that for keeping the icon persistent, it had to be saved to the xml file.
If not, how can I then have the rendered icon persistent?

What information do you actually want to persist? Can you explain?

When I upload/render an Icon to the Task and save the Diagram, whenever I want to open the diagram again, I would like to retrieve the rendered icon as well. I hope now is clearer.

What does the icon represent?

It is only a customer wish, to upload in each Task box a desired thumbnail/Icon or any image to better represent/describe or to have a better overview of the Task.
Which approach should I follow?

Hi @ccius i have same problem and I would like to know how to have the pictograms to represent the situations involving for example a human treatment or a treatment from our CRM (add a tag, create an activity …, update a record …)

You can add image data to a BPMN element just like any other custom data using the built-in extension mechanism (see bpmn-js-examples/custom-elements at master · bpmn-io/bpmn-js-examples · GitHub). However, that image won’t just magically show up in the diagram. Note, that other icons like the user task icon or the service task icon are not part of any BPMN diagram. Instead, they are part of the renderer which knows what an element of a given type looks like. Without customizing the renderer your icons won’t be visible. I’d argue that there is no point in saving any image data in your case. Use a custom attribute like foo:customData="myCustomData" instead and then render an icon based on that attribute.