Modifying Extension Attributes and Elements

Hi there,

I work in a large project in which we investigate the process experience in the context of business process management. For this I want to extend BPMN.

In the example [bpmn-js-example-custom-elements](https://github.com/bpmn-io/bpmn-js-example-custom-elements) this is partly discussed. So i would take this example as the basis of my Question.

with the getExtensionElement function i can access the attributes of the respective element. Here for example ‘qa:AnalysisDetails’

let analysisDetails = getExtensionElement(businessObject, 'qa:AnalysisDetails');
console.log("output: " + analysisDetails.lastChecked)

But how can I access the child element? In this example i maybe want to access the attributes of “comment”. If i try to do it like before, i’ll get a undefined variable:

let comment = getExtensionElement(businessObject, 'qa:comment');
console.log("output2: " + comment.author)

–> undefined

<bpmn2:task id="Task_1" name="Examine Situation" qa:suitable="70">
      <bpmn2:outgoing>SequenceFlow_1</bpmn2:outgoing>
      <bpmn2:extensionElements>
        <qa:analysisDetails lastChecked="2019-03-27T13:59:37.098Z" nextCheck="2019-03-28T13:59:37.098Z">
          <qa:comment author="Klaus">
            Our operators always have a hard time to figure out, what they need to do here.
          </qa:comment>
          <qa:comment author="Walter">
            I believe this can be split up in a number of activities and partly automated.
          </qa:comment>
        </qa:analysisDetails>
      </bpmn2:extensionElements>
    </bpmn2:task>

For further assistance, please share a CodeSandbox that reproduces your issue in a way that we can inspect it.

Hi Niklas,
i think the sandbox tool is really nice. I imported the example Project mySandboxLink and it compiled successfully. But the page doesn’t looks right.

I just added the part which i dont understand.

// my Question:
    // how can i access the attributes of an extension child Element with an 1:n relasionship
    let comment = getExtensionElement(businessObject, 'qa:Comment');
// if i do it like this, comment will be undefined and the following doent work
    console.log("TEST1: " + comment.author); // want to read the author attribut of comment in diagram.bpmn
    console.log("TEST2: " + comment.text); // want to read the text body of comment  in diagram.bpmn

Can you try to fix your sandbox so it’s showing the actual page? I think you’ll have to make some changes in the package.json to say which file do display.

Hey Niklas,
i used your sandBox to show my Problem now. codeSandBox
It starts at index.js line 52 till line 60. Every other changs i did should be exactly like in the bpmn-js-example-custom-elements

Thanks for sharing! I modified it to achieve what you what you’re searching for (getting the author of the first comment, I guess?): https://codesandbox.io/s/ecstatic-mccarthy-tibft?file=/src/index.js

Please see that the qa:Comment is inside your qa:analysisDetails element, so your getExtensionElement would not resolve it for your clicked element.

<bpmn2:extensionElements>
     <qa:analysisDetails lastChecked="2019-03-27T13:59:37.098Z" nextCheck="2019-03-28T13:59:37.098Z">
        <qa:comment author="Klaus">
            Our operators always have a hard time to figure out, what they need to do here.
        </qa:comment>
        <qa:comment author="Walter">
            I believe this can be split up in a number of activities and partly automated.
        </qa:comment>
      </qa:analysisDetails>
</bpmn2:extensionElements>
1 Like

Thanks a lot for your great support. This is exactly waht i’ve searching for!

analysisDetails = getExtensionElement(businessObject, "qa:AnalysisDetails");
// (Solution) Here I can iterate through all the comment elements.
comment = analysisDetails ? analysisDetails.get("comments")[0] : null; 
console.log("comment author: " + comment.author);
console.log("comment text: " + comment.text);     
1 Like