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

Question

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.
<?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 the BPMN custom property panel example

Answer 1

I resolved the issue. I able to set input-output parameter in BPMN diagram using the following code,
set: function setValue(element, values, node) {
var b_obj = getBusinessObject(element);
var selectedValues = {};
selectedValues = values;
prop[_id] = selectedValues[_id];
var selectedName = dropdownOptions[parseInt(prop[_id])].name;
var bo = cmdHelper.updateBusinessObject(element, b_obj, prop);
var selectedInputParameter = bpmnFactory.create('camunda:InputParameter', {
name: selectedName,
value: prop[_id]
});
var inputOutput = bpmnFactory.create('camunda:InputOutput', {
inputParameters: [selectedInputParameter]
});
b_obj.extensionElements = b_obj.extensionElements || bpmnFactory.create('bpmn:ExtensionElements');
b_obj.extensionElements.get('values').push(inputOutput);
return bo;
}
I got a hint from here