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.
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?
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.
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.
@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.
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.
Is there any chance where i can provide palette entries to my customPalette dynamically ?
