Implements custom palette with custom properties

Developers
1

I want to create a palette with custom icons (svg) (removing the others icons in the palette, except hand,lasso,line) and have custom properties for each icons.

I found a example here : https://codesandbox.io/s/bpmn-js-custom-palette-3w792

but I’m not that good in javascript, I’m a java backend developer, and I have trouble putting all that together.

I try the example postit-js, but I wasn’t able to get it to compile on my Windows 10 computer (probably incompatible npm/node version… )

Can someone help with to get a example of custom palette and custom properties in codesandbox ?

2

Hey,

It seems like this example is what you are looking for: https://github.com/bpmn-io/bpmn-js-example-custom-controls

In this example we modify the palette.

Also see this example: https://github.com/bpmn-io/bpmn-js-nyan for a better understanding of bpmn-js customization.

3

there is something that I don’t understand. I cloned the project bpmn-js-nyan

did
npm install
npm run dev

http://localhost:9876/debug.html

but I don’t see the nyan icon in the palette.

4

That’s why only the first test is shown in the browser. You have to specify a test with only, e.g.

 describe.only('combined', function() {

    function inject(fn) {

      var config = {
        additionalModules: [
          nyanPaletteModule,
          nyanDrawModule,
          colorPickerModule,
          resizeAllModule
        ],
        keyboard: {
          bindTo: document.body
        }
      };

      return withModeler(config, fn);
    }


    it('should create cat from palette', inject(function() {

    }));

});
5

I made some progress. I use the example : bpmn-js-example-custom-shapes

I modify the file : customPalettte.js

function createAction(type, group, className, title, options, url) {

    function createListener(event) {
      var shape = elementFactory.createShape(assign({ type: type }, options));

      if (options) {
        shape.businessObject.di.isExpanded = options.isExpanded;
      }

      create.start(event, shape);
    }

    var shortType = type.replace(/^bpmn:/, '');

    return {
      group: group,
      className: className,
      imageUrl: url,
      title: title || 'Create ' + shortType,
      action: {
        dragstart: createListener,
        click: createListener
      }
    };
  }

assign(actions, {
    'custom-letterA': createAction(
      'custom:letterA', 'custom', 'icon-custom-letter','','', 'https://upload.wikimedia.org/wikipedia/commons/a/a6/Font_A.svg'
    ),
    'custom-letterB': createAction(
        'custom:letterB', 'custom', 'icon-custom-letter','','', 'https://upload.wikimedia.org/wikipedia/commons/3/3f/Font_B.svg'
    ),
    'custom-letterC': createAction(
        'custom:letterC', 'custom', 'icon-custom-letter','','', 'https://upload.wikimedia.org/wikipedia/commons/f/fa/Font_C.svg'
    ),
    'custom-separator': {
      group: 'custom',
      separator: true
    },
    'lasso-tool': {
      group: 'tools',
      className: 'bpmn-icon-lasso-tool',
      title: 'Activate the lasso tool',
      action: {
        click: function(event) {
          lassoTool.activateSelection(event);
        }
      }
    },
    'space-tool': {
      group: 'tools',
      className: 'bpmn-icon-space-tool',
      title: 'Activate the create/remove space tool',
      action: {
        click: function(event) {
          spaceTool.activateSelection(event);
        }
      }
    },
    'tool-separator': {
      group: 'tools',
      separator: true
    }

  });

With that I have a palette with the letter A, B, C

When I drag them on the board… I only have a empty rectangle (that part is not done yet).

I also modify the file : CustomContextPadProvider.js

I want the letterA,B,C be able to connect only to letter D,E,F (like A->D or E or F)
and letter D,E,F to none

but I don’t know that to change to have that

export default function CustomContextPadProvider(injector, connect, translate) {

  injector.invoke(ContextPadProvider, this);

  var cached = bind(this.getContextPadEntries, this);

  this.getContextPadEntries = function(element) {
    var actions = cached(element);

    var businessObject = element.businessObject;

    function startConnect(event, element, autoActivate) {
      connect.start(event, element, autoActivate);
    }

    if (isAny(businessObject, [ 'custom:letterA', 'custom:letterB', 'custom:letterC'])) {
      assign(actions, {
        'connect': {
          group: 'connect',
          className: 'bpmn-icon-connection-multi',
          title: translate('Connect using custom connection'),
          action: {
            click: startConnect,
            dragstart: startConnect
          }
        }
      });
    }

    if (isAny(businessObject, [ 'custom:letterD', 'custom:letterE', 'custom:letterF'])) {
      assign(actions, {
        'connect': {
          group: 'connect',
          className: 'bpmn-icon-connection-multi',
          title: translate('Connect using custom connection'),
          action: {
            click: startConnect,
            dragstart: startConnect
          }
        }
      });
    }

    return actions;
  };
}
6

Can you elaborate on your use case? In the context of BPMN what is the use of custom elements that are not part of the BPMN specification? What are they supposed to represent?

7

the truth, I’m not using bpmn for creating bpmn diagram. I want to use it to generate a custom tool. I was looking to use mxgraph at first, but I found it hard to understand. After looking around, I found diagram-js but most of the functionnaly that I was looking for : custom palette, custom properties… was in bpnm-js so I thought that I could just use it for my own usecase.

8

Hey,

Have you checked the official diagram-js example out?

The example contains a custom palette, context pad and some rules. I advice you don’t deal with bpmn-js and bpmn related stuff just for the sake of diagram rendering.

9

there is a example with properties in diagram-js ? and export diagram ?

10

The example I sent you contains:

  1. Custom Palette
  2. Custom context pad
  3. Custom rules

and also shows you how you can create shapes via diagram-js.

It seems like you’re working on something non-bpmn related. diagram-js itself is not bpmn related either, we use it inside bpmn-js to render shapes, connections etc.

We use an XML based export in bpmn-js, since BPMN standard itself is based on XML too. However why don’t you give JSON a chance? diagram-js does not have an export functionality by default, however you can easily create your own JSON based export/import logic.

11

no trouble for the export in json, I should be OK to implement it.

for the custom properties, I’ll check if I’m able to recreate it based on bpmn example. I’m not good in javascript and UI, could be hard… I’ll give it a try.

12

I made lot of progess this weekend.

I’m not able to create custom items and properties (took the examples you gave me).

I created a repo : https://github.com/survivant/bpmn-demo

right now when I create the Letter A, it can connect to LetterD. It works, but the line is fushia without arrow. I need to fix that, I don’t know if I want a line with stroke, and double direction… but I need to know how to customize it.

and the next step will be to create a “group” like a panel where the LetterA,B,c… must be Suppose the case, the Letters must be in a LetterPanel, and numbers could be in theNumberPanel (yes the numbers are not in the palette yet… it’s just for a example)

which examples should I check to customize the line between items and for the groups ?