Bpmn-js: UpdatePropertiesHandler not updating the task label in the UI when changing name

Developers Modeler
1

The modeling module exports an updateProperties method. I want to extend this method to do some external changes while not littering the commandStack. I found the handler UpdatePropertiesHandler, and calling this directly seems to work fine for SequenceFlow elements, but on task elements the UI doesn’t update to reflect a name change. I tried digging around in the code but I can’t find anything else.

I made a codesandbox to show you how I extended this method, but here’s the general gist:

I registered a handler on the commandstack with the following execute and revert:

EditHandler.prototype.execute = function(context) {
  // Do external stuff
  console.log("executing edit");

  // Run super's execute
  UpdatePropertiesHandler.prototype.execute.call(this, context);
};

EditHandler.prototype.revert = function(context) {
  // Revert external stuff
  console.log("reverting edit");

  // Run super's revert
  UpdatePropertiesHandler.prototype.revert.call(this, context);
};

Then I later execute it like so (with element being the bpmn:Task element)

commandStack.execute("flow-panel.name-edit", {
  element,
  {name: "New Name", id: "new-name"},
});

This doesn’t update the label in the UI in contrast with the following method:

modeling.updateProperties(element, {name: "New Name", id: "new-name"});

Any help is appreciated!

2

The reason that the diagram is not updated is that you don’t return the return value of the original execute function. It actually returns a list of elements that have changed and need to be re-rendered. There is actually a built-in solution for your use case and it’s called command interceptor. It allows you to execute additional code when a command is executed and even execute additional commands that do not result in an additional command on the command stack. In bpmn-js we call this behavior and you can find a lot of these behaviors in the library: https://github.com/bpmn-io/bpmn-js/tree/develop/lib/features/modeling/behavior

Here’s an example behavior that changes a shape’s name to Foo after it was created: https://codesandbox.io/s/bpmn-js-commandinterceptor-tw1q8?file=/src/index.js

As you can see you can still undo creating the shape in one step even though another command was executed afterwards.

My advise: Do not change the existing command handlers. As you can see this can lead to unexpected problems and in most cases there’s a better solution.