How to add custom service tasks to modeler tool palette?

Hi all,

I have a requirement to add a pre-configured service task into the tool palette which can drag and drop to the canvas and this service task should have a connector that connects to a Rest API as well. Please see the attached screenshot.

Bmpn CHanges

How can i achieve this? please share the sample if you found it.

Thanks.

Hi,

I think Element Templates solve a similar use case. Maybe you can use those?

You can also expand the pallet in a plugin. See this part of the custom elements example on how this can look like.

Cheers

Hi @Martin ,

I was able to expand the pallet, Now it’s okay so i want to provide HTTP-connector configs via properties to a given service task. ANy suggestions on that?

Thanks,

Hi @PUBG_Noob ,

you can pass a business Object when creating the shape using the element factory. You can try to add the attributes from your template to the element you create.

@Martin

Thanks for the reply, I was able to add a name to that like businessObject.name = name;. but if i want to add id, http-connector how can we?

I tried this but not worked.

businessObject.id = id;

@Martin,

Another thing is how can i pass implementation data like HTTP-connector attributes?

Thanks.

Hi @PUBG_Noob,

As I understand it, the businessObject is a ModdleElement which can be created with the BpmnFactory.

The connector should be an extension element, so it can be found in businessObject.extensionElements.values.

You can also check how the Business Object of an existing Element with a connector looks like and try to replicate that.

Hi @Martin.

Nope, What I am asking is in the screenshot I am attaching herewith. Here I was able to set name and ID with businessObject. likewise can implement this implementation section and connectors?

As @Martin revealed, that can be done via elementFactory & bpmnFactory. The existing properties panel implementation is doing the same under the hood.

So something like

const canvas = modeler.get("canvas");
const elementFactory = modeler.get("elementFactory");
const bpmnFactory = modeler.get("bpmnFactory");
const modeling = modeler.get("modeling");

const serviceTask = elementFactory.createShape({
  type: "bpmn:ServiceTask"
});

const connector = bpmnFactory.create("camunda:Connector", {
  connectorId: "foo"
});

const extensionElements = bpmnFactory.create("bpmn:ExtensionElements");

extensionElements.set("values", [ connector ]);

serviceTask.businessObject.set("extensionElements", extensionElements);

modeling.createShape(
  serviceTask,
  { x: 100, y: 100 },
  canvas.getRootElement()
);

Source: create camunda connector - CodeSandbox