New custom property in properties panel extension not reflect in bpmn diagram xml

Developers
1

Hi,
I’m adding some custom properties in the property panel like below,
I diable Id property in the General tab. Adding 2 new tabs Input and Output.

Screenshot 2021-03-19 at 12.17.03 PM
Screenshot 2021-03-19 at 12.17.03 PM1652×824 57.5 KB
Screenshot 2021-03-19 at 12.17.17 PM
Screenshot 2021-03-19 at 12.17.17 PM1654×768 87 KB

<?xml version="1.0" encoding="UTF-8"?>
<bpmn2:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmn2="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" id="sample-diagram" targetNamespace="http://bpmn.io/schema/bpmn" xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd">
  <bpmn2:process id="Process_1" isExecutable="false">
    <bpmn2:startEvent id="StartEvent_1">
      <bpmn2:outgoing>Flow_0n4p9tk</bpmn2:outgoing>
    </bpmn2:startEvent>
    <bpmn2:task id="Activity_0d872w2">
      <bpmn2:incoming>Flow_0n4p9tk</bpmn2:incoming>
    </bpmn2:task>
    <bpmn2:sequenceFlow id="Flow_0n4p9tk" sourceRef="StartEvent_1" targetRef="Activity_0d872w2" />
  </bpmn2:process>
  <bpmndi:BPMNDiagram id="BPMNDiagram_1">
    <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">
      <bpmndi:BPMNEdge id="Flow_0n4p9tk_di" bpmnElement="Flow_0n4p9tk">
        <di:waypoint x="448" y="258" />
        <di:waypoint x="500" y="258" />
      </bpmndi:BPMNEdge>
      <bpmndi:BPMNShape id="_BPMNShape_StartEvent_2" bpmnElement="StartEvent_1">
        <dc:Bounds x="412" y="240" width="36" height="36" />
      </bpmndi:BPMNShape>
      <bpmndi:BPMNShape id="Activity_0d872w2_di" bpmnElement="Activity_0d872w2">
        <dc:Bounds x="500" y="218" width="100" height="80" />
      </bpmndi:BPMNShape>
    </bpmndi:BPMNPlane>
  </bpmndi:BPMNDiagram>
</bpmn2:definitions>

See 2 screenshots I added new control in the property panel but XML not showing me if I download the diagram. What am I missing in it?
Note: My code is the same replica of BPMN custom property panel example

2

That will be hard to guess without knowing your code. Since you made changes to the example you mentioned it would interesting for us to see them.

For further assistance, please share a CodeSandbox that reproduces your issue in a way that we can inspect it.

3

Hi Niklas,
Thanks for the immediate reply. Here is my code

4

So you are setting a property “String” with your new entry. Having a look inside your descriptors, you are not specifying such a property.

"types": [
  {
    "name": "BewitchedStartEvent",
    "extends": [
      "bpmn:StartEvent"
    ],
    "properties": [
      {
        "name": "spell",
        "isAttr": true,
        "type": "String"
      },
    ]
  },
]

You have to make sure you get and set the modelProperty you are defining. Otherwise, it won’t be persisted.

1 Like
7

Hi Niklas
Thanks for your solution. Now I’m confused about model properties. I used an array of {key, value} format for dropdown data source then what will be a model property in my code and in the json?

8

There is a isMany flag for properties to indicate arrays. The table factory is a good provider for these kinds of properties.