Problem with adding a custom element to the modeler


Hi, I want to add a custom element and I made the following changes:
In “BPMNRendere.js”:

'bpmn:Choreography': function(parentGfx, element) {

  var pathData = pathMap.getScaledPath('TASK_TYPE_CHOREOGRAPHY', {
    abspos: {
      x: 17,
      y: 15

  /* manual path /**/ drawPath(parentGfx, pathData, {
    strokeWidth: 0.9111, // 0.25,
    fill: getFillColor(element),
    stroke: getStrokeColor(element)

  return pathData;

In PathMath.js:

	d: 'M57.1,34.6l-56.7,0V11.5l56.7,0V34.6z' +
	'M0.5,34.6v3.3c0,4.3,3.5,7.7,7.7,7.7h41.2c4.3,0,7.7-3.5,7.7-7.7v-3.3L0.5,34.6z M57.1,11.5V8.2c0-4.3-3.5-7.7-7.7-7.7H8.2'+

In PaletteProvider.js:

'create.custom': createAction(
  'bpmn:Custom', 'activity', 'bpmn-icon-choreography'

In context pad there is the element “Custom” without problems, but when I click on it, there’s no possibility to add the element to the model. Is there others files to change, or is there some mistakes in the codes above?

Thanks for answer


I guess you’re missing the model extensions. Here you can find an example for model extensions. There, they’re used for extending the properties panel but that only influences the content of the extension.


Thanks for your answer. I solved the problem by adding a new element to the “bpmn.json” file, as written in the example in “moddle extension” paragraph.