Integrating bpmn-js-properties-panel with the bpmn-js modeler


#1

How to integrate bpmn-js-properties-panel with the bpmn-js editor? Is bpmn-js-properties-panel is under development or finished?

Answer

The properties panel supports most BPMN properties and important Camunda properties already. We are working on completing it (with regards to Camunda related properties).

Have a look at the properties-panel example to learn how to integrate the properties panel with our BPMN modeler.


#2

The project is under development. We will offer an example how to integrate and extend it once it is finished.


#3
  1. Can I know a tentative date of the project completion ?
  2. Are you going to use the same workflow xml to save properties?
  3. Can you give me some pointers to integrate basic properties panel so that I can also contribute to the project

#4

The properties panel is a side project we are working on. We cannot give you any estimations on when this will be shipped.

It will persist all changes within the BPMN 2.0 XML.

You can check out a basic integration in the properties-panel example we have put up. That should get you started.


#5

Can you tell me how to extract properties from moddle?


#6

You would like to access BPMN properties loaded from the BPMN 2.0 file? Check out bpmn-moddle.

For every diagram element, businessObject is the BPMN 2.0 moddle representation.

If you have, lets say a shape, Task_1 you can do stuff like:

var taskShape = elementRegistry.get('Task_1'),
    task = tashShape.businessObject;

var loopCharacteristics = task.loopCharacteristics;

// loop characteristics tell you whether or not 
// MI / Paralell / Loop is being set.

You can learn about all available properties in the BPMN 2.0 Spec or the bpmn.json moddle descriptor we provided for it.


Developer FAQ (bpmn-js)
#7

Thank you for the explanation. But I am facing a small issue.

This is what I did.

var taskShape = elementRegistry.get('Task_1'),
    task = tashShape.businessObject;

   task.name = new Name;

I tried to edit the name property. The new name is getting saved but the task’s view is not changed.
It is displaying the old name.

Please help me to refresh the task’s view.


#8

Checkout this topic.


#10

Thanks nikku.

I am facing another small issue.

I am using the following code to save properties on a shape.

        var modeling = modeler.get('modeling');
        var elementRegistry = modeler.get('elementRegistry');
        var sequenceFlowElement = elementRegistry.get(shape.id);
        var obj = {};
        obj['documentation'] = "docs for the shape";
        modeling.updateProperties(sequenceFlowElement, obj);

the newly added property is reflecting in bussinessObject.

but when I save the workflow using

  modeler.saveXML({format: true}, function (err, xml) {
                if (err) {
                    console.log(err);
                } else {
                    console.log("Saved");
                }
  });

I am getting the below error.

TypeError: Cannot read property 'ns' of undefined(…)

Please help me in resolving this issue.


#12

Hi @raangs4u, @nikku, Were you able to figure out the integration of properties-panel with modeler? If so, can you provide a high-level overview of how to go about it?
I was able to build and run the tests on the properties-panel master, but not able to get it integrated with the modeler.


#13

I didn’t try the bpmn-js-properties-panel as it is not yet finished.

I did the below steps and I am able to display & save the properties in the panel through xml.

  1. on every click event on shape I am extracting properties from businessObject of that shape and loading to the properties panel.

  2. On every edit event on the property in the properties panel, I am storing the property to the businessObject.


#14

@evlbpm55 for the moment, look into the test cases to see how you get the properties panel running with bpmn-js. We will follow up with better documentation once the project stabilized.

If you only need a few properties to be edited follow @raangs4u steps.


#15

Is the properties panel still under construction?


#16

That depends on what you need. We released a few versions already.


#17

Dear all,

may you give a newbie guideline how to start a test modeler with all available BPMN properties? I am excellent with git and all the surroundings, no worries, but I am clueless about JS specialist. I got the example running, but there are only a few BPMN properties available.

So the question is: how to start the example with all currently available BPMN properties?

We plan to use bpmn-js in our project too and I would like to summarize the missing BPMN properties in order to request resources to create and commit them as pull requests. We plan to stay with BPMN properties only and no vendor specific properties.

– Cheers, Nils


#18

Hi nilei,

if I got you right, you want to use the properties panel with all available BPMN properties but without the camunda specific extensions as shown in the example. To do so, you can take a look into the properties panel readme. There you can see an example how to start without the camunda properties:

var BpmnJS = require('bpmn-js/lib/Modeler'),
    propertiesPanelModule = require('bpmn-js-properties-panel'),
    propertiesProviderModule = require('bpmn-js-properties-panel/lib/provider/bpmn');

var bpmnJS = new BpmnJS({
  additionalModules: [
    propertiesPanelModule,
    propertiesProviderModule
  ],
  container: '#canvas',
  propertiesPanel: {
    parent: '#properties'
  }
});

I hope that answers your question. :slightly_smiling:


#19

Hi @pedesen,

it took me some time because my business is consulting, not development :slight_smile: but I got the JS file build with the BPMN provider. I realized that there are actually only a few properties available. What I am missing in detail:

How to define…

  • Type language
  • Expression language
  • Namespaces
  • Imports
  • Item definitions
  • Resources and their parameters
  • Sequence flow conditions
  • Input and output specifications
  • Data associations
  • Data properties
  • Implementations
  • Messages
  • Errors
  • Signals
  • Escalations
  • Interfaces
  • Participant properties
  • Process properties
  • Data objects
  • Resource assignments
  • Structure references
  • Global tasks
  • Renderings
  • Categories

… and properly some more (e.g. OMG BPMN MIWG attribute coverage matrix).

Are there any (easy) instructions how to add them in the best and most accepted way?

I am super happy to create pull requests for all of them if possible.

We really want to add BPMN to our (open source) application with as less proprietary information as possible.

– Cheers, Nils


#20

Hi Nils,

you are right about the fact that we only support a subset of BPMN properties in the properties panel. We are not exactly sure about the value we are generating by supporting those. These are invisible properties (non-modeling related) and only a limited number of tools (modeling and execution) actually support them.

We are always happy to accept additions as pull requests. A good starting point is the BpmnPropertiesProvider where all our BPMN properties are added. If you want to add the above mentioned properties, you should do it here.

A simple example how to add entries to the properties panel is the documentation property. There you can see, that we are using the reusable entry factory TextArea to add an entry. We already have factories for labels, text inputs, select boxes, complex key value tables and more, which provide the functionality to create, update and delete properties. An entry basically contains at least a get and a set method (for all required functions look into the appropriate entry factory. If you need further documentation on that, let me know):

  • the entry.get method gets and returns the properties from the business object of the currently selected element so that they can be displayed in the panel.
  • the entry.set method gets the values from the input element (text field, checkbox, etc.) and sets it as properties to the business object using commands (to understand how this works in detail see handleChange and applyChanges).

The lifecycle if you enter text into a text field is:

  1. using set and update the business object of the element.
  2. using get to display the changes made to the business object.

I hope this is a good introduction in how you could start. If you want to contribute make sure to test your code. We have plenty examples how to do that in our test suite. If you have further questions, let us know, and we’ll answer them as comprehensible as possible.


Set the propertiy value of the input box to the element?
#21

Hello,

Is the properties panel available in webjar of bpmn-js?