Properties-panel-extension descriptor to add child element

Developers Modeler
1

Hi I am really new to bpmn but was able to understand a little about moddle and bpmn-js.

I would like to extend bpmn-js-properties-panel with not just custom properties but adding additional child node to a scriptTask. To make my intentions clearer, at the moment a scriptask when exported will look like the following:

<bpmn:scriptTask id="ScriptTask_01m7cij" name="get verticalOpeningArea">
      <bpmn:incoming>SequenceFlow_0ybo8ec</bpmn:incoming>
      <bpmn:outgoing>SequenceFlow_1gkgyo4</bpmn:outgoing>
</bpmn:scriptTask>

I would like it to look like the following:

<bpmn:scriptTask id="ScriptTask_01m7cij" name="get verticalOpeningArea">
      <bpmn:incoming>SequenceFlow_0ybo8ec</bpmn:incoming>
      <bpmn:outgoing>SequenceFlow_1gkgyo4</bpmn:outgoing>
      <bpmn:script><![CDATA[ -- add script here-- ]]></bpmn:script>
</bpmn:scriptTask>

I have already read through the moddle docs and found out that you can define descriptors but having a little difficulty understanding how it creates it above. I also search the bpmn-js code library and look for a descriptor that defines the existing elements for example scriptask but I can’t find one.

Can someone point me to the right direction what I should do to achieve the above?

Kind Regards,

Davis

2

Hi @sktzoootech,

So what you want to achieve is adding custom element attributes to a ServiceTask, right? Therefore you can have a look inside https://github.com/bpmn-io/bpmn-js-custom-elements-example, and also https://github.com/bpmn-io/bpmn-js-examples/tree/master/properties-panel-extension to get a guideline how to add custom attributes and extensions for the properties panel.

3

Thanks Niklas. I already had a look at those examples but they are when you add a property to an element. Anyways, I will try to understand the code but to be honest I am struggling to figure it out.

4

Did you already start to write some code to achieve what you want to? Can you provide us some of this code? E.g. a custom properties provider, which do you have to build for creating properties panel extensions (like its mentioned in the second example repo above).

Furthermore, do you have some examples inside the existing code base which do you not understand? Maybe we can help you in detail if you provide us some specific aspects.

5

Ok I refactored the https://github.com/bpmn-io/bpmn-js-examples/tree/master/properties-panel-extension to render what I need in terms of UI. screenshot

So my only problem now is how to manipulate the descriptor in magic.json to instead of attaching a property it will attach an element within bpmn:ScriptTask similar to my example above.

The extended script at the moment looks like this:

    <bpmn:scriptTask id="Task_102okuj" magic:spell="input script">
      <bpmn:incoming>SequenceFlow_024aetn</bpmn:incoming>
    </bpmn:scriptTask>

But would like it to look like this:

    <bpmn:scriptTask id="Task_102okuj">
       <bpmn:incoming>SequenceFlow_024aetn</bpmn:incoming>
       <bpmn:script><![CDATA[ -- input script -- ]]></bpmn:script>
    </bpmn:scriptTask>

So I’ve solved the UI problem, I only need to understand how bpmn-moddle works. Is there a guideline on how to create descriptors (magic.json)?

Kind Regards,

Davis

6

I guess our custom-element-example also explains how to deal with moddle extensions. I think best practice would be to implement them as ExtensionElement (as the example reveals), with which your extension will fit the bpmn specification.

We also have a small explanation inside our walkthrough, which might you’ve already seen.

7

hi ,
can you please share the example of accessing to the bpmn:script tag form propertiesPanel in the when bpmn:sriptTask is selected ?
best regards

8

hi niklas ,
there is an exemple how to set and get the extensionElement from properties panel ??
best regards

9

Not from the properties panel, but from the element’s business object. See this for help.

10

i’m working on activiti engine,
so i need to get and set for exemple the conditionExpression which is a child node of sequenceFlow,
so i need to bind modelProperty to the conditionExpression when i’m selecting the sequenceFlow,
best Regards

11

Doesn’t the example I linked given the answers you’re looking for? So given element is a sequence flow element:

// get
const extensionElements = element.businessObject.get('extensionElements');

// [ ... ] do some stuff, e.g. adding properties

// set
modeling.updateProperties(element, { extensionElements: extensionElements });
13

i’m trying to edit the condition expression using the properties panel of an imported diagram

image

14

i solved the issue,
thank you for your support

15

Good news! Maybe you can share your solution so other people can benefit from in the future?

1 Like
16

i used the getter to get the value of the property
this example is for the sender in a mail task with activiti wich is my case
the xml:

    <serviceTask id="mailtask1" name="Mail" activiti:async="true" activiti:type="mail">
      <extensionElements>
        <activiti:field name="subject">
          <activiti:expression><![CDATA[${subject}]]></activiti:expression>
        </activiti:field>
        <activiti:field name="from">
          <activiti:expression><![CDATA[${sender}]]></activiti:expression>
        </activiti:field>
        <activiti:field name="to">
          <activiti:expression><![CDATA[${reciever}]]></activiti:expression>
        </activiti:field>
        <activiti:field name="charset">
          <activiti:string><![CDATA[UTF-8]]></activiti:string>
        </activiti:field>
        <activiti:field name="html">
          <activiti:expression><![CDATA[${content}
${withLink}]]></activiti:expression>
        </activiti:field>
        <activiti:field name="cc">
          <activiti:expression><![CDATA[${cc}]]></activiti:expression>
        </activiti:field>
      </extensionElements>
    </serviceTask>
17

my code :

EntryFactory.textBox({
                 id: 'sender',
                 label: this.translate('sender'),
                 modelProperty: 'sender' ,
                 get: function() {
                   return {
                     sender: element.businessObject.extensionElements.values[1].$children[0].$body
                   };
                 }
               }),```
1 Like
18