ExtensionElement - Extending UserTask

Hi,

I try to extend UserTask element with extension element that will store some data. Let’s assume that it will be basic email data (receiver, title, body).

I’ve created moddle to cover new tag:

{
  "name": "EXP",
  "uri": "http://example.com/bpmn/exp",
  "prefix": "exp",
  "xml": {
    "tagAlias": "lowerCase"
  },
  "types": [
    {
      "name": "TaskType",
      "extends": [
        "bpmn:UserTask"
      ],
      "properties": [
        {
          "name": "type",
          "isAttr": true,
          "type": "String"
        }
      ]
    },
    {
      "name": "mail",
      "superClass": [ "Element" ],
      "properties": [
        {
          "name": "to",
          "isAttr": true,
          "type": "String"
        },
        {
          "name": "title",
          "isAttr": true,
          "type": "String"
        },
        {
          "name": "body",
          "isBody": true,
          "type": "String"
        }
      ]
    }
  ],
  "enumerations": [],
  "associations": []
}

And I wanted to extend properties panel, so that it will be possible to type data.

 const getValue = function(businessObject, property) {
        return function(element) {
            let extensions = extHelper.getExtensionElements(businessObject, 'exp:mail');
            let returnObject = {};
            if (extensions) {
                returnObject[property] = extensions[0][property];
            } else {
                returnObject[property] = '';
            }
            return returnObject;
        };
    };

    const setValue = function(businessObject, property) {
        return function(element, values) {
            let newMailElement;
            if(!businessObject.get('extensionElements') || !extHelper.getExtensionElements(businessObject, 'exp:mail')) {
                console.log('new extension element ');
                newMailElement = elementHelper.createElement('exp:mail', values, businessObject, bpmnFactory);
                let extensionAddResult = extHelper.addEntry(businessObject, element, newMailElement, bpmnFactory);
                return cmdHelper.updateBusinessObject(element, getBusinessObject(element), extensionAddResult);
            } else {
                let extendionElements = extHelper.getExtensionElements(businessObject, 'exp:mail');
                extendionElements[0][property] = values[property];
                return cmdHelper.updateBusinessObject(element, getBusinessObject(element),  extendionElements);
                //return cmdHelper.updateProperties(extendionElements[0],values);
                // console.log('updating '+extendionElements);
                // return cmdHelper.updateProperties(extendionElements[0],values);
                // return cmdHelper.updateBusinessObject(element, extendionElements[0], values);
                // extendionElements[0][property] = values[property];
                // return cmdHelper.updateBusinessObject(element, getBusinessObject(element),  extendionElements);
            }

        };
    };

    //-------------------------------------------------------------
	// Rest of fields are set the same way
    const elementMailTo = entryFactory.textField(translate, {
        id: 'to',
        label: translate('Receiver'),
        modelProperty: 'to',
        set: setValue(getBusinessObject(element),'to'),
        get: getValue(getBusinessObject(element),'to')
    });
    if (is(element, 'bpmn:UserTask')) {
        group.entries.push(elementMailTo);
    }

And in properties provider:

 var mailGroup = {
        id: 'mail',
        label: 'Email details',
        entries: []
    };
    mailSendProps(eventGroup, element, bpmnFactory,translate);

My problem is that I cannot get my extension data to be loaded from file. So, I can model a new diagram, save it (everything fine till this moment, there is an extension element in XML) but when I try to load then there is no such data in the properties panel.

I would be grateful for any kind of help in this.

Thanks for giving those details! Can you maybe share your extension inside a CodeSandbox?. It would help us a lot to reproduce your problem.

Here You go: https://codesandbox.io/s/billowing-framework-7lgw6

I have found solution:

Tags should be with upper case. In this case “Mail” instead of “mail”

1 Like