Adding more than one element to the Palette

[Aws_rayyan]

I was to add more than one element to my Palette, I can only add one. I created two CustomPalette.js files for each of the objects I want to add and imported them in my main.js, however, only the last imported element is shown in the palette

This is one of the CustomPalette.js files

export default class CustomPalette {
  constructor(create, elementFactory, palette, translate) {
    this.create = create;
    this.elementFactory = elementFactory;
    this.translate = translate;

    palette.registerProvider(this);
  }

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

    function createServiceTask(event) {
      const shape = elementFactory.createShape({
        type: "vyoo_action:VyooAction",
      });

      create.start(event, shape);
    }

    return {
      "create.service-task": {
        group: "activity",
        className: "bpmn-icon-service-task",
        title: translate("Create Action"),
        action: {
          dragstart: createServiceTask,
          click: createServiceTask,
        },
      },
    };
  }
}

CustomPalette.$inject = ["create", "elementFactory", "palette", "translate"];

The other one is the same, with different names and icons.

This is my index.js file in the custom folder.

import CustomPalette from "./CustomPalette";

export default {
  __init__: ["customPalette"],
  customPalette: ["type", CustomPalette],
};

An example is as follows if my main.js has the following when creating the modeller

  additionalModules: [
    BpmnPropertiesPanelModule,
    BpmnPropertiesProviderModule,
    customVyooActionModule,
    customVyooFormModule,
  ],

Then customVyooFormModule is shown, but if it was

  additionalModules: [
    BpmnPropertiesPanelModule,
    BpmnPropertiesProviderModule,
    customVyooFormModule,
    customVyooActionModule,
  ],

then customVyooFormModule is shown

[Alessia_Volpi]

Try to return not just the one you added but the entire set of entries.
You first create the entries you need
YourExpansionName.prototype.getContextPadEntries = function(element) {
var bpmnReplace = this._bpmnReplace,
elementRegistry = this._elementRegistry,
translate = this._translate,
viewer = this._viewer,
return function(entries) {
entries[“new entry”]={}
entries[“new entry”]={}
return entries;
}

[Aws_rayyan]

Thank you so much. That indeed worked.

For future reference, if anyone faces the same issue,
you don’t have to create a custom palette for each element. In fact, YOU SHOULDN’T.

create a single custom palette, and use it for all the other elements,

for each element, create a function such as createServiceTask in the above code, and in the final return statement, reference these functions in their respective code.

Here is a code snippet for the demonstration

// CustomPalette.js
export default class CustomPalette {
  constructor(bpmnFactory, create, elementFactory, palette, translate) {
    this.bpmnFactory = bpmnFactory;
    this.create = create;
    this.elementFactory = elementFactory;
    this.translate = translate;

    palette.registerProvider(this);
  }

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

    function createTask() {
      return function (event) {
        const businessObject = bpmnFactory.create("form:cusForm");
        const shape = elementFactory.createShape({
          type: "vform:cusForm",
          businessObject,
        });

        create.start(event, shape);
      };
    }

    function createActionElements(event) {
      const shape = elementFactory.createShape({
        type: "action:cusAction",
      });

      create.start(event, shape);
    }

    return {
      "create.lindaidai-task": {
        group: "model",
        className: "icon-custom lindaidai-task",
        title: translate("awsaws aws"),
        action: {
          dragstart: createTask(),
          click: createTask(),
        },
      },
      "create.service-task": {
        group: "activity",
        className: "bpmn-icon-service-task",
        title: translate("Create Action"),
        action: {
          dragstart: createActionElements,
          click: createActionElements,
        },
      },
    };
  }
}

CustomPalette.$inject = [
  "bpmnFactory",
  "create",
  "elementFactory",
  "palette",
  "translate",
];

finally, reference this in your main.js, same as above