Hi all,
in the near future I am going to migrate my Angular2/BPMN project to Angular 5. I’ve started on a sample project to make the Angular/BPMN integration as smooth as possible.
So far it looks pretty good; I got custom properties and custom palette working with (almost) no sweat.
If you are interested, have a look at https://github.com/narve/angular-bpmn
Feedback is welcome, here or on Github. Especially from the BPMN-JS developers, if things can be done in other and better ways.
Hi @narve,
thanks for your heads up! Looks like an interesting project. We will check it out.
Hi @narve
I too have started using bpmnjs on an angular 5 project… i’ve had some success in getting bpmn moddler running and integrating with the property panel.
Have you had any luck trying to get the property panel element populate with data from a service… The trouble i’m having is that the service is providing data via an async method we cannot load data from the an async method to a select box… See this article
The way i see it happening is creating my own element and adding it to the property panel… (i don’t know is its possible but my inspiration is the FormProps.js in bpmn-js-properties-panel\lib\factory\SelectEntryFactory.js)
Have you found any other ways in solving this problem?
I was also having trouble populating the elements using Rest Service.
I found a workaround that. I had a service component where I instantiated an httpClient reference globally and was storing the results of service within the component using Promise.
Regarding fetching data via REST and populating the properties panel etc:
Yes, it is tricky because the BPMN.IO API is (as far as I know) synchronous, but sometimes you need to fetch data asynchronosly, e.g. through REST service.
I my project I solved this by fetching needed data first, and then (when I have all the data I need) I instantiate the required BMPN.IO modules and paint the canvas with properties panel. This works for me, but of course it might not work for all use cases.
Hi Narve,
Instead of keeping BPMN as properties panel provider, is it possible to keep Camunda as provider in the Angular implementation ?
Regards,
Ankur
Probably. Note that my project uses a custom properties panel provider, but it re-uses the default BPMN properties provider. It should be possible to reuse the camunda properties provider - try npm installing it and the importing it.
I changed the implementation to use Camunda BPMN moddle using the following code:
Modeller code :
additionalModules: [
PropertiesPanelModule,
{[InjectionNames.camundaPropertiesProvider]: [‘type’, OriginalPropertiesProvider.propertiesProvider[1]]},
{[InjectionNames.propertiesProvider]: [‘type’, CustomPropsProvider]},
{[InjectionNames.elementTemplates]: [‘type’, ElementTemplates]},
{[InjectionNames.originalPaletteProvider]: [‘type’, OriginalPaletteProvider]},
{[InjectionNames.paletteProvider]: [‘type’, CustomPaletteProvider]},
],
propertiesPanel: {
parent: ‘#properties’
},
moddleExtensions: {
camunda: _CamundaModdle,
Imports :
import * as _CamundaPropertiesProvider from ‘bpmn-js-properties-panel/lib/provider/camunda’;
import * as _ElementTemplates from ‘bpmn-js-properties-panel/lib/provider/camunda/element-templates/ElementTemplates’;
import * as _CamundaModdle from ‘camunda-bpmn-moddle/resources/camunda.json’;
InjectionNames = {
//…
camundaExtensionModule: ‘camundaExtensionModule’,
camundaPropertiesProvider: ‘camundaPropertiesProvider’,
elementTemplates: ‘elementTemplates’
};
//…
export const CamundaExtensionModule = _CamundaExtensionModule;
export const CamundaPropertiesProvider = _CamundaPropertiesProvider;
export const ElementTemplates = _ElementTemplates;
typings.d.ts :
declare module “*.json” {
const value: any;
export default value;
}
CustomPropsProvider.ts :
constructor(private translate, private camundaPropertiesProvider) {…
and in getTabs Method
return this.camundaPropertiesProvider.getTabs(element)…
=================================================================================
Thank you Narve.
Can u elaborate on this further. preferably with an example… ?
Hi Narve,
When running the application using NPM run build and deploying to server, I am getting the following error.
Did you run into this issue ?
Thanks for helping 
Input from others also appreciated.
main.13e0cabd623b8f7dac2e.bundle.js:1 Error: No provider for “e”! (Resolving: paletteProvider -> e)
at y (main.13e0cabd623b8f7dac2e.bundle.js:1)
at Object.get (main.13e0cabd623b8f7dac2e.bundle.js:1)
at e (main.13e0cabd623b8f7dac2e.bundle.js:1)
at main.13e0cabd623b8f7dac2e.bundle.js:1
at Array.map ()
at b (main.13e0cabd623b8f7dac2e.bundle.js:1)
at Array.x (main.13e0cabd623b8f7dac2e.bundle.js:1)
at e [as get] (main.13e0cabd623b8f7dac2e.bundle.js:1)
at main.13e0cabd623b8f7dac2e.bundle.js:1
at Array.forEach ()
(anonymous) @ main.13e0cabd623b8f7dac2e.bundle.js:1
main.13e0cabd623b8f7dac2e.bundle.js:1 ERROR Error: No provider for “e”! (Resolving: paletteProvider -> e)
at y (main.13e0cabd623b8f7dac2e.bundle.js:1)
at Object.get (main.13e0cabd623b8f7dac2e.bundle.js:1)
at e (main.13e0cabd623b8f7dac2e.bundle.js:1)
at main.13e0cabd623b8f7dac2e.bundle.js:1
at Array.map ()
at b (main.13e0cabd623b8f7dac2e.bundle.js:1)
at Array.x (main.13e0cabd623b8f7dac2e.bundle.js:1)
at e [as get] (main.13e0cabd623b8f7dac2e.bundle.js:1)
at main.13e0cabd623b8f7dac2e.bundle.js:1
at Array.forEach ()
“paletteProvider -> e” sounds like a typical javascript uglification/minification problem.
You have a class named something, and try to inject it, and this works fine when running ‘serve’, which does not minify. When you run build, the minification strips the classname and injection fails.
One solution is to drop minification during build, another is to fix injection so that classnames aren’t required.
Does this happen in the base project as it is on Github, or did this problem come after you did some modifications? If I find some time, I will look into it.
Hi Narve,
I tried with the base build as well. The screenshot above is from the base build.
Happens on that also
I have to remove -prod from ng build to make it work currently.
Thanks for helping 
@ANKUR_PESHIN as Narve indicated the error message is clear: The PaletteProvider does not properly declare its dependencies in a minification save way, i.e. via:
function PaletteProvider(dependency1, dependency2) {
...
}
PaletteProvider.$inject = [ 'dependency1', 'dependency2' ];
Maybe you can help him to fix this issue by tracking down the bug and filling a pull request against his repository?
That is the OSS way of doing it!
Hi nikku,
I will do it
Thanks
i saw save button extra Pallate object on Modular ,how should we allow that object for drag/drop from Pallate,I also want to customize drop for custome object like it should only dropped on certain area of Convas,how should i achieve this?
I assume that this is because of a mixture of ES modules and the old CommonJS modules. The properties panel module doesn’t seem to be an ES module. So in the code I’m importing these modules using:
export const _EntryFactory = require('bpmn-js-properties-panel/lib/factory/EntryFactory');
instead of
import _EntryFactory from 'bpmn-js-properties-panel/lib/factory/EntryFactory';
I got it running using these changes. I’ll try to upload my sample this evening.
Nope, this is due to the fact that information how to bind components together is missing from one of the provided components. Please read the full thread for more information, relevant contents start here.
You’ll need to do the following:
This is the open-source way of getting things done!
Hi All,
I’m Using the same project that was developed by narve, and currently i have an issue, i’m creating a custom properties window not the one on the right side, where i have to bind the name with the particular bpmn element i clicked, the property window i’m using here is a modal, please help me out,i’m a noob in bpmn.io.
I’m also trying to get the Camunda properties panel working, but I’ve had no luck so far. It displays fine at least, but doesn’t seem to be functional. For example, when I try to add a form field, I get an error:
core.js:15723 ERROR Error: unknown type <camunda:FormData>
Looking at this error, it seems like I’d missing the moddle extension, but as far as I can tell, I did include them. Here’s what I did, basically the same as above:
import * as _BpmnPropertiesProvider from 'bpmn-js-properties-panel/lib/provider/bpmn';
import * as _CamundaExtensionModule from 'camunda-bpmn-moddle/lib';
import * as _CamundaModdle from 'camunda-bpmn-moddle/resources/camunda.json';
import * as _CamundaPropertiesProvider from 'bpmn-js-properties-panel/lib/provider/camunda';
import * as _ElementTemplates from 'bpmn-js-properties-panel/lib/provider/camunda/element-templates/ElementTemplates';
import * as _EntryFactory from 'bpmn-js-properties-panel/lib/factory/EntryFactory';
import * as _Modeler from 'bpmn-js/dist/bpmn-modeler.production.min.js';
// import _Modeler from 'bpmn-js/lib/Modeler.js';
import * as _PropertiesPanelModule from 'bpmn-js-properties-panel';
import _PaletteProvider from 'bpmn-js/lib/features/palette/PaletteProvider';
export const InjectionNames = {
eventBus: 'eventBus',
bpmnFactory: 'bpmnFactory',
elementRegistry: 'elementRegistry',
translate: 'translate',
propertiesProvider: 'propertiesProvider',
bpmnPropertiesProvider: 'bpmnPropertiesProvider',
paletteProvider: 'paletteProvider',
originalPaletteProvider: 'originalPaletteProvider',
elementTemplates: 'elementTemplates',
camundaPropertiesProvider: 'camundaPropertiesProvider',
camundaExtensionModule: 'camundaExtensionModule',
};
export const Modeler = _Modeler;
export const PropertiesPanelModule = _PropertiesPanelModule;
export const EntryFactory = _EntryFactory;
export const OriginalPaletteProvider = _PaletteProvider;
export const OriginalPropertiesProvider = _BpmnPropertiesProvider;
export const CamundaExtensionModule = _CamundaExtensionModule;
export const CamundaPropertiesProvider = _CamundaPropertiesProvider;
export const ElementTemplates = _ElementTemplates;
export const CamundaModdle = _CamundaModdle.default;
this.modeler = new Modeler({
container: '#canvas',
width: '100%',
height: '100vh',
additionalModules: [
PropertiesPanelModule,
// Re-use original bpmn-properties-module, see CustomPropsProvider
{ [InjectionNames.camundaPropertiesProvider]: ['type', CamundaPropertiesProvider.propertiesProvider[1]] },
{ [InjectionNames.propertiesProvider]: ['type', CustomPropsProvider] },
{ [InjectionNames.elementTemplates]: ['type', ElementTemplates] },
{ [InjectionNames.camundaExtensionModule]: ['type', CamundaExtensionModule] },
// Re-use original palette, see CustomPaletteProvider
{ [InjectionNames.originalPaletteProvider]: ['type', OriginalPaletteProvider] },
{ [InjectionNames.paletteProvider]: ['type', CustomPaletteProvider] },
translateGermanModule
],
propertiesPanel: {
parent: '#properties'
},
moddleExtension: {
// custom: customModdle,
camunda: CamundaModdle
}
});
Any idea what I could be missing? Any help is greatly appreciated. Thanks in advance.