Is it possible to have properties auto generated when a new Task is added to the modeler?

I’m sorry if this question has been asked before but I’ve been combing through the examples and didn’t seen anything like this. Basically I need to have custom properties added to the task as soon as I drop a new element onto the Modeler.

I’ve tried hooking into the eventBus using the shape.added event, but for some reason it doesn’t not allow me any access to the modeler.

this.bpmnModeler.modeler.get('eventBus').on('shape.added', 999999, function (event) {
  if (event.element.type === 'bpmn:ServiceTask') {
    console.log(event.element);
  }

Basically I need a what to added some properties to the model as extensionElements but I can’t seem to get an instance of the modeler when the shape.added event is fired. Is there another event that would allow me access in the way I need while still allowing me to listen for this event.

Thanks so much in advance.

Hi @showcasefloyd ,

what is your use-case for adding custom properties? E.g., if you only want to add default values for the execution, Element Templates might be the way to go.

I can’t seem to get an instance of the modeler when the shape.added event is fired

Can you show where this is happening? Are you adding the code as a bpmn-js plugin?
If you need to do it programmatically, I would suggest writing a plugin and using the Command Interceptor + modeling API to add your attributes. This ensures that they are written to the command stack and can be removed via undo/redo. Example usage here.

Cheers

Hey Martin,

My use case is odd but I’ll try to explain. I need a way to differentiate between two different types of bpmn:ServiceTask that we have set up in the Pallet as custom actions. When the user selects one of the two actions I need a way to automatically include some extra properties into the model for this action so I can tell which ServiceTask is which.

The way I have it set up as now is by creating a CustomPaletteProvider and then including two different options for the user to select.

'create.Task2': createAction(
  'bpmn:ServiceTask',
  'activity',
  'gds-icon-24-settings-mono',
    translate('ServiceTask 2')
),

'create.Task1': createAction(
  'bpmn:ServiceTask',
  'activity',
  'bpmn-icon-send',
  translate('ServiceTask 1')
),

I want to be able to tell right away if the user has selected “ServiceTask 1” or “ServiceTask 2” from the Pallet. Right now I have to not found a clean way to do this which out a bunch of odd hacks and if statements.

What I was trying to was todo was alter the properties of the Task using the shape.added event on the fly.

It looks like this but does not work.

  this.bpmnModeler.modeler.get('eventBus').on('shape.added', 999999, async 
   function (event) {
      if (event.element.type === 'bpmn:ServiceTask') {

        const camundaProperties: ExtensionProperties[] = [];
        camundaProperties.push({name: 'ServiceTask2', value: true});

        const modeling = await modeler.modeler.get('modeling');
        camundaProperties.forEach((property) => {
          modeling.updateProperties(event.element, {
            [property.name]: property.value,
          });
        });

      }
    });

My suggestion: Create these service tasks with custom properties right away. No need to add these properties through an event listener (which also means you can undo adding the properties). If you look at how the palette works (cf. bpmn-js/PaletteProvider.js at develop · bpmn-io/bpmn-js · GitHub) you can see that you just need to add your custom properties when calling elementFactory.createShape.

2 Likes

Hi @showcasefloyd,

I’ve created an example a few years ago: GitHub - ingorichtsmeier/camunda-modeler-plugin-connected-elements: Example of a modeller plugin to add some connected elements by dragging them as a single symbol from the palette.

You can drag many connected bpmn elements with a single drag from the palette.

Disclaimer: I haven’t tried it on the latest modeler version.

Hope this helps, Ingo

1 Like