Altering or Changing the Icon for My Custom Task

[yganatra]

For an Example if I have one Cutom Task ( Print Task )

I used custom rederer to render this type of Task.
My code for the same is

export default function CustomRenderer(
    config, eventBus, styles,
    pathMap, canvas, textRenderer) {

    pathMapData = pathMap
    // debugger;
    BpmnRenderer.call(
        this,
        config, eventBus, styles,
        pathMap, canvas, textRenderer,
        1400
    );

    var computeStyle = styles.computeStyle;

    this.drawPrintTask = function (p, d, attrs) {
        attrs = computeStyle(attrs, ['no-fill'], {
            strokeWidth: 2,
            stroke: 'black'
        });
        // return p.path(d).attr(attrs);

        let path = svgCreate('circle');
        // svgAttr(path, { d: d });
        // svgAttr(path, attrs);

        svgAppend(p, path);

        return path;
    }
}

inherits(CustomRenderer, BpmnRenderer);




CustomRenderer.prototype.canRender = function (element) {
    return /^bpmnCustom:/.test(element.type);
};

CustomRenderer.prototype.drawShape = function (p, element) {
    debugger;
    let type = element.type;


    if (type === 'bpmnCustom:PrintTask') {
        element.type = 'bpmn:Task'
        const shape = this.drawBpmnShape(p, element);

        let pathData = pathMapData.getScaledPath('TASK_TYPE_SEND', {
            xScaleFactor: 1,
            yScaleFactor: 1,
            containerWidth: 21324,
            containerHeight: 1454,
            position: {
              mx: 3.28544,
              my: 1.357
            }
        });

        this.drawPrintTask(p, pathData, {
            strokeWidth: 1,
            fill: 'red'
          });

        debugger;

        return shape;
    }

};

I tried altering draw Print Task by many ways but I am not able to get any icon over there and I end up getting simple Task effect like this

I checked these links but nothing helped.

How to add custom svg image via custom renderer?

Hello, thank you for your response. This and other similar icons would be added to any task in some cases (to the upper right corner), so my question is, whether I am supposed to link my PathMap.js with custom icons added and if yes how to convert the svg format - from some reason the custom icons are much more bigger than the other from PathMap.js. What is the format? Thank you very much! My CustomRenderer.js contains something like this: function CustomRenderer(eventBus, styles, pathMap) {…

How to add custom Icon drop

In bpmn-js every shape and connection has a businessObject property which is the actual model element with all the business logic. The error occurs because bpmn-js is trying to create a business object for your custom element but it doesn’t know how this is supposed to look like. In the custom elements example there is a custom element factory which makes sure that for custom elements like the triangle and the circle no business objects are created. If you’d want to do that you’d have to add the…

Could you please let me know what’s the issue and what I need to update to make it work.

[yganatra]

No one?
I am not able to make it work properly.

[jhoni]

Hi @yganatra ,
How do you create a custom task type like that? do you have an example?