BPMN diagram how to add custom change type after append task selection and according to properties panel also change

Developers
1

image

right now its working in angular 8 now i want to change like below screen
so when we append task in that change type setting some custom option will be added as well as properties panel.
i have code
image

html code

Properties Panel
svg image BPMN diagram

ts file code

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

import {HttpClient} from ‘@angular/common/http’;

import {Observable} from ‘rxjs’;

import Modeler from “bpmn-js/lib/Modeler”;

import propertiesPanelModule from “bpmn-js-properties-panel”;

import propertiesProviderModule from “bpmn-js-properties-panel/lib/provider/camunda”;

import “bpmn-js/dist/assets/diagram-js.css”;

import “bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css”;

import “bpmn-js-properties-panel/dist/assets/bpmn-js-properties-panel.css”;

import * as camundaModdleDescriptor from ‘camunda-bpmn-moddle/resources/camunda.json’;

import * as FileSaver from ‘file-saver’;

import $ from ‘jquery’;

@Component({

selector: ‘app-root’,

templateUrl: ‘./app.component.html’,

styleUrls: [’./app.component.css’]

})

export class AppComponent implements OnInit {

title = ‘Workflow Modeler’;

modeler: Modeler;

collapse1 = true;

@ViewChild(‘canvas’)

private canvesRef: ElementRef;

downloadLink = $(’#js-download-diagram’);

downloadSvgLink = $(’#js-download-svg’);

constructor(private http: HttpClient) {

$(’#collapsedPanel’).css(‘right’, ‘-40px’);

}

ngOnInit(): void {

this.modeler = new Modeler({

  container: '#canvas',

  width: '100%',

  height: '600px',

  propertiesPanel: {

    parent: '#properties'

  },

  additionalModules: [

    propertiesPanelModule,

    propertiesProviderModule

  ],

  moddleExtensions: {

    camunda: camundaModdleDescriptor

  }

});

this.load();

// this.saveSVG((err, svg)=> {

//   this.setEncoded(this.downloadSvgLink, 'diagram.svg', err ? null : svg);

// });

$(document).ready(function(){

  console.log('helllo  bot')

});

}

save(): void {

this.modeler.saveSVG((err,result)=>{

  if(err){

    console.log(err,'got gerro')

  }

  else{

    const blob = new Blob([result], {type: 'text/plain;charset=utf-8'});

    FileSaver.saveAs(blob, 'bpmnSample.svg');

  }

})



// 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);

// }

// })

}

saveBPMN():void{

this.modeler.saveSVG((err,result)=>{

  if(err){

    console.log(err,'got gerro')

  }

  else{

    const blob = new Blob([result], {type: 'text/plain;charset=utf-8'});

    FileSaver.saveAs(blob, 'bpmnSample.bpmn');

  }

})

}

setEncoded(link, name, data) {

var encodedData = encodeURIComponent(data);

if (data) {

  link.addClass('active').attr({

    'href': 'data:application/bpmn20-xml;charset=UTF-8,' + encodedData,

    'download': name

  });

} else {

  link.removeClass('active');

}

}

// saveSVG(done) {

// this.modeler.saveSVG(done);

// }

saveSVG(err, svg) {

this.modeler.saveSVG((err: any, svg: any) => {

  const blob = new Blob([svg], {type: 'text/plain;charset=utf-8'});

  FileSaver.saveAs(blob, 'bpmnSample.bpmn');

});

};

collapsePanel() {

if (this.collapse1) {

$("#properties").css({"display": "none",});

$("#collapsedPanel").css({ "right": "-43px"});



  this.collapse1 = false;

} else {

$("#properties").css('display','block');

$("#collapsedPanel").css('right','216px')

  this.collapse1 = true;

}

}

load(): void {

this.getExample().subscribe(data => {

  this.modeler.importXML(data, value => this.handleError(value));

});

}

handleError(err: any) {

if (err) {

  console.warn('Ups, error: ', err);

}

}

public getExample(): Observable {

const url = '/assets/bpmn/initial.bpmn'; // local

return this.http.get(url, {responseType: 'text'});

}

}

2

First, please make sure to format your code. It’s very hard to read.

Your questions seem to be related to creating custom elements. We have several examples for that. Feel free to have a look and get back to us if you don’t understand something specific.

3

yes niklas_kiefer but in angular 8 how can i do that

4

bpmn-js is a JS library which can be integrated into any kind of javascript application, no matter which framework you’re using.

If you have specific questions or problems while integrating into your own Angular application, feel free to use the search function of this forum or share a CodeSandbox with your setup.

5