BPMN service task in Angular 8

anybody please help me i am trying bpmn diagram in angular 8 demo is ready but how can we do customization in bpmn angular 8
I need to add some custom service task so according to select service properties panel will be change

please help me out

Thanks In advance

Did you try out our custom elements example?

I need custom element in angular 8 so the way i am finding that how can we do custom element in angular 8

Cf. to the answer I gave in another thread recently.

i am using angular 8 and in this i need when i click on append task so menu will be added so how can i do that
app.comonent.html

Properties Panel
</div
svg image BPMN diagram app.component.ts

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'});

}

}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’});
}
}

Sharing hundreds of lines of code (that isn’t even formatted) doesn’t make it any easier to help you. Forget about Angular for a moment. From bpmn-js’s perspective, what do you want to achieve? Can you describe that in simple terms?

i want to achieve how to add custom task like below screen short you can see menu is open like send task so in that i need to add my own menu so when i clicked properties panel will work accrodingly

![image|1366x768](upload://17I8Wn8ef4evGRdV9eor0WdIeYs.png) 

image


I am following this i want to add in this custom element but when we select service task then only in menu some menu should be added

So it seems you need to create a custom replace menu provider, am I right?

This example should help you then. It doesn’t matter you use Angular, it works exactly the same in any JS application.

Your example is right but i am not able to explain you what exactly i want when click on service task there is menu please see below attach image you will get itservicemenu

so in this menu option are Send Task Recieve task User task are there right so in that i want to add some more my custom menu so that how can create it
the refferance you gave me https://github.com/bpmn-io/bpmn-js-example-custom-controls this one for create service task not for menu

servicechangetypemenu
you can see in image this type of menu i want to customize can you please guide me how can i acheive this its humable request to you

That’s the replace menu, which can be overridden the same way, as I already said.

Unfortunately, there is no dedicated example of this, but this extension is doing exactly this: https://github.com/bpmn-io/bpmn-js-disable-collapsed-subprocess

THanks Niklas_Kiefer```
I have one more issue i am trying to apply color on task menu type

label: ‘Script Task’,
actionName: ‘replace-with-script-task’,
className: ‘bpmn-icon-script’,
target: {
type: ‘bpmn:ScriptTask’
}
}, {
label: ‘Call Activity’,
actionName: ‘replace-with-call-activity’,
className: ‘bpmn-icon-call-activity’,
target: {
type: ‘bpmn:CallActivity’
}
},
//Changes for unit test of bot by Akhil ends here
{
label: ‘Task’,
actionName: ‘replace-with-task’,
className: ‘bpmn-icon-task’,
target: {
type: ‘bpmn:Task’
}
}, {
label: ‘Send Task’,
actionName: ‘replace-with-send-task’,
className: ‘bpmn-icon-send’,
target: {
type: ‘bpmn:SendTask’
}
}, {
label: ‘Receive Task’,
actionName: ‘replace-with-receive-task’,
className: ‘bpmn-icon-receive’,
target: {
type: ‘bpmn:ReceiveTask’
}
}, {
label: ‘User Task’,
actionName: ‘replace-with-user-task’,
className: ‘bpmn-icon-user’,
target: {
type: ‘bpmn:UserTask’
}
}, {
label: ‘Manual Task’,
actionName: ‘replace-with-manual-task’,
className: ‘bpmn-icon-manual’,
target: {
type: ‘bpmn:ManualTask’
}
}, {
label: ‘Business Rule Task’,
actionName: ‘replace-with-rule-task’,
className: ‘bpmn-icon-business-rule’,
target: {
type: ‘bpmn:BusinessRuleTask’
}
}, {
label: ‘Sub Process (collapsed)’,
actionName: ‘replace-with-collapsed-subprocess’,
className: ‘bpmn-icon-subprocess-collapsed’,
target: {
type: ‘bpmn:SubProcess’,
isExpanded: false
}
}, {
label: ‘Sub Process (expanded)’,
actionName: ‘replace-with-expanded-subprocess’,
className: ‘bpmn-icon-subprocess-expanded’,
target: {
type: ‘bpmn:SubProcess’,
isExpanded: true
}
}];```
image
so stroke color is applied but not feel