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

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