Exporting XML diagram with custom attributes of any elements

Hello,
How can I export xml diagram with attributes of any elements like:

<?xml version="1.0" encoding="UTF-8"?>
<custom:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:custom="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:customdi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" id="Definitions_1" targetNamespace="http://bpmn.io/schema/bpmn">
  <custom:modeler id="Modeler_1" isExecutable="false">
    <custom:background id="Background_1">
      <custom:waterResource id="WaterResource_0392m54" serviceStatus="foo" enabled="false" />
      <custom:wifiResource id="WifiResource_0xcirhl" serviceStatus="foo" enabled="false" />
    </custom:background>
  </custom:modeler>
  <customdi:CUSTOMDiagram id="CUSTOMDiagram_1">
    <customdi:CUSTOMPlane id="CUSTOMPlane_1" customElement="Modeler_1">
      <customdi:CUSTOMShape id="_CUSTOMShape_Background_2" customElement="Background_1">
        <dc:Bounds x="148" y="12" width="1100" height="750" />
      </customdi:CUSTOMShape>
      <customdi:CUSTOMShape id="WaterResource_0392m54_di" customElement="WaterResource_0392m54">
        <dc:Bounds x="284" y="103" width="36" height="36" />
      </customdi:CUSTOMShape>
      <customdi:CUSTOMShape id="WifiResource_0xcirhl_di" customElement="WifiResource_0xcirhl">
        <dc:Bounds x="405" y="102" width="36" height="36" />
      </customdi:CUSTOMShape>
    </customdi:CUSTOMPlane>
  </customdi:CUSTOMDiagram>
</custom:definitions>

This is my custom.json file…

{
          "name": "ElectricityResource",
          "isAbstract": true,
          "superClass": [
              "Modeler"
          ],
          "properties": [
            {
              "name": "serviceStatus",
              "isAttr": true,
              "type": "String"
            },
            {
              "name": "enabled",
              "default": false,
              "isAttr": true,
              "type": "Boolean"
            }
          ]
        },
        {
          "name": "GarbageResource",
          "isAbstract": true,
          "superClass": [
              "Modeler"
          ],
          "properties": [
            {
              "name": "serviceStatus",
              "isAttr": true,
              "type": "String"
            },
            {
              "name": "enabled",
              "default": false,
              "isAttr": true,
              "type": "Boolean"
            }
          ]
        },
        {
          "name": "WaterResource",
          "isAbstract": true,
          "superClass": [
              "Modeler"
          ],
          "properties": [
            {
              "name": "serviceStatus",
              "isAttr": true,
              "type": "String"
            },
            {
              "name": "enabled",
              "isAttr": true,
              "type": "Boolean"
            }
          ]
        },
        
        {
          "name": "WifiResource",
          "isAbstract": true,
          "superClass": [
              "Modeler"
          ],
          "properties": [
            {
              "name": "serviceStatus",
              "isAttr": true,
              "type": "String"
            },
            {
              "name": "enabled",
              "default": false,
              "isAttr": true,
              "type": "Boolean"
            }
          ]
        },

So modeler.saveXML doesn’t export with your custom attributes when you described them in your custom moddle extension (custom.json)?

Please refer to this example to have a proper guide on how to extend the meta model.

My goal is whenever I drag any element to background, the custom attributes will also include in the XML.

Screenshot%20from%202019-09-13%2009-19-22

How am I supposed to read that code? Can you please use

code blocks

instead of screenshots?

<?xml version="1.0" encoding="UTF-8"?>
<custom:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:custom="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:customdi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" id="Definitions_1" targetNamespace="http://bpmn.io/schema/bpmn">
  <custom:modeler id="Modeler_1" isExecutable="false">
    <custom:background id="Background_1">
      <custom:electricityResource id="ElectricityResource_0y202ol" />
      <custom:waterResource id="WaterResource_1mqtzxw" />
      <custom:wifiResource id="WifiResource_1fpmgnw" />
      <custom:garbageResource id="GarbageResource_1gb7jyq" />
    </custom:background>
  </custom:modeler>
  <customdi:CUSTOMDiagram id="CUSTOMDiagram_1">
    <customdi:CUSTOMPlane id="CUSTOMPlane_1" customElement="Modeler_1">
      <customdi:CUSTOMShape id="_CUSTOMShape_Background_2" customElement="Background_1">
        <dc:Bounds x="135" y="13" width="1100" height="750" />
      </customdi:CUSTOMShape>
      <customdi:CUSTOMShape id="ElectricityResource_0y202ol_di" customElement="ElectricityResource_0y202ol">
        <dc:Bounds x="210" y="86" width="36" height="36" />
      </customdi:CUSTOMShape>
      <customdi:CUSTOMShape id="WaterResource_1mqtzxw_di" customElement="WaterResource_1mqtzxw">
        <dc:Bounds x="344" y="52" width="36" height="36" />
      </customdi:CUSTOMShape>
      <customdi:CUSTOMShape id="WifiResource_1fpmgnw_di" customElement="WifiResource_1fpmgnw">
        <dc:Bounds x="253" y="201" width="36" height="36" />
      </customdi:CUSTOMShape>
      <customdi:CUSTOMShape id="GarbageResource_1gb7jyq_di" customElement="GarbageResource_1gb7jyq">
        <dc:Bounds x="520" y="59" width="36" height="36" />
      </customdi:CUSTOMShape>
    </customdi:CUSTOMPlane>
  </customdi:CUSTOMDiagram>
</custom:definitions>

This XML is not valid BPMN, are you aware of that?

I didn’t use BPMN. It’s my custom modeler based om diagram-js.
Is it possible to include the custom attributes in the custom element whenever it is created in the canvas?

Given that you’ve created a meta model you can create these elements with their respective properties, yes.

I added this inside the createListener function of my custom PaletteProvider.

shape.businessObject.serviceStatus = 'foo';
shape.businessObject.enabled = true;