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… ?