Add extensionElements to process

Hi all :slight_smile:

I need add extensionElements to process inside xml (with function saveXML() )

xml should look like this:

<?xml version="1.0" encoding="UTF-8"?>
<bpmn:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmn="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" id="Definitions_1npd7tv" targetNamespace="http://bpmn.io/schema/bpmn" exporter="bpmn-js (https://demo.bpmn.io)" exporterVersion="7.0.0">
    <bpmn:collaboration id="Collaboration_14y77iu">
    <bpmn:participant id="Participant_19fcdqe" processRef="Process_1" />
    </bpmn:collaboration>
    <bpmn:process id="Process_1" name="Process_name" isExecutable="true">
        <bpmn:startEvent id="StartEvent_09wqlnn" />
        <bpmn:extensionElements>
            <poc:user name="Dan" />
        </bpmn:extensionElements>
    </bpmn:process>
    <bpmndi:BPMNDiagram id="BPMNDiagram_1">
    <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Collaboration_14y77iu">
        <bpmndi:BPMNShape id="Participant_19fcdqe_di" bpmnElement="Participant_19fcdqe" isHorizontal="true">
        <dc:Bounds x="106" y="61" width="600" height="250" />
        </bpmndi:BPMNShape>
        <bpmndi:BPMNShape id="_BPMNShape_StartEvent_2" bpmnElement="StartEvent_09wqlnn">
        <dc:Bounds x="156" y="81" width="36" height="36" />
        </bpmndi:BPMNShape>
    </bpmndi:BPMNPlane>
    </bpmndi:BPMNDiagram>
</bpmn:definitions>

image

with extensionElements inside ‘bpmn:Process’
but it’s no working :frowning:

when i’m calling:

console.log(this.bpmnJS.get('elementRegistry').getAll())

I get:
image
without ‘bpmn:Process’

/
/
/

When I tried to get smart with:

if (is(element, 'bpmn:Participant')) {
        // get process
        const processBo = getBusinessObject(element).get('processRef');

        const elem = this.bpmnJS.get('moddle').create('poc:user');
        elem.name = "Dan";
        extensionElements.get('values').push(elem);

        processBo.businessObject = this.bpmnJS.get('moddle').create('bpmn:Process');
        processBo.businessObject.extensionElements = extensionElements;
        this.bpmnJS.get('modeling').updateProperties(element, {
          processRef: processBo
        });
      }

It also does not work, the function ( saveXML() )
Was empty (without extensionElements)

I would be happy for quick and detailed help :slight_smile:

@Niklas_Kiefer ?
@oguzeroglu ?

Sorry for not responding. Can you maybe share your setup in a CodeSandbox? It would be much easier for us to help you.

1 Like

In your example XML you’re not declaring the poc namespace so I assume you just added the <poc:user name="Dan" />.

You to extend the BPMN model so it understands your poc:user element.

thanks @philippfromme :slight_smile:
I missed the declaring in Json file…

So I succeeded to Get the data from XML
/
/
/
/

But now I have a new problem
I can’t Set the value

I’m trying to do Set with:

const processBo = getBusinessObject(element).get('processRef');
const elem = this.bpmnJS_moddle.create('poc:User');
elem.name = 'New Name';
processBo.businessObject = this.bpmnJS_moddle.create('bpmn:Process');
processBo.businessObject.extensionElements = extensionElements;

Then, I print the XML, with

const { xml } = await this.bpmnJS.saveXML({ format: true });
console.log(xml);

I get the XML (without my extensionElements in Process) :frowning:

Although, I can see it inside the shapes (bpmnJS_elementRegistry)

Please help :slight_smile:

Did you update the properties of the process?

See a quick demo in this codesandbox or this snippet:

    // create extensionElements element
    const extensionElements = moddle.create("bpmn:ExtensionElements");

    // create the custom element (according to our json config)
    const pocUser = moddle.create("poc:User");
    pocUser.name = "Max";

    // put the custom element into the extensionElements
    extensionElements.get("values").push(pocUser);

    // Update the process
    const process = elementRegistry.get("Process_0sckl64");
    modeling.updateProperties(process, {
      extensionElements
    });

That line makes no sense. You’re adding a process to a process. Can you post the full code example?

@maxtru
your example works great, but not i my example :frowning:

Take a look at the example (bpmn) that I sent in the main post (when the Process in the Participant)

<?xml version="1.0" encoding="UTF-8"?>
<bpmn:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmn="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" id="Definitions_1npd7tv" targetNamespace="http://bpmn.io/schema/bpmn" exporter="bpmn-js (https://demo.bpmn.io)" exporterVersion="7.0.0">
    <bpmn:collaboration id="Collaboration_14y77iu">
    <bpmn:participant id="Participant_19fcdqe" processRef="Process_1" />
    </bpmn:collaboration>
    <bpmn:process id="Process_1" name="Process_name" isExecutable="true">
        <bpmn:startEvent id="StartEvent_09wqlnn" />
    </bpmn:process>
    <bpmndi:BPMNDiagram id="BPMNDiagram_1">
    <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Collaboration_14y77iu">
        <bpmndi:BPMNShape id="Participant_19fcdqe_di" bpmnElement="Participant_19fcdqe" isHorizontal="true">
        <dc:Bounds x="106" y="61" width="600" height="250" />
        </bpmndi:BPMNShape>
        <bpmndi:BPMNShape id="_BPMNShape_StartEvent_2" bpmnElement="StartEvent_09wqlnn">
        <dc:Bounds x="156" y="81" width="36" height="36" />
        </bpmndi:BPMNShape>
    </bpmndi:BPMNPlane>
    </bpmndi:BPMNDiagram>
</bpmn:definitions>

when i run my bpmn in your codesandbox i get null or undefined ( in const process )

So, How i can update a process that located inside participant?

For a more complex operation such as updating a nested business object you can use a command handler that is available in bpmn-properties-panel.

Using that command handler you can update the process referenced by the participant:

const commandStack = bpmnJS.get("commandStack"),
      elementRegistry = bpmnJS.get("elementRegistry");

commandStack.registerHandler(
  "updateBusinessObject",
  UpdateBusinessObjectHandler
);

const participant = elementRegistry.get("Participant_1"),
  process = participant.businessObject.processRef;

commandStack.execute("updateBusinessObject", {
  element: participant,
  businessObject: process,
  properties: {
    name: "Foo"
  }
});

CodeSandbox: https://codesandbox.io/s/update-business-object-example-sr9iq?file=/src/index.js

Thanks @philippfromme :slight_smile:
You’re the best :muscle: