How to create an independent properties panel

Developers
1

Hi, I am new to bpmn & js world :).
So far I manage to create and integrate custom elements and custom properties panel with bpmn-js modeler by following several examples in bpmn.io github projects.

But my requirement is to create a custom properties panel based on angularjs.
So the bpmn-js modeler and my custom properties panel will reside side by side in an
angularjs app.

My question is how to bind or attach my custom properties with the bpmn-js elements (i.e. start event) in the modeler and to make sure that my custom properties panel will behave exactly same as bpmnjs or camunda properties panel.

Any suggestion would be helpful.

2

What would be the benefit of implementing a properties panel using Angular? How would it be different?

3

I am not sure about the greater benefits yet, first of all this is a must have requirement. Basic idea is to add some fancy UI in the properties panel.

4

I suggest you to look into the existing PropertiesPanel implementation.

The integration with bpmn-js is really simple:

  • Listen to elements.changed events emitted by the library and redraw
  • Listen to selection.changed events and change the displayed properties panel contents
  • Performs changes to BPMN elements via the Modeling / CommandStack APIs

The complexity will start to add up though once you start implementing various properties and their correct binding with BPMN elements.

1 Like
5

You don’t need Angular in order to have a fancy UI. :wink:

1 Like
6

@nikku I will try this. Thank you for your suggestions

7

@philippfromme I agree with you, but this is a requirement for our project and perhaps there are some other benefits that I don’t know yet.