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

raangs4u · August 31, 2015, 1:43pm

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

nikku · September 1, 2015, 6:54am

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.

raangs4u · September 1, 2015, 3:04pm

Can you tell me how to extract properties from moddle?

nikku · September 2, 2015, 9:29am

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.

raangs4u · September 2, 2015, 2:54pm

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.

nikku · September 2, 2015, 4:24pm

Checkout this topic.

raangs4u · September 16, 2015, 1:18pm

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.

evlbpm55 · September 21, 2015, 3:57pm

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.

raangs4u · September 21, 2015, 5:30pm

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.

on every click event on shape I am extracting properties from businessObject of that shape and loading to the properties panel.
On every edit event on the property in the properties panel, I am storing the property to the businessObject.

nikku · September 28, 2015, 7:19am

@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.

pallavi93 · November 23, 2015, 6:44am

Is the properties panel still under construction?

nikku · November 23, 2015, 8:06am

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

nilei · January 24, 2016, 4:21pm

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

pedesen · January 25, 2016, 9:52am

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.

nilei · February 17, 2016, 10:07pm

Hi @pedesen,

it took me some time because my business is consulting, not development 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

pedesen · February 24, 2016, 10:29am

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:

using set and update the business object of the element.
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.

raangs4u · March 24, 2016, 10:39am

Hello,

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

MichaelDuanH · October 11, 2022, 12:42am

Hello， I am going to save create a template based on json data, here we have

fake code like this:
this.form = {atomNodes:[
    {
      atomNodeId:'',
      id:"",
      insertIncreaseFail:"",
      sppPush:"",
      subProssName:'',
      beanName:'',
      sql:"",
      subName:'',
      relId:''
     }
  ]}
if (typeof this.form[nodeKey] === 'object') {
      if (this.form[nodeKey] instanceof Array) {
        if (this.form[nodeKey].length) {
          inputParameter = bpmnFactory.create('camunda:InputParameter', {name: nodeKey});
                  const list = bpmnFactory.create('camunda:List');
                  list.items = [];
                  this.form[nodeKey].forEach((item) => {
                    const itemValue = bpmnFactory.create('camunda:Value', {value: item});
                    list.items.push(itemValue);
          });
          inputParameter.definition = list;
        }
      }

report TypeError: Cannot read property ‘atomNodes’ of undefined

nikku · October 13, 2022, 8:50pm

Please do not necrobump old topics. Instead link to this thread from new topic.

nikku · October 13, 2022, 8:50pm