Customize palette (toolbox)

Hi,

I want to simplify the BPMN toolbar with minimal tools - Start, Stop, User Task, Decision gateway only. I want to remove other tools as clients are getting confused. They told they are not going to need it… Is there any way I can remove those?

Thanks in advance.

Hi @prabhushan, welcome to the forum!

This example should help you.

Thank you @Niklas_Kiefer. I am quite new to this Nodejs development.

Assume I have done the changes as mentioned in the example, how can i import these change to my angular application?

This doesn’t depend on the JS framework you use. Adding these custom components works in the same way in any, no matter Angular, React, …

import BpmnModeler from 'bpmn-js/lib/Modeler';

import customControlsModule from './custom';

const bpmnModeler = new BpmnModeler({
  additionalModules: [
    customControlsModule
  ]
});

You can have a look at this angular example for guidance (I linked the place where the BpmnJS instance is created inside the Angular example application. This would be the place to include the custom modules).

Thanks @Niklas_Kiefer.

So I build in my local machine, and then export it for using it in angular / react… etc right?

That’s correct. You can build the extension locally in your angular application and then use it directly.

@Niklas_Kiefer can you please check whether my approach is right?

  1. in BPMN-JS project - I run
    npm install
    npm run distro
    This is the output I got

bpmn-js@5.0.6 distro . /BPMN/bpmn-js
node tasks/build-distro.js

clean dist
mkdir -p dist
copy bpmn-font to dist/bpmn-font
copy diagram-js.css to dist
building pre-packaged distributions
done.

  1. I now go to my angular project and run the following
    npm install /…/BPMN/bpmn-js

Though it shows no errors, the output is not rendering properly

Please help

Would you mind to share your project / your setup? It’s hard to find the problem if we don’t know what’s going on.

@Niklas_Kiefer - Thank you. I think i figured out to extend the palette based on your suggestion. The above issue , I feel should be raised as a new concern.

By the way, I can add more custom controls as you have shown. But is it possible to remove default ones from the palette ?

Yes, that is possible, e.g. for the ContextPad module:

new BpmnModeler({
  additionalModules: [
    {
      contextPad: [ 'value', {} ]
    }
  ]
});

Make sure you’re including the stylesheet. Otherwise it wont render properly.

@Niklas_Kiefer - When i copy the above code… I get the following error

@philippfromme - I just included the npm install /…/BPMN/bpmn-js in my target angular project. So i belive the CSS should refer from dist folder of bpmn-js folder.

@Niklas_Kiefer - So I would like to add only Start , Stop , decision gateway and User task.

Sorry, I misunderstood your question than. To remove entries in the palette you will also have to override the default palette provider, as mentioned in the custom-controls-example before.

Also have a look at this thread.

Thank you @Niklas_Kiefer- You have been tremendously helpful :+1::+1:… Thanks again. Let me try this one.

It worked. Thank you. @Niklas_Kiefer