How to inject field instead of property to

Developers
1

I have succeeded in creating a custom element + model extension by following the info here:

I’ve created an extension with a property like:

      properties: [
        {
          name: "exampleString",
          isAttr: true,
          type: "String"
        }
      ]

and I am able to update this custom property when left clicking on this element with the use of the following function:

  initializeListener = () => {
    this.modeler.on("element.contextmenu", 1200, event => {
      event.originalEvent.preventDefault();
      event.originalEvent.stopPropagation();
      const { element } = event;

      if (element.type === "bpmn:ServiceTask") {
        const modeling = this.modeler.get("modeling");

        modeling.updateProperties(element, {
          exampleString: "hello world"
        });

        console.log("custom string added");
      }
    });
  };

My question is, how to I gain the ability to inject a complex object or some expression?

Do I use a “field” in some way?

Documentation seems sparse in this area, so thank you very much for your help.

2

This is exactly what this example does: https://github.com/bpmn-io/bpmn-js-example-model-extension

3

Thanks for pointing me towards that.

Doing:

      name: "Process",
      extends: ["bpmn:Process"],
      properties: [
        {
          name: "exampleFloat",
          isAttr: true,
          type: "Float"
        }
      ]
    }

with

      if (element.type === "bpmn:ServiceTask") {
        const modeling = this.modeler.get("modeling");
        const moddle = this.modeler.get("moddle");
        const extensionElements = moddle.create("bpmn:ExtensionElements");

        modeling.updateProperties(element, {
          extensionElements,
          exampleFloat: { testKey: "testValue", testKey2: "testValue2" }
        });

        console.log("custom object added");
      }

is giving me an XML output like:

<bpmn2:serviceTask id="ServiceTask_08jpi4l" name="st" exampleFloat="[object Object]">

Please let me know if you happen to see what I am doing wrong exactly, and thanks again.

4

Please look at the example again. It’s doing exactly what you want to do.

5

Sorry, don’t see it.

Have been debugging this for way too many hours, so please let me know if you happen to understand the mistake.

Thanks for your help anyway.

6

Okay, here’s a complete example. It doesn’t get simpler than this.