Help required to do Angular 6 integration for web based camunda modeler

BPMN & Modeling Discussion & Questions
1

We are facing issue to show left side property panel issue only script task we are getting extra property can some one help me to enable service task and user task property panel.

UI not getting proper.

2

What do you refer to when you mean

web based camunda modeler

?

3

i am using Angular and referring ==> https://github.com/bpmn-io/bpmn-js-examples

4

Please be more specific about what example you’re using, what changes you made and what you’re trying to achieve. Feel free to share code. Otherwise it’s impossible to help you.

5

HTML

<div class=“content-wrapper workflow”>

<div class=“mdl-grid”>

<div class=“mdl-cell mdl-cell–12-col panel–raised card-top bg-white big-cell”>

<button (click)=“load()” class=“btn btn–primary”>Load</button>

<button (click)=“save()” class=“btn btn–primary”>Save</button>

<!-- <button (click)=“download()” class=“btn btn–primary”>Download</button> -->

<!-- <button id=“addWorkflowButton” matTooltip=“Add Process Definition” class=“btn btn–primary”>Add</button> -->

<div class=“modeler”>

<div id=“canvas”></div>

<div id=“properties”></div>

</div>

</div>

</div>

</div>

TS code

import { Component, OnInit } from ‘@angular/core’;

import {HttpClient} from ‘@angular/common/http’;
import Modeler from ‘bpmn-js/lib/Modeler’;

import propertiesPanelModule from ‘bpmn-js-properties-panel’;
import propertiesProviderModule from ‘bpmn-js-properties-panel/lib/provider/camunda’;

@Component({
selector: ‘app-root’,
templateUrl: ‘./app.component.html’,
styleUrls: [’./app.component.css’]
})
export class AppComponent implements OnInit{
modeler;
constructor(private http: HttpClient) {
}

ngOnInit(): void {
this.modeler = new Modeler({
container: ‘#canvas’,
width: ‘100%’,
height: ‘600px’,
additionalModules: [
propertiesPanelModule,
propertiesProviderModule
],
propertiesPanel: {
parent: ‘#properties’
}
});
}

load(): void {
const url = ‘/assets/bpmn/initial.bpmn’;
this.http.get(url, {
headers: {observe: ‘response’}, responseType: ‘text’
}).subscribe(
(x: any) => {
this.modeler.importXML(x);
},
);
}

save(): void {
this.modeler.saveXML((err: any, xml: any) => {
if(err){
console.log(‘Error Accurred while saving XML’, err);
}else{
console.log('Result of saving XML: ',xml);
}
})
}
}

6

i need complete web based camunda modeller in angular

7

hi,

here is my humble try (slightly reworked another project from github)

2 Likes
8

What do you mean by complete? What should it include?

There’s an example for integrating bpmn-js with Angular: https://github.com/bpmn-io/bpmn-js-example-angular