Save bpmn-diagram with custom properties

Developers
1

Hello,
I defined some properties in a json-file, which are attached by the context-menu.
But when I save and reload the diagram, the properties are not saved.

This is how the properties will be set. The alert command signals, that the properties are set correctly

   bpmnModeler.on('element.contextmenu', (event) => {
      event.originalEvent.preventDefault();
      event.originalEvent.stopPropagation();

      ({ element } = event);
    
      // ignore root element
      if (!element.parent) {
        return;
      }
      const businessObject = getBusinessObject(element);
      const { bpmnType } = businessObject;
      let { BusinessContext } = businessObject;
      let { TaskId } = businessObject;
      if(bpmnType == "bpmn:SemanticTask") {
        BusinessContext = bc.value;
        TaskId = ti.value;
        alert(BusinessContext);
        alert(TaskId);
        ST.classList.remove('hidden');
      }
    });

Furthermore I use a submit-button which should actually save the properties with serialize-function:

   formST.addEventListener('submit', (event) => {
      event.preventDefault();
      event.stopPropagation();
      bpmnModeler.on('comments.updated', serialize);
      bpmnModeler.on('commandStack.changed', serialize);
      bpmnModeler.on('element.contextmenu', serialize);

      bpmnModeler.on('canvas.click', function() {
        bpmnModeler.get('comments').collapseAll();
      });
      ST.classList.add('hidden');
    });

and finally, my save-Function:

var $download = $('[data-download]');

function serialize() {

  bpmnModeler.saveXML(function(err, xml) {

    var encodedData = err ? '' : encodeURIComponent(xml);

    $download.attr({
      'href': encodedData ? 'data:application/bpmn20-xml;charset=UTF-8,' + encodedData : '',
    });

    if (err) {
      console.log('failed to serialize BPMN 2.0 xml', err);
    }
  });
}

As I mentioned in the beginning, when I click on my Save-Button: The diagram is downloaded without the properties, which were set before over context-menu.
Thanks very much in advance!

2

Sounds like you’re doing custom properties wrong. Have you had a look at this example: https://github.com/bpmn-io/bpmn-js-example-model-extension

3

After comparing the example above, I could note that I did not define “superClass”: [ “Element” ] In my json-file. Could That be the reason?

4

How am I supposed to tell if you don’t share the JSON file?

1 Like
5

the json-file looks as this: Sorry forgot to share

{
    "name": "AppID",
    "prefix": "ST",
    "uri": "http://appID",
    "xml": {
      "tagAlias": "lowerCase"
    },
    "associations": ["Both"], 
    "types": [
      {
        "name": "SemantikTask",
         "superClass": [
          "bpmn:Artifact"
        ],
        "extends": [
          "bpmn:Task"
        ],
        "properties": [
          {
              "name": "BusinessContext",
              "isAttr": true,
              "type": "String"
          },
          {
              "name": "TaskId",
              "isAttr": true,
              "type": "String"
          },
          {
              "name": "bpmnType",
              "isAttr": true,
              "type": "String"
          }
        ]
      }
    ]
  }
6

and the last property TaskId is saved with diagram, but that one is added over CustomPalette and looks as this. It’s strange because this works and the other not

  function createSemanticTask(type, bpmnType) {
      return function(event) {
        const businessObject = bpmnFactory.create(type);
        businessObject.bpmnType = bpmnType;

        const shape = elementFactory.createShape({
          type: type,
          businessObject: businessObject
        });
        create.start(event, shape);
      }
    }
7

I was able to solve the problem. In my extension there was
app: SemanticTaskExtension and I had to change it to:
ST: SemanticTaskExtension

and I forgot to set updateProperties - function, which looks as this now:

modeling.updateProperties(element, {
        BusinessContext: bc.value,
        TaskId: ti.value
      });