Handle several element-templates

Hey everyone,

i am working on a bpmn-js-plugin and i went through some of the examples, but now i’m a little confused about a few things and maybe someone of you can give me a hint.

Here is what i want to do:

1. create some element-templates (Service-Task with Connector and some custom-properties)

My BPMN-Process will consist of serveral element-templates with different payloads. The payload of a template has to be build from the user-input of the custom-properties. The templates differ in their properties so i need do create more than one template (i guess) but i don’t want to define the connector-scope for every template (would not be easy to maintain, cause there are a few).

How can i solve this? Maybe programmatically?

I also tried the custom-meta-model example to create a custom-task, but is it possible to build this as a bpmn-js-plugin?

2) add the element-template to the palette

I created a PaletteProvider and add a Service-Task to the Palette. But how can i add a element-template to the palette?

3) show some of the custom-properties as overlays

How can i get the properties of an element-template?

Thank you!

  1. If you’re speaking of a JSON file with a couple of templates you want to manage, you’d have to take care of that yourself. There is no tool for managing templates. You can indeed create and add new templates on the fly. A Camunda Modeler Plugin can access the element templates like any other component:
function myPlugin(elementTemplates) {
  var myTemplate = {
    // ...

  var existingTemplates = elementTemplates.getAll();

  elementTemplates.set(existingTemplates.concat([ myTemplate ]));

myPlugin.$inject = [ 'elementTemplates' ];

At the moment custom models can not be added using a Camunda Modeler plugin. You’d have to build your own Camunda Modeler that includes the custom model.

  1. Extending the palette on the fly is possible but you’d need to hack it.

  2. For getting the porperties of an element template see 1., showing properties of elements as overlays is pretty easy, see example.

Thank you for your response!

I’ll give it a try!