Hi Narve,
Thank you for your quick help.
2)Save xml : i will go through your steps and check further.
Hi Narve,
I was trying to understand your implementation of Redux-like pattern, i think it needs time for me to understand. any simple way of printing the xml in console using observable or promise atleast that will be helpful.i can take of calling to my db after i get the xml file. It would be a great help to me.
Regarding the palette: I demonstrated one way of doing it, probably not the best. I simulate a server-call taking one second to load some custom palette-entries.
My solution (which is acceptable to me) is to just delay creating the pallete until I have the information I need. I do this by flatMapāping two Observableās together, and then create the Modeler component in the subscribe method.
Note that if you donāt really understand RXJS, then there is now way around it - go study! In order to use Angular2 it seems you have to master the Rxjs-beast.
(This was implemented in https://github.com/narve/ang2-bpmnjs/commit/ded32c834d46e2c35c5a1c58143a54a81cee64b8)
Thank you narve for your time. i will go through more on rxjs and your workaround.
Since I already were in the tutorial mode, I pushed another commit 
This time I inject a simple Rxjs Subject, which can receive commands, into the palette. The modeler component subscribes to this subject, filters out the commands it wants to listen to and handles them. So in this case, when you click SAVE, the xml is printed to the console.
The rest should be standard. But please be advised, learning Rxjs is still a prerequisite and it enables you to write very nice code
Thank you narve, you saved my day , atleast now i will be able to test it till backend and fetching the same for viewing it. Also as suggested i am going through all rxjs concepts.
Good luck! If you think of any improvements to the Github code, please feel free to post here og (preferrably) on the Github repo, as issue/pullrequest/whatever.
I am also rather new to Angular2/Typescript/Webpack/BPMN.IO, so there are probably lots of room for improvement.
Dear Narve,
There is a settings button shows when we drag any pallete(usertask,sendtask) inside the right panel. now on click of settings button there a pop up opens and which shows a list of some tasks(tasks, usertaskā¦to process, sub process). can you help me where those list are available. i have a requirement to remove those lists from the popup,open a big pop up on click of settings page, and create a form inside the pop up to submit form details and the complete xml to DB on click of save button of form inside the popup box.
Hi,
no, sorry, I havenāt had the need to modify that dialog so I donāt know how to do that. I believe I have seen some examples somewhere - perhaps the BPMN-people can comment on this?
If I do look into it I will post here and/or update the github project.
Hi,
I got a example in normal bpmn.io, inside the app.js they modify as like below , they have used angular1
if (element.type === 'bpmn:UserTask') {
assign(actions, {
'replace': {
group: 'edit',
className: 'bpmn-icon-screw-wrench',
id: 'popup',
title: translate('Change type'),
action: {
click: function(event, element) {
var text = LabelUtil.getLabel(element);
// alert(text);
var taskid = element.id;
if (text === '' || text === null) {
var text = element.type.replace(/^bpmn\:/, '');
}
// added to know the
activityType = text;
var isClient='';
if("MANUAL"!=activityType){
jQuery.ajax({
type : "GET",
url : 'geturl?activityType='+activityType,
dataType : 'text',
async : true,
success : function(responseData) {
isClient=responseData;
angular.element(document).find('.workArea').scope().showActivityPage(event, text, taskid, dataObj);
},
error : function(errorData) {
console.log(errorData)
}
});
here call to showActivityPage() is their call to popup page . this was customized in bpmn.io dist/app.js
But in our code i am not able to get the bpmn-icon-screw-wrench icon action event. which file we can corelate normal bpmn.io dist/app.js changes to angular2 which js. if so i can try in the same js. any idea on this.
Hi Narve,
I found the option where it is coming from . It is coming from ReplaceOptions.js(node_modules\bpmn-js\lib\features\replace\ReplaceOptions.js). based on each pallete options are available. However i wanted to know one thing is should we change directly in this file inside node_modules or we should use it somewhere in modoler.component.ts by exporting it. any suggestion for customizing by importing replaceoptions.js.
You should definitely not change anything inside node_modules! That road will only lead to confusion, sweat and tears sometime in the future. If you donāt see any other solution, fork the repo, make your changes and npm link it in instead of the original.
But most things in BPMN.io seem to be pluggable / injectable so I think there is a way to inject your own functionality.
Hi Narve,
The call to Settings dialog happens from the node_modules/bpmn-js/lib/features/ContextPadProvider.js, and below is the option to remove calling bpmn dialog box. Now i have removed replaceMenu.open and just added a console.log. however i wanted to know how to call modeler.component.ts method by adding a function call to modelercomponent .
if (replaceMenu && !replaceMenu.isEmpty()) {
// Replace menu entry
assign(actions, {
'replace': {
group: 'edit',
className: 'bpmn-icon-screw-wrench',
title: translate('Change type'),
action: {
click: function(event, element) {
console.log("hello replace entry is done");
alert("hello");
//Commenting below lines to replace the existing dialog box of BPMN.IO
// replaceMenu.open(assign(getReplaceMenuPosition(element), {
// cursor: { x: event.x, y: event.y }
// }), element);
}
}
}
});
}i mean to ask is : if i write a dialog box function in any our component.ts and how can i call that dialog box function from the action event action: {
click: function(event, element) { **** } } which is available inside node_modules/bpmn-js/lib/features/context-pad/ContextPadProvider.js. i tried it did not happen.
Hi Narve,
I am able to change the settings button popup , i took the same ContextPadProvider.js codes and created another context-pad.ts as like pallete.ts and exported to modeler.component.ts. it works now.
Regarding the build of this project we used here webpack. actually i have already a project dashboard which uses angular-cli and which internally uses webpack. I wanted to integrate the modeler into my dashboard which is building through angular cli. I tried copying BPMN-JS,BPMN-JS-PROPERTIES-PANEL, package.json(required changes) from this project and pasted on my project,but it does not work. Could you please suggest on this how i can proceed.
Haha, good luck with that 
I said that if you are working with Angular2+ you have to know Rxjs. It seems the same goes for webpack: If you are working with external libraries and Angular2+ you have to know webpack.
I did not get bpmn* to work when using the AngularCLI. In fact I donāt think I would recommend AngularCLI at all, as long as you have special needs (like bpmn).
In your case, I the short term, it is probably easier to copy your dashboard components into the bpmn-project. The Angular components should be fairly easy to copy.
Of course, Angular2 is now ancient history, so sometime this year I will have to upgrade dependenciesā¦ tried that once and that did not work at all, so I am not doing it right now
HI narve, thanks for your updated code. I want to include a back-end service using express which talks with mongodb. Can you tell me how I can integrate it with webpack so that the project can run as a whole ?
Can you please tell how you have done this ?
Hi!
If you are looking for how to serve express/mongodb and angular with bpmns etc through webpack, then you need to learn webpack and make it work yourselves - I canāt do your project for you 
However, if you have a node/express api-server running on e.g. port 9090, then you can easily set up my angular/bpmn/webpack project to proxy that api-server on same host/port as your angular web pages.
I use that, but removed it on the github-project. See this commit: https://github.com/narve/ang2-bpmnjs/commit/723db10ade9226d43753d5fcb3742f9846c16313
Then you can use normal angular code for communicating with your api server.
Note that a minor issue is that BPMN.js is synchronous so you will probably have to fetch your api-resources first and then initialize the bpmn-modeler.