Creating custom palette?

Developers Modeler
1

My (initial) task is to create a custom palette:

  1. A completely new icon to add on the palette
  2. Bring out bpmn:BusinessRuleTask on the palette

We’re using angular. I’m beginner for both JS and TS, so please bear with me.

For #1, we have something like in https://github.com/narve/angular-bpmn/blob/master/src/app/props-provider/CustomPaletteProvider.ts, i.e. we implemented getPaletteEntries so that it gets SVG info from a CSS class, e.g.:

getPaletteEntries() {
    return {
      new-task: {
        group: 'tools',
        className: new-task,
</code>

But I was wondering if I could do something similar like in example SketchyRenderer module:

      var pathData = pathMap.getScaledPath('TASK_TYPE_NEW_TASK', ...);

That would be great, coz then that probably also means I can reuse default SVGs in bpmn-js like:

      var pathData = pathMap.getScaledPath('TASK_TYPE_BUSINESS_RULE_HEADER', ...);

So I guess, some of the things I’d be interested at are:

  • How can I expose pathMap in my CustomPaletteProvider.ts
  • How can I use that to provide custom tasks in the palette?

Thanks in advance!

2

First of all, please make sure to format your code samples for better readability: https://help.github.com/en/articles/creating-and-highlighting-code-blocks

There’s an example of creating custom palette entries: https://github.com/bpmn-io/bpmn-js-example-custom-controls

As for icons, since you want to use a BPMN symbol you can use the ones provided by bpmn-font which is used for the palette icons. PathMap is a utility for rendering shapes on the canvas.

2 Likes
3

Thanks for the tips! I can reuse the BPMN symbols I needed now.

But how about creating new ones? What is the “proper” way? Say, in the bpmn-js-example-custom-controls example, what if you want to use your own custom palette and context pad icons/symbols?

4

You’re free to use whatever technique you prefer. There is no right or wrong way to do it.