Plugin added on the Camunda 5.28.0

BPMN & Modeling Discussion & Questions
1

I using the version of 5.28.0 of the Camunda without installation. I want to add the custom draggable component to the toolbar,but I found that it was added to the menu bar for me, and it was still grayed out.

fist question: why the plugin I added is grayed ?

second: How to add a custom drag and drop control, just like Camunda’s own Task component

Thanks a lot

index.js,

const CustomTaskIcon = require(‘./CustomTaskIcon’);

console.log(“Custom Task Plugin Loaded”);

module.exports = CustomTaskIcon;

module.exports = {
name: ‘custom-task-plugin’,
activate: function() {
console.log(‘Custom Task Plugin activated’);

app.on('menu:plugins', (menu) => {
  menu.addMenuEntry({
    label: 'Custom Action',
    accelerator: 'CmdOrCtrl+Shift+C',
    action: () => {
      console.log('Custom action triggered!');
    }
  });
});

},
deactivate: function() {
console.log(‘Custom Task Plugin deactivated’);
},
init: [ ‘CustomTaskIcon’ ],
paletteProvider: [ ‘type’, CustomTaskIcon ] // 注册到工具栏
};

CustomTaskIcon,

const { assign } = require(‘min-dash’);

class CustomTaskIcon {
constructor(bpmnFactory, create, elementFactory, palette, translate) {
this.create = create;
this.elementFactory = elementFactory;
this.translate = translate;

palette.registerProvider(this);

}

getPaletteEntries(element) {
const {
create,
elementFactory,
translate
} = this;

return {
  'create.custom-task': {
    group: 'activity',
    className: 'custom-task-icon',
    title: translate('Create Custom Task'),
    action: {
      dragstart: this.createCustomTask.bind(this),
      click: this.createCustomTask.bind(this)
    }
  }
};

}

createCustomTask(event) {
const shape = this.elementFactory.createShape({ type: ‘bpmn:Task’ });
this.create.start(event, shape);
}
}

CustomTaskIcon.$inject = [
‘bpmnFactory’,
‘create’,
‘elementFactory’,
‘palette’,
‘translate’
];

module.exports = CustomTaskIcon;

package.json,

{
“name”: “custom-task-plugin”,
“version”: “1.0.0”,
“main”: “index.js”,
“camunda-modeler”: {
“type”: “plugin”
},
“babel”: {
“presets”: [
“@babel/preset-env”
]
},
“dependencies”: {
“@sentry/node”: “^7.5.0”,
“bpmn-js”: “^17.11.1”
},
“devDependencies”: {
“@babel/cli”: “^7.25.9”,
“@babel/core”: “^7.26.0”,
“@babel/preset-env”: “^7.26.0”
}
}