Angular 5 CLI-based BPMN project now on Github


#1

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.


#2

Hi @narve,

thanks for your heads up! Looks like an interesting project. We will check it out.


#3

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?


#4

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.


#5

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.


#6

Hi Narve,

Instead of keeping BPMN as properties panel provider, is it possible to keep Camunda as provider in the Angular implementation ?

Regards,
Ankur


#7

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.


#8

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.


#9

Can u elaborate on this further. preferably with an example… ?


#10

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 :slight_smile:

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 ()

image


#11

“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.


#12

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.

:frowning:

Thanks for helping :slight_smile:


#13

@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!


#14

Hi nikku,

I will do it :slight_smile:

Thanks


#15

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?


#17

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.


#19

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.


#21

You’ll need to do the following:

  • Carefully read my previous comment
  • Find and isolate the issue in the angular-bpmn project that @narve kindly shared with us
  • Fix the issue by adding the required meta-data in a minification safe way
  • File a pull-request against that project to contribute your changes back so everyone can benefit

This is the open-source way of getting things done!