Properties panel and implementation/operation for servicetask


Why it’s not possible to edit the implementation/operation definition for a service task in the property panel?
This properties are official possible and also defined in the bpmn-moddle:

And i don’t want the camunda provider, because camunda are custom and not offical bpmn2 properties.

The reason is, I must define the system operation in the service task do know in the process engine what is to do.

In Eclipse it is normal and possible to edit this properties.
Or if i understand the behavior/goal of bmpn-js wrong?


1 Like


It seems we haven’t implemented that property in the properties panel. If you need it in your project, you can create an extension which would add this. This example should be a good starting point.



1 Like

Thanks, for the reply.

Whats the reason, that this properties are not implement?

Add the moment I play with the example you say. But I dont get it working (yarn and webpack).
No tab, no error, but the js files are loaded, but no function call to MagicPropertiesProvider.

1 Like

Okay, now the example running and I tried to implement properties for implementation/operation.
The implementation is okay, but with the operation I have a problem to set it.

I try to implement the operation passed on this code:

The result you can see here:

What I made wrong?


1 Like

I think you already mentioned the correct example. When you have a look a the setter, you have to ensure to set the full object as operationRef, not only the string.

Here is the setter of the example you’ve mentioned: bpmn-js-properties-panel/CompensateEventDefinition.js at master · bpmn-io/bpmn-js-properties-panel · GitHub.

Using the elementRegistry won’t work for operations I guess (because they aren’t shapes on the canvas), so you’ll have to get the list of operations in another way.

1 Like

Thanks for your reply.

I will check it and try.
If I get a working example, I will update the codesandbox for others.


Note that the operations have to be present in the XML to use them as reference. Example:

<bpmn:definitions ... >
    <bpmn:operation name="A" />
    <bpmn:operation name="B" />
    <bpmn:operation name="C" />
    <bpmn:operation name="D" />

Via the definitions root element, it should be possible to get all the operations:

function getInterfaces(element) {
  const rootElements = element.get("rootElements") || [];
  return filter(rootElements, (element) => is(element, "bpmn:Interface"));

function getOperations(element) {
  const interfaces = getInterfaces(element);
  return flatten(map(interfaces, (i) => i.get("operations")));

Example sandbox: get operations - CodeSandbox

Yes, I know that the operation must present in the XML.
And this to helper was perfect as base

Now I have a running extension that supports “operationRef” in that scope I needed.

Here the sandbox:

One last question, im my project, I has no static operation selects. I obtain it via an ajax call.
At the moment, the url is hardcoded. How can I pass this as an configuration from the point I initiales the modeler with the new module?

Greets and a nice weekend

1 Like

It’s possible to provide custom configuration via the config

const modeler = new Modeler({
  custom: {
    URL: ""

You can then simply access it in your custom extensions via config.custom

export default function CustomService(config) {
  const { URL } = config;

  console.log("url", URL);

CustomService.$inject = [ "config.custom" ];

Source: modeler options - CodeSandbox

1 Like