Update custom BPMN meta data so it can be undone via CTRL+Z

Developers
1

Hi there!

As the topic says, I’m wondering if it is possible to set the element’s custom meta in the context of a controlled diagram update, so you can undo that action through a ctrl + z.

Thanks!
Cristian

2

Yes, it is possible. Check out my previous post on the topic.

3

Hi Nikku, can I get extra help here ? =)

This is how we are adding the custom meta today:

businessObject.extensionElements = moddle.create(‘bpmn:ExtensionElements’);
businessObject.extensionElements.get(‘values’).push(ourMetaObject);

And this is how we are updating the element label in the context of a update

modeler.invoke(function(elementRegistry, modeling) {
modeling.updateLabel(element,args.name);
});

I do not realize how to combine this 2 for updating the custom meta with the “modeling”.

Thanks!
Cristian

4

You would need to dig deeper into the way we handle do/undo. Essentially you’d need to add a custom modeling action that groups the two things together.

Side note: This is advanced internal stuff and may be subject to change in the future.

Step 1: Create a CommandHandler

You would need to create a custom command handler.

function CustomCommand(modeling) {
  
  this.preExecute = function(context) {
    // you are able to invoke other actions here
    // this way the actions will automatically be grouped (they are 
    // executed in the same modeling operation so to say)
    modeling.updateLabel(context.element, context.newLabel);
  };

  this.execute = function(context) {
    var businessObject = context.businessObject;

    // this is where your actual meta-model update needs to be implemented
    businessObject.extensionElements = moddle.create('bpmn:ExtensionElements');
    businessObject.extensionElements.get('values').push(context.ourMetaObject);
  };

  this.revert = function() {
    // this is where you'd need to revert the changes done in #execute()
  };
}

Step 2: Register it with the the application

Register the command handler with the commandStack so it knows it is there.

commandStack.registerHandler('customCommand', CustomCommand);

Step 3: Use it

You may now execute the command. The command stack will make sure both editing actions are remembered and executed/undone together.

commandStack.execute('customCommand', {
  businessObject: someBusinessObject,
  newLabel: 'FOOBAR'
});
1 Like
5

Awesome!
You guys rock!

6

I’m stuck with in the line commandStack.registerHandler(‘customCommand’, CustomCommand);
what is the commandStack and how to i define it…??