Add Message and MessageEventDefinition without the panel

Developers
1

Hi, I am trying to create a minimalistic properties editor, so I’m not using the bpmn-js-properties-panel package.

The goal is to get something like this, not only for start nut for all kinds of message catch elements:

  <bpmn:process id="messageTrest" name="Message Signal Test" isExecutable="true">
    <bpmn:startEvent id="StartEvent_1">
      <bpmn:outgoing>SequenceFlow_1cg4qub</bpmn:outgoing>
      <bpmn:messageEventDefinition messageRef="Message_1enp267" />
    </bpmn:startEvent>
   ....
    </bpmn:process>
  <bpmn:message id="Message_1enp267" name="ytytyt" />
  <bpmn:message id="Message_1mstchl" name="uuuuu" />
  <bpmn:message id="Message_1rfuhrn" name="oiiii" />
  <bpmndi:BPMNDiagram id="BPMNDiagram_1">.....

Here’s what I am doing after a couple of days reading google and these sites:

               save: function () {
                    var val = this.field.val();
                    if (!val)
                        return;

                    var definitions = this.canvas.getRootElement().businessObject.$parent;
                    var rootElements = definitions.rootElements;
                    // search for message with the same name:
                    var messages = getAllSignalsAndMessages(definitions).messages;
                    var msg;
                    for(var i in messages){
                        if(messages[i].name===val){
                            msg = messages[i];
                        }
                    }
                    if(!msg){
                        msg = this.bpmnFactory.create("bpmn:Message");
                        //this.modeling.updateProperties(msg, {name: val});
                        msg.name = val;
                        rootElements.push(msg);
                    }
                    
                    // totally replacing the 'eventDefinitions'.
                    // tried to modify the existing empty MessageEventDefinition - no go
                    var eventDefinition = this.bpmnFactory._model.create('bpmn:MessageEventDefinition');
                    this.element.businessObject.eventDefinitions = [eventDefinition];
                    eventDefinition.$parent = this.element.businessObject;
                    
                    //this.modeling.updateProperties(eventDefinition, {mesageRef: msg.id});
                    eventDefinition.messageRef = msg.id;
                    
                }

I don’t know but whatever I do I can’t succeed. The code above can’t save the messageRef: while in the Chrome debugger I can see the correct definition, the xml states ‘undefined’ instead of the message reference:

     <bpmn:messageEventDefinition messageRef="undefined" />

If I uncomment and try to employ the ‘modelling’ tool, it fails somewhere inside of it trying to access the businessObject of the newly created elements (both of them), in this particular function:

function getProperties(businessObject, properties) {
  var propertyNames = keys(properties);

  return reduce(propertyNames, function(result, key) {

    // handle DI seperately
    if (key !== DI) {
      result[key] = businessObject.get(key);
    } else {
      result[key] = getDiProperties(businessObject.di, keys(properties.di));
    }

    return result;
  }, {});
}

Thanks!
Fyodor

1 Like
2

In our toolkits we work directly on the object graph, rather than the plain IDs you see in the underlying XML.

Because of that you must set the messageRef to the actual bpmn:Message element:

...
eventDefinition.messageRef = msg;
1 Like
3

Wow, thanks, it works.

Look what I’ve done so far:

messages

4

Looks great so far. Would you like to share it as an example? If so, send us a link :wink:.

1 Like
5

Oh thank you. Would love to but not now, as I’m just prototyping and my shameful code has to be reviewed by an experienced js developer before going public =) and this lacks the usage of ‘commands’ and the undo/redo feature…

1 Like
6

You got pretty far already, if you thought about commands and undo/redo, too.

Keep it up :heart:.

1 Like