Adding properties panel to Bpmn Editor

[Eda Toprak]

How to add properties panel to Bpmn Editor? After adding shapes to the diagram, when I click on it, I want to see the in the properties panel. How can I do it ?

[Ramya Thirugnanam]

Hi Eda,  

 

We have created a sample in which we have rendered a BPMN event shape. When you click on that shape, two dropdown displays named as BPMNEvent and BPMNTrigger. You can change an event and trigger property of an BPMN event shape by selecting the text from dropdown. Similarly, you can do it for remaining BPMN shapes. Please refer to the sample as below.  

 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/BPMNsample752001650  

 

Help documentation for BPMN shapes  

https://ej2.syncfusion.com/vue/documentation/diagram/bpmn-shapes/  

Regards,
Ramya T 

[Eda Toprak]

Thank you!!!!!! I ran the project. when I have many shapes in diagram, I want to see ID and properties of selected shape on properties panel. I export the XML code of process done by bpmn modeler, and I want to see that changes done on properties panel in my xml code. how can I do it? 

[Ramya Thirugnanam]

Hi Eda,  

 Please find the response for your queries as below. 

Query	Response
I ran the project. when I have many shapes in diagram, I want to see ID and properties of selected shape on properties panel.	We have modified the sample in which we have rendered a node Id, offsetX and offsetY properties alone in the property panel. Similarly, you can do it for other properties. Please refer to the sample as below.      Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/BPMNmodifiedsample1581659013
I export the XML code of process done by bpmn modeler, and I want to see that changes done on properties panel in my xml code. how can I do it?	Once you have changed the node properties, it will be reflected in nodes collection. So, you can iterate the node from diagram nodes collection as shown in below code example.      Code example:        var diagram = document.getElementById("diagram");    diagram = diagram.ej2_instances[0];   for (var i = 0; i < diagram.nodes.length; i++) {           //get a node           var node = diagram.nodes[i];         }

   

Regards,  

Ramya T 

[Eda Toprak]

I want to add some more properties to each shape using empty inputs. User will fill these empty inputs with his value, and each selected shape will show its properties.  For example; name,  ...  Now I have one input Name, and when I write name to one shape, it is same for other shapes also. How can I do this?  

[Shyam G]

Hi Eda, 

In our previous update , we have provided a sample in which we have rendered a diagram and textbox control with node properties. So, you can create an textbox as per your requirement. Once you enter an text in textbox and focus out, textbox change event will be triggered. In this event, you can iterate an diagram nodes and set an textbox value to each node property. So that, it applies to all nodes. 

Here is an code example to iterate an diagram nodes in change event. 

Code example: 

<ejs-textbox id='offsetX' floatLabelType="Auto" :change='textboxChange'></ejs-textbox>  

textboxChange: (args) => { 

//iterate an node 

        for(var i=0; i< diagramInstance.nodes.length; i++) { 

          //get an node 

          let node = diagramInstance.nodes[i]; 

          //set an textbox value 

          node.width = args.value 

        } 

} 

Here is an documentation for textbox change event 

Help documentation: https://ej2.syncfusion.com/vue/documentation/api/textbox/#change 

Regards, 

Shyam G 

[Eda Toprak]

When I click on the selected shape on the diagram,

each shape has an empty input textbox. 

When the user enters the value into the input of the shape, the shape will get that value. 

When the user select another shape, the input will be emptied again.

I can enter a new value in the new shape which i selected. 

And when I go back to the other shape, I want to see the value I entered first.

[Ramya Thirugnanam]

Hi Eda,  

Initially, the textbox will be empty, when the node is selected. The entered value in textbox is saved in additional properties of the node, when enters the value in textbox.  

To display the value back to textbox,  please update the textbox with addinfo property of the node in selectionchange event. We have provided code example to update the textbox with value.  

Code example:  

data: function() {  

    return {  

selectionChange: (args) => {  

        if(args.type === "Addition" && args.state === "Changed") {    

          if(diagramInstance.selectedItems.nodes.length > 0) {  

            let selectedNode = diagramInstance.selectedItems.nodes[0];  

            //set an node value to an textbox   

   If(selectedNode.addInfo  && selectedNode.addInfo.offsetX)  

            document.getElementById("offsetX").value = selectedNode.addInfo.offsetX;  

       If(selectedNode.addInfo  && selectedNode.addInfo.offsetY)  

            document.getElementById("offsetY").value = selectedNode.addInfo.offsetY;  

          }   

        }   

      },  

}  

}  

 

Regards,  

Ramya T 

[Eda Toprak]

I  did run the sample. When I drop multiple shapes in diagram and enter a value in the textbox input this affects all shapes. I don't want this behavior. 

For example, I brought a shape to the diagram and I entered the name value and then I brought another shape, the textbox input of the new shape that 

I brought will be empty. Then i want to enter a new value. When I choose the shape which I 

entered the first value, I want to see the value I entered first. When I display the first shape, it will not change the value of the second shape.

[Ramya Thirugnanam]

Hi Eda,  

  

We have modified the sample to achieve your requirement. 

  

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/Bpmnsample21may-1285392495  

 

Sample details: 

1. Initially, The property panel contains Id( custom property in addInfo), offsetX and offsetY property with empty values.
2. The Id, offsetX and offsetY value will be updated, when selecting the node. When you drag a node, positionChange event triggers in which we update node offsetX and offsetY value.
3. Also, the id property in property panel is an custom property which is set in node addInfo property. So, we can change that property in textbox and It will be updated in textbox change event.

Regards,  

Ramya T