when we select service task on that menu according to menu color will be change please see this and guide me how can i do that
Preformatted text
Please share a running / prototypical example that clearly shows what you’re trying to achieve, what is working and what is not.
Use our existing starter projects to quickly hack it or share your existing, partial solution on GitHub. Provide the necessary pointers that allow us to quickly understand where you got stuck.
This way we may be able to help you in a constructive manner.
Thanks 
Hey barmac i need this fuunctionality on menu select task assign color that we predefined
If I understand it correctly, you want to change color of the elements depending on their type. Is that correct?
yes correct and color we already assign in menu item
type or paste code herevar TASK = [
//Code copied from offline editor by Mansi starts here
{
label: 'Worker Bot',
actionName: 'replace-with-service-task-workerbot',
className: 'bpmn-icon-service',
target: {
type: 'bpmn:CallActivity',
color:[{fill:"#00FF00", stroke:"#000000"}], //lime
customAtttr : [
{name : 'technologyCategory', value : 'workerbot', description : 'Technology Category (RPA/Scripting/Web Service etc.)'},
{name : 'technology', value : 'hybrid', description : 'Product Name'}//,
//{name : 'botCategory', value : "", description : 'Category of the Bot (File, System, EMail, Saleforce etc.)'}
]
}
},{
label: 'AssistEdge Bot',
actionName: 'replace-with-service-task-ae-rpa',
className: 'bpmn-icon-service',
target: {
type: 'bpmn:CallActivity',
color:[{fill:"#FFE0B2", stroke:"#000000"}], //orange
customAtttr : [
{name : 'technologyCategory', value : 'RPA', description : 'Technology Category (RPA/Scripting/Web Service etc.)'},
{name : 'technology', value : 'AssistEdge', description : 'Product Name'}//,
//{name : 'botCategory', value : "", description : 'Category of the Bot (File, System, EMail, Saleforce etc.)'}
]
}
},{
label: 'UIPath Bot',
actionName: 'replace-with-service-task-ui-rpa',
className: 'bpmn-icon-service',
target: {
type: 'bpmn:CallActivity',
color:[{fill:"#FFC0CB", stroke:"#000000"}], //pink
customAtttr : [
{name : 'technologyCategory', value : 'RPA', description : 'Technology Category (RPA/Scripting/Web Service etc.)'},
{name : 'technology', value : 'UiPath', description : 'Product Name'}//,
//{name : 'botCategory', value : "", description : 'Category of the Bot (File, System, EMail, Saleforce etc.)'}
]
}
},{
label: 'Automation Anywhere Bot',
actionName: 'replace-with-service-task-aa-rpa',
className: 'bpmn-icon-service',
target: {
type: 'bpmn:CallActivity',
color:[{fill:"#87CEFA", stroke:"#000000"}], //light blue
customAtttr : [
{name : 'technologyCategory', value : 'RPA', description : 'Technology Category (RPA/Scripting/Web Service etc.)'},
{name : 'technology', value : 'AutomationAnywhere', description : 'Product Name'}//,
//{name : 'botCategory', value : "", description : 'Category of the Bot (File, System, EMail, Saleforce etc.)'}
]
}
},{
label: 'BluePrism Bot',
actionName: 'replace-with-service-task-bp-rpa',
className: 'bpmn-icon-service',
target: {
type: 'bpmn:CallActivity',
color:[{fill:"#00FFFF", stroke:"#000000"}], //aqua
customAtttr : [
{name : 'technologyCategory', value : 'RPA', description : 'Technology Category (RPA/Scripting/Web Service etc.)'},
{name : 'technology', value : 'BluePrism', description : 'Product Name'}//,
//{name : 'botCategory', value : "", description : 'Category of the Bot (File, System, EMail, Saleforce etc.)'}
]
}
},{
label: 'Java Bot',
actionName: 'replace-with-service-task-java',
className: 'bpmn-icon-service',
target: {
type: 'bpmn:ServiceTask',
color:[{fill:"#00FF00", stroke:"#000000"}], //lime
customAtttr : [
{name : 'technologyCategory', value : 'Scripting', description : 'Technology Category (RPA/Scripting/Web Service etc.)'},
{name : 'technology', value : 'Java', description : 'Product Name'}//,
//{name : 'botCategory', value : "", description : 'Category of the Bot (File, System, EMail, Saleforce etc.)'}
]
}
},{
label: 'Python Bot',
actionName: 'replace-with-service-task-python',
className: 'bpmn-icon-service',
target: {
type: 'bpmn:ServiceTask',
color:[{fill:"#FFFF00", stroke:"#000000"}], //yellow
customAtttr : [
{name : 'technologyCategory', value : 'Scripting', description : 'Technology Category (RPA/Scripting/Web Service etc.)'},
{name : 'technology', value : 'Python', description : 'Product Name'}//,
//{name : 'botCategory', value : "", description : 'Category of the Bot (File, System, EMail, Saleforce etc.)'}
]
}
},{
label: 'DotNet Bot',
actionName: 'replace-with-service-task-dotnet',
className: 'bpmn-icon-service',
target: {
type: 'bpmn:ServiceTask',
color:[{fill:"#C59FE1", stroke:"#000000"}], //voilet
customAtttr : [
{name : 'technologyCategory', value : 'Scripting', description : 'Technology Category (RPA/Scripting/Web Service etc.)'},
{name : 'technology', value : 'DotNet', description : 'Product Name'}//,
//{name : 'botCategory', value : "", description : 'Category of the Bot (File, System, EMail, Saleforce etc.)'}
]
}
},{
label: 'PowerShell Bot',
actionName: 'replace-with-service-task-powershell',
className: 'bpmn-icon-service',
target: {
type: 'bpmn:ServiceTask',
color:[{fill:"#FFDAB9", stroke:"#000000"}], //peach
customAtttr : [
{name : 'technologyCategory', value : 'Scripting', description : 'Technology Category (RPA/Scripting/Web Service etc.)'},
{name : 'technology', value : 'PowerShell', description : 'Product Name'}//,
//{name : 'botCategory', value : "", description : 'Category of the Bot (File, System, EMail, Saleforce etc.)'}
]
}
},{
label: 'Shell Bot',
actionName: 'replace-with-service-task-shell',
className: 'bpmn-icon-service',
target: {
type: 'bpmn:ServiceTask',
color:[{fill:"#add8e6", stroke:"#000000"}], //peach
customAtttr : [
{name : 'technologyCategory', value : 'Scripting', description : 'Technology Category (RPA/Scripting/Web Service etc.)'},
{name : 'technology', value : 'Shell', description : 'Product Name'}//,
//{name : 'botCategory', value : "", description : 'Category of the Bot (File, System, EMail, Saleforce etc.)'}
]
}
},{
label: 'Ansible Bot',
actionName: 'replace-with-service-task-ansible',
className: 'bpmn-icon-service',
target: {
type: 'bpmn:ServiceTask',
color:[{fill:"#add8e6", stroke:"#000000"}], //peach
customAtttr : [
{name : 'technologyCategory', value : 'Scripting', description : 'Technology Category (RPA/Scripting/Web Service etc.)'},
{name : 'technology', value : 'Ansible', description : 'Product Name'}//,
//{name : 'botCategory', value : "", description : 'Category of the Bot (File, System, EMail, Saleforce etc.)'}
]
}
},{
label: 'ML-AI Bot',
actionName: 'replace-with-service-task-mlai',
className: 'bpmn-icon-service',
target: {
type: 'bpmn:ServiceTask',
color:[{fill:"#FFC0CB", stroke:"#000000"}], //pink
customAtttr : [
{name : 'technologyCategory', value : 'Scripting', description : 'Technology Category (RPA/Scripting/Web Service etc.)'},
{name : 'technology', value : 'ML-AI', description : 'Product Name'}//,
//{name : 'botCategory', value : "", description : 'Category of the Bot (File, System, EMail, Saleforce etc.)'}
]
}
},{
label: 'Icap Bot',
actionName: 'replace-with-service-task-icap',
className: 'bpmn-icon-service',
target: {
type: 'bpmn:ServiceTask',
color:[{fill:"#add8e6", stroke:"#000000"}], //peach
customAtttr : [
{name : 'technologyCategory', value : 'Scripting', description : 'Technology Category (RPA/Scripting/Web Service etc.)'},
{name : 'technology', value : 'Icap', description : 'Product Name'}//,
//{name : 'botCategory', value : "", description : 'Category of the Bot (File, System, EMail, Saleforce etc.)'}
]
}
},
//Code copied from offline editor by Mansi ends here
//Changes for unit test of bot by Akhil starts here
{
label: 'Validate Bot',
actionName: 'replace-with-service-task-unittest',
className: 'bpmn-icon-service',
target: {
type: 'bpmn:customTask',
customAtttr : [
{name : 'UnitTest', value : 'apicall', description : 'Callapi'}
]
}
},
//Changes for configure bot starts here
{
label: 'Configure Bot',
actionName: 'replace-with-service-task-configureBot',
className: 'bpmn-icon-service',
target: {
type: 'bpmn:configureBot',
customAtttr : [
{name : 'ConfigureBot', value : 'apicall', description : 'Callapi'}
]
}
}
//changes for configure bot ends here
,{
label: 'Service Task',
actionName: 'replace-with-service-task',
className: 'bpmn-icon-service',
target: {
type: 'bpmn:ServiceTask'
}
},
{
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'
}
},
}];
see in this is custom menu and its working only color and properties or not working
yes you are right and that element type i already assign color but not applying
Please share a CodeSandbox or a GitHub link with your partial solution as I already asked above (On select task menu color will be change). Also, pasting a part of source code is not helpful at the moment as I don’t know what properties you assign.
You can also look into this project. Sorry, this is outdated. Colors are already there.
Yes i will share githublink with you
@barmac sorry i can’t share github or codesandbox functionality is that when i select menu what ever color is assigned to that menu like test1 assign red color so that color shoule be applie in that task
and also properties panel work accordingly see below is my custom menu this menu is applied but color and customattr that for properties are not working in bpmn latest version
[
{
label: ‘Worker Bot’,
actionName: ‘replace-with-service-task-workerbot’,
className: ‘bpmn-icon-service’,
target: {
type: ‘bpmn:CallActivity’,
color:[{fill:"#00FF00", stroke:"#000000"}], //lime
customAtttr : [
{name : ‘technologyCategory’, value : ‘workerbot’, description : ‘Technology Category (RPA/Scripting/Web Service etc.)’},
{name : ‘technology’, value : ‘hybrid’, description : ‘Product Name’}//,
//{name : ‘botCategory’, value : “”, description : ‘Category of the Bot (File, System, EMail, Saleforce etc.)’}
]
}
},{
label: ‘AssistEdge Bot’,
actionName: ‘replace-with-service-task-ae-rpa’,
className: ‘bpmn-icon-service’,
target: {
type: ‘bpmn:CallActivity’,
color:[{fill:"#FFE0B2", stroke:"#000000"}], //orangePreformatted text
customAtttr : [
{name : ‘technologyCategory’, value : ‘RPA’, description : ‘Technology Category (RPA/Scripting/Web Service etc.)’},
{name : ‘technology’, value : ‘AssistEdge’, description : ‘Product Name’}
]
}}
you can see in image this type of functionality i want
can you plese help me
type or paste code here
I am sorry, but at I am not able to help you if you don’t cooperate. I cannot guess what solution you tried to implement from the unformatted pieces of code you posted.
app.component.html```
<div class="modeler">
<div id="canvas" #canvas>
<button type="button" id="collapsedPanel" (click)="collapsePanel()">Properties Panel</button>
</div>
<div class="properties-panel" id="properties"></div>
</div>
<button id="download-svg" (click)="save()">svg image</button>
<button id="download-svg" (click)="saveBPMN()"> BPMN diagram</button>
app.comonent.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';
import ReplaceMenuProvider from './popup-menu';
@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,
// customControlsModule,
ReplaceMenuProvider
],
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');
}
})
}
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');
}
})
}
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<string> {
const url = '/assets/bpmn/initial.bpmn'; // local
return this.http.get(url, {responseType: 'text'});
}
}
@barmac
can you please help me nowThank you! The only missing part is the ReplaceMenuProvider mentioned in import ReplaceMenuProvider from './popup-menu';. I suspect that this is the place where you implemented your custom replace logic, correct?
yes correct i will try to debugs and resolve