We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Adding properties panel to Bpmn Editor

Thread ID:

Created:

Updated:

Platform:

Replies:

144419 May 6,2019 08:01 AM UTC May 21,2019 12:01 PM UTC Vue 9
loading
Tags: Diagram
Eda Toprak
Asked On May 6, 2019 10:41 AM UTC

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 [Syncfusion]
Replied On May 7, 2019 09:20 AM UTC

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.  
 
 
Help documentation for BPMN shapes  
Regards,
Ramya T
 


Eda Toprak
Replied On May 7, 2019 12:52 PM UTC

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 [Syncfusion]
Replied On May 8, 2019 06:54 AM UTC

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.  
  
  
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
Replied On May 15, 2019 10:23 AM UTC

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 [Syncfusion]
Replied On May 16, 2019 12:36 PM UTC

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 


Regards, 
Shyam G 


Eda Toprak
Replied On May 20, 2019 08:45 AM UTC

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 [Syncfusion]
Replied On May 20, 2019 10:05 AM UTC

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
Replied On May 20, 2019 11:49 AM UTC

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 [Syncfusion]
Replied On May 21, 2019 12:01 PM UTC

Hi Eda,  
  
We have modified the sample to achieve your requirement. 
  
 
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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon