Adding sub custom element to the Palette

Developers
1

Hello everyone
Is it possible to split the custom element into sub category?

Thanks in advance

2

Please share a running / prototypical example that clearly shows what you’re trying to achieve, what is working and what is not.

Use our existing starter projects to quickly hack it or share your existing, partial solution on GitHub. Provide the necessary pointers that allow us to quickly understand where you got stuck.

This way we may be able to help you in a constructive manner.

Thanks :heart:

3

I managed to split the palette into two categories

<div class="toolbox"> 
<div id="basicElements"></div> 
<div id="customElement"></div>
</div>



function PaletteProvider(palette, create, elementFactory, yamlData) {

  this._create = create;
  this._elementFactory = elementFactory;
  this.yamlData = yamlData;

  palette._canvas.getContainer = () => {
    return document.querySelector("#customElement");
  };

  palette.registerProvider(this);

  drawBasicElements(palette, this)


}

function drawBasicElements(palette, that) {
  var refreshIntervalId = setInterval(() => {

    palette._canvas.getContainer = () => {
      return document.querySelector("#basicElements");
    };
    palette._diagramInitialized = undefined;
    var test = {};
    test.getPaletteEntries = getPaletteEntries;

    function getPaletteEntries() {
      return {
        'create.receive-task': createAction('bpmn:ReceiveTask', 'event', 'bpmn-icon-receive-task', 'Receive task', that._elementFactory, that._create),
        'create.exclusive-gateway': createAction('bpmn:ExclusiveGateway', 'gateway', 'bpmn-icon-gateway-xor', 'Exclusive gateway', that._elementFactory, that._create),
        'create.inclusive-gateway': createAction('bpmn:InclusiveGateway', 'gateway', 'bpmn-icon-gateway-or', 'Inclusive gateway', that._elementFactory, that._create),
        'create.parallel-gateway': createAction('bpmn:ParallelGateway', 'gateway', 'bpmn-icon-gateway-parallel', 'Parallel gateway', that._elementFactory, that._create),
        'create.end-event': createAction('bpmn:EndEvent', 'event', 'bpmn-icon-end-event-none', 'End event', that._elementFactory, that._create),
        'create.start-event': createAction('bpmn:StartEvent', 'event', 'bpmn-icon-start-event-none', 'Start event', that._elementFactory, that._create),
        'create.task': createAction('bpmn:Task', 'activity', 'bpmn-icon-task', 'Task', that._elementFactory, that._create),
        'create.subprocess-expanded': createAction('bpmn:SubProcess', 'activity', 'bpmn-icon-subprocess-expanded', 'Sub process', that._elementFactory, that._create),
      }
    }

    palette.registerProvider(test);
    palette._init();
    palette._update();
    clearInterval(refreshIntervalId);
    hideToolsYml();
  }, 1000);
}

PaletteProvider.prototype.getPaletteEntries = function () {
  var elementFactory = this._elementFactory,
    create = this._create;

  function startCreateTask(event) {
    var serviceTaskShape = elementFactory.create('shape', {
      type: 'bpmn:ServiceTask',
      tool: this
    });
    create.start(event, serviceTaskShape);
  }

  function createDelegate(func, target) {
    return function () {
      return func.apply(target, arguments);
    };
  }

  let ret = {};
  if (this.yamlData && this.yamlData.tools) {
    this.yamlData.tools.forEach((tool) => {
      tool.actions.forEach((action) => {

        let _params = action.params ? tool.params.concat(action.params) : tool.params;

        action.params = _.uniqWith(_params, _.isEqual);

        let delegate = createDelegate(startCreateTask, action);

        ret[tool.name + '-' + action.name] = {
          group: 'activity',
          html: `<div class="entry tool-yml" draggable="true"><img src="${tool.image}"><span class="text-tack">${action.name }</span></div>`,
          title: tool.display + ' ' + action.name,
          action: {
            dragstart: delegate,
            click: delegate
          }
        }
      });
    });

  }
  return ret;
};


/**
 * Hide tools yml from basic elements
 */
function hideToolsYml() {
  var toolsYml = document.querySelectorAll('#basicElements .tool-yml');
  toolsYml.forEach((tool) => {
    tool.style.display = 'none';
  })
}

function createAction(type, group, className, name, elementFactory, create) {
  function createListener(event) {
    var shape = elementFactory.create('shape', {type: type});

    create.start(event, shape);
  }

  return {
    group: group,
    className: className,
    name: name,
    html: '<div class="entry " draggable="true"><span class="text-tack">' + name + '</span></div>',
    title: 'Create ' + name,
    action: {
      dragstart: createListener,
      click: createListener
    }
  };
}

module.exports = PaletteProvider;

Now I try to do sub custom element.

For example :
toolbox

  • basicElements
    • id=“basicElements”
  • tools
    • category 1
      * id=" subCategory1 "
    • category 2
      * id=" subCategory2"
    • category 3
      * id=" subCategory3 "

Is there a way to do this or I need to overwrite your Palette file

Thanks in advance

4

and another question :slightly_smiling_face:
Is it possible to create an external toolbox?
And connect it to bpmn.io