Hello Ingo,
yes, that seems straight-forward enough, but I can’t see any message option anywhere. Are there different privilege levels for forum users? Am I a low-level minion?
Hi Fbo,
Please find the attached screenshot.
Thanks
-Prameela
Maybe you havn’t logged in before?
I realize this discussion has gone off the rails a bit, but I just have to defend my honor now:
I seem to be logged in, I can post… ?
Unfortunately, my problem is still not solved.
I downloaded the commonjs pizza example (https://github.com/bpmn-io/bpmn-js-examples/tree/master/simple-commonjs) and took a look, however I do not see a path how to apply the strategy to my situation.
The problem is that my application is written in typescript (angular2), and everything is a bit different:
All javascript code is in my case generated via tsc, and I can’t simply “browserify” my entire app like it is done in the example. Well, probably I could, but as far as I see this would collide with the angular2 way of setting up the application structure. Is there a way to browserify the bpmn-js library itself? Then I could treat it at least hackishly as a static JS library and simply grab the stuff I need (hopefully…)
Has anyone ever done this? When I attempt to do that I end up with a 30k lines .js containing dozens of conflicting module.exports statements.
Cheers
1 Like
Is something like bower version of the library is what you are looking for?
Cheers,
Vladimir
Yes,
exactly. Tried the bower approach today and got it working. My build system is a horrific mix of npm and bower now, but I’ll deal with that later and pretend for now that all is well. Learned a lot about the wonderful world of javascript and typescript, anyway.
Thanks for your help!
Hi Vladimir.
I had a look at your suggested approach with https://github.com/bpmn-io/bower-bpmn-js
BpmnViewer is not found, though Viewer is found. Will they be the same?
Thanks.
Bard
Hi Bard,
Not sure what exactly do you mean regarding the Viewer…
Please have a look on this bower example.
You can use this simple web server to run it:
# clone example repo & go to the example root directory
npm i -g bower
npm i -g http-server
bower i
hs
Then just open http://127.0.0.1:8080/app to see an example.
Cheers,
Vladimir
Thank you Vladimir!
Yes it did work. 
You actually fixed my main problem, how to show the Viewer in an Angular app.
What I did was to cut´n paste the components from the Simple Bower example into a fresh Angular-Seed project.
I´ve created a public project on https://github.com/baardl/Angular1-Bpmn-js in case someone else run into Angular issues.
Thanks again.
Bard
1 Like
@vladimirs.katusenoks
So to ‘message’ a user directly, you have to be given permissions to do so? If so, can you grant those to me? Thanks.
@fbo I’d like to use bpmn-io viewer from an Angular 2 app as well. Could you share your results on github or describe what you had to do to get it working?
Since the world is moving from bower to npm, it would be best to have whatever you got via bower, retrievable via npm (which also simplifies build processes). Anyone at camunda interested in publishing that?
1 Like
@dukekujo: I’m assuming you’re also writing typescript. Here’s a very short outline of what I did:
- Started an angular2 app based on npm
- Installed bower via npm
- Pulled bpmn-js and its dependencies with bower
- Added the (animated-)viewer.js to the html
On the typescript level, these are the steps:
- Extend the ts wrapper for “window” like so:
interface Window { BpmnJS: any; } - In your class logic, create the viewer “object”:
this.myViewer = new window.BpmnJS({ container: '#canvas' });, where “canvas” is the name of your html container for the viewer
The above solution is resolved at runtime and will give you compiler warnings. I’m optimistic there is a better way, but I am fine with having the above working right now.
1 Like
Hi, I want to use bpmn-js with React and did some progress, but actually have problems with the *.d.ts file I think, would you please share the d.ts file. my email is mkarimpour@gmail.
I get the error:
bpmn_js_1.Viewer is not a constructor
in line
BpmnJSComponent.prototype.componentDidMount = function () {
this.modeler = new bpmn_js_1.Viewer({ container: this.divArea }); <======
this.modeler.importXML(’’, this.handleOnModelError);
};
Best Regards
Mehdy
Hi MehdyKarimpour,
Do u have any luck with using bpmn-js modeler with React?
Can you share your findings or code snippets.
Thanks
Hello everyone,
I’m developing an application (Angular2/Typescript) that requires the Viewer, Moduler and properties panel integration but the problem is when i use the “standalone” approach, there’s already an know-issue about using moduler + properties, but in meanwhile i’d like to import only the viewer, my question is:
Are you planning at least to release an @Typings definition for the bpmn-js or either converting it to ES2015?
It doesn’t seen realy a good manner to use the mix of javascript and typescript, is there any solution you guys found on that?
Best Regards
Raphael
Are you planning at least to release an @Typings definition for the bpmn-js or either converting it to ES2015?
We do not plan to do that. Contributions are welcome.