Override the commandStack.execute('elements.delete')

Developers Modeler
1

Hello
I have a requirement in order to override the removeElements function of element deletion features to put some validation rules towards the database prior to handle the deletion of the element.

NB: I need th handle the pre execution of the remove element by handling it in the Angular js controller in which i’m injecting the bpmn js component.

Modeling.prototype.removeElements = function(elements) {
  var context = {
    elements: elements
  };

  this._commandStack.execute('elements.delete', context);
};

Any thoughts.

2

For this use-case we have the concept of rules. There’s no need to override Modeling#removeElements. Simply add a rule for this operation. We have an example project that you can use as a starting point.

1 Like
3

Thank you,
Is it possible to add the rule outside the custom rules provider , i mean include it within my Angular JS controller as attaching the event bus or command stack in oorder to put my validation logic?

4

No, that’s not possible. But you can simply add your rule provider when creating the bpmn-js instance:

var modeler = new BpmnJS({
  additionalModules: [
    myRuleProvider
  ]
});
1 Like
5

Can we make REST call from RuleProvider to put some validation logic?
If yes, what is the best npm module that integrate with bpmn js?

6

It’s not possible to make that call when checking the rule since that call is asynchronous. What you could do is calling your REST API after an element has changed. Then you could disallow deleting elements by default and only after an element has been been validated you check if the response was positive or negative.

1 Like
7

Thank you again,

Is there any simple code snippet?

:wink:

8

No, but I can give you a few hints.

In general you can listen for any change events indicating that an element has changed. This is where you can hook in and call your REST API:

var checkedElements = {};

eventBus.on('element.changed', function(event) {
  var element = event.element;

  // remove element from your map of elements that you've checked since it has been changed
  if (checkedElements[element.id]) {
    delete checkedElements[element.id];
  }

  // call your REST API
  callRestApi(element, function(response) {

    // save the response
    checkedElements[element.id] = response;
  });
});

this.addRule('elements.delete', function(event) {
  /* check for each element if there is a saved response
   * otherwise reject since you can't tell if removing element is allowed
   */
});

I haven’t tested this code but something like this could work. I’ve ignored a few things like the initial import but this should get you started.

1 Like
9

Thanks for your help, I will keep you in touch.

10

As far as i understand, this variable should be shared between the element.changed event (in Angular js controller scope ) and the elements.delete rule (in rule provider scope), what is the best way to implement that?

11

Either put all that logic into one module or create a way that the module providing the rule and the module responsible for calling the REST API can communicate with each other. You can inject modules into each other or communicate using events.

1 Like