Getting started

Developers
1

Hello,

I am a ASP.NET developer and I need to be able to use BPMN.IO and a custom panel. I have checked the example of the panel but I have absolutely no clue on how to get this thing working.

I am used to use VS2017 where I installed the NODE.JS environment but then again no experience in this field. If I look at the basic viewer and modeler example then it works after copying the code in a html file. But when I then look at the panel example I am quickly lost…

Any point in the right direction is very welcome please.

2

Hi Kaizer,
For start, check starter example in bpmn-example in github, we use asp .net and use bpmn.io in client side then send xml to server and process xml

1 Like
3

Hi Hadi_Jami,

Well I got this project to work. I used VS to import an existing Node Project and then did:

  1. npm install
  2. npm -g grunt-cli
  3. grunt auto-build

Then the project with the extension panel got build and working :).

I was thinking to hook the element events and use ASP.NET to call the correct forms when I click for example a task. Then I can link the Task_Id from the BPMN with my own Id. Would this be a correct way to implement an own model?

kind regards

4

(sorry for bad english)
We create model for all default and custom element used in bpmn designer and control process with this models and own api’s. Yes it can correct way.
bpmn-js exported api and provider for each element event handling, if you use modeler, you can get event handling with eventsbus

example (eventsbus)

var eventsBus = modeler.get('eventBus');

or

var eventBus = viewer.get('eventBus');

then you can control attached event or fired event on each element

var events = [
  'element.hover',
  'element.out',
  'element.click',
  'element.dblclick',
  'element.mousedown',
  'element.mouseup'
];
events.forEach(function(event) {
  eventBus.on(event, function(e) {    
    console.log(e);
    console.log(event)
  });
});

in events array you can add other event you want use.

5

No problem! Happy for your reply.

Well glad to hear I am thinking the right way about it :-). I have found the eventsbus and was able to build the example. Thank you for the information!

Kind regards

1 Like