Element templates for Camunda 7

[aman-godara-ria]

I am using create-append-anything module to add the … feature to palette. I was successfully able to add new elements in camunda 8 (Zeebe schema) only to realise that I was supposed to work with camunda 7.

On one of the forum it is suggested to use camunda instead of zeebe and platform instead of cloud to adapt it to camunda 7. But I couldn’t find what platform is.
Here is the link to that forum: Element Templates with Camunda Platform 7 - #7 by nikku.
@nikku

Here is the what my code snippet for camunda 8 looks like:

[beatriz.mendes]

What you would like to include is CamundaPlatformPropertiesProviderModule and ElementTemplatesPropertiesProviderModule instead of ZeebePropertiesProviderModule and CloudElementTemplatesPropertiesProviderModule.

[nikku]

@aman-godara-ria

I am using create-append-anything module to add the … feature to palette. I was successfully able to add new elements in camunda 8 (Zeebe schema) only to realise that I was supposed to work with camunda 7.

Camunda 7 element templates have limited create/append anything support. However you cannot “create” custom elements in Camunda 7. in C7 elements must be upgraded via the properties panel the properties panel.

[aman-godara-ria]

can I continue to use ZeebeModdle instead of CamundaModdle for camunda 7?

I am feeding element templates through a .json file, and since we are using camunda 7.17 I will have to use: "$schema": "https://unpkg.com/@camunda/element-templates-json-schema/resources/schema.json" as the schema for .json file.

Will ZeebeModdle be able to read this schema?

PS: I am new to bpmn and camunda, If the question doesn’t make sense, feel free to correct.

[aman-godara-ria]

will I be able to “create” custom elements in C7 after upgrading them through the properties-panel?
We are using Camunda 7.17. Also will be very helpful, if it doesn’t take long, can you attach a link on how to upgrade elements via the properties-panel?

If create-append-anything library is not the best to create custom element in C7, what other libraries do you suggest I can use? Will I have to use bpmn-js-connectors-extension library for C7.

[nikku]

@aman-godara-ria

can I continue to use ZeebeModdle instead of CamundaModdle for camunda 7?

You have to use CamundaModdle to make bpmn-js aware of Camunda 7 extension elements. Also it is fundamental to decide on one element template provider, either Camunda 7 or Camunda 8 (Element templates for Camunda 7 - #2 by beatriz.mendes).

If create-append-anything library is not the best to create custom element in C7, what other libraries do you suggest I can use?

You upgrade from stock BPMN elements in C7 via the properties panel. I suggest you to checkout this test case for an end-to-end setup.

---

A screen recording of C7 element templates in action, based of this test case.

[nikku]

We have Document how to use element templates · Issue #166 · bpmn-io/bpmn-js-examples · GitHub open to provide a more accessible example; we did not get to it yet, unfortunately.

[spotifmania]

I’m sorry, but as of my knowledge cutoff in September 2021, Camunda 7 does not have built-in support for element templates like Camunda Platform 8 (previously known as Zeebe). Element templates were introduced in Camunda Platform 8 to provide a way to extend the palette with custom elements.

In Camunda 7, the palette customization is done through the BPMN 2.0 XML. You can define your own custom elements by extending the BPMN 2.0 XML schema and referencing the custom elements in your BPMN files.

If you need to work with Camunda 7 and add custom elements to the palette, you would have to explore alternative approaches like creating custom modeler plugins or modifying the existing Camunda Modeler source code.

Please note that my information might be outdated, and there may have been updates or community extensions developed since my last knowledge update. I recommend consulting the official Camunda documentation, community forums, or reaching out to the Camunda community for the most up-to-date information and solutions related to extending the palette in Camunda 7.

[nikku]

@spotifmania

I’m sorry, but as of my knowledge cutoff in September 2021, Camunda 7 does not have built-in support for element templates like Camunda Platform 8 (previously known as Zeebe). Element templates were introduced in Camunda Platform 8 to provide a way to extend the palette with custom elements.

Element templates are available in C7, too. We introduced them in 2016, and we expanded them greatly for both C7 and C8 in 2022.

[aman-godara-ria]

I don’t know what’s happening, this is what my file looks like now.

import $ from 'jquery';
import BpmnModeler from 'bpmn-js/lib/Modeler';
import {
    BpmnPropertiesPanelModule,
    BpmnPropertiesProviderModule,
    CamundaPlatformPropertiesProviderModule,
    // CloudElementTemplatesPropertiesProviderModule,
    ElementTemplatesPropertiesProviderModule,
    // ZeebePropertiesProviderModule,
} from 'bpmn-js-properties-panel';
import CamundaModdle from 'camunda-bpmn-moddle/resources/camunda.json';
import {
    CreateAppendAnythingModule,
    CreateAppendElementTemplatesModule,
} from 'bpmn-js-create-append-anything';

import CamundaBehaviorsModule from 'camunda-bpmn-js-behaviors/lib/camunda-platform';
import ElementTemplateChooserModule from '@bpmn-io/element-template-chooser';
// import ZeebeModdle from 'zeebe-bpmn-moddle/resources/zeebe.json';

import '@bpmn-io/element-template-chooser/dist/element-template-chooser.css';

const elementTemplatesContext = require.context('./.camunda/element-templates/', false, /\.json$/);

const elementTemplates = elementTemplatesContext
    .keys()
    .map(key => elementTemplatesContext(key))
    .flat();

const canvas = $('#js-canvas');
const bpmnModelerInstance = new BpmnModeler({
    container: canvas,
    propertiesPanel: {
        parent: '#js-properties-panel',
    },
    additionalModules: [
        BpmnPropertiesPanelModule,
        BpmnPropertiesProviderModule,
        CamundaPlatformPropertiesProviderModule,
        // ZeebePropertiesProviderModule,
        CreateAppendAnythingModule,
        CreateAppendElementTemplatesModule,
        ElementTemplatesPropertiesProviderModule,
        // CloudElementTemplatesPropertiesProviderModule,
        ElementTemplateChooserModule,
        CamundaBehaviorsModule,
    ],
    moddleExtensions: {
        camunda: CamundaModdle,
        // zeebe: ZeebeModdle,
    },
    elementTemplates,
});

// subscribe to template validation errors to debug
const eventBus = bpmnModelerInstance.get('eventBus');
eventBus.on('elementTemplates.errors', ({ errors }) => {
    console.error('template validation errors:', errors);
});

export default bpmnModelerInstance;

I am able to see the template in palette, but when I click on “Mail Task” (my custom element) it gives me an error

my .json file has this:

{
        "$schema": "https://unpkg.com/@camunda/element-templates-json-schema/resources/schema.json",
        "name": "Mail Task",
        "id": "com.camunda.example.MailTask",
        "appliesTo": ["bpmn:ServiceTask"],
        "category": {
            "id": "distribution",
            "name": "Distribution"
        },
        "properties": []
    }

[beatriz.mendes]

@nikku

Camunda 7 element templates have limited create/append anything support

This is where this comes in. Create/append anything uses the elementTemplates.createElement API for creating new elements from templates, which is only implemented for zeebe templates.

[aman-godara-ria]

ohh! means a dead-end for me then. Sorry, I didn’t quite understand that comment, let me confirm what I have understood.

I cannot use create-append-anything library with camunda 7
The only way to create custom elements in Camunda 7 is to upgrade an existing task using the properties panel (for which the recording is given above)

Let me know if I have misunderstood something.

[beatriz.mendes]

Your understanding is correct. bpmn-js-create-append-anything can be used for Camunda 7 but without the element templates module, which seems to be your current use case.

You may use the properties panel for applying element templates.