Element Templates with Camunda Platform 7

Hello I am trying to include in the Bpmn Modeller element templates. I’ve looked through a lot of old forum posts but haven’t found an example that works and unfortunately most of the GitHub links are dead. My application is running with next.js React. This all works quite well too. Do you have an example to show the element templates in the property panel?

Here in the entry the GitHub link is dead Add element templates

Dependencies:
@bpmn-io/properties-panel”: “^0.23.0”,
“bpmn-font”: “^0.10.0”,
“bpmn-js”: “^10.2.0”,
“bpmn-js-properties-panel”: “^1.9.0”,
“camunda-bpmn-js-behaviors”: “^0.2.2”,
“camunda-bpmn-moddle”: “^7.0.1”,

Code:

import BpmnModeler from "bpmn-js/lib/Modeler";
import {
  BpmnPropertiesPanelModule,
  BpmnPropertiesProviderModule,
  CamundaPlatformPropertiesProviderModule,
} from "bpmn-js-properties-panel";
import camundaModdleDescriptors from "camunda-bpmn-moddle/resources/camunda";
import camundaPlatformBehaviors from "camunda-bpmn-js-behaviors/lib/camunda-platform";
import { useEffect } from "react";
import "bpmn-js-properties-panel/dist/assets/properties-panel.css";
import "bpmn-js/dist/assets/diagram-js.css";
import "bpmn-font/dist/css/bpmn-embedded.css";
import translationsDe from "./de.json";
import translationsEn from "./en.json";
import { useRouter } from "next/router";
import { Box } from "@mui/material";
import templates from "./template/sap.json";

const BpmnIoModeler = (props) => {
  let modeler = null;
  const router = useRouter();
  useEffect(() => {
    document.getElementById("bpmnview").innerHTML = "";
    document.getElementById("propview").innerHTML = "";
    newModeler();
    openDiagram();
  });

  const languageCode = () => {
    return router.locale;
  };

  const customTranslate = (template, replacements) => {
    replacements = replacements || {};

    // Translate
    template =
      languageCode() === "de"
        ? translationsDe[template] || template
        : translationsEn[template] || template;

    // Replace
    return template.replace(/{([^}]+)}/g, function (_, key) {
      return replacements[key] || "{" + key + "}";
    });
  };

  const newModeler = () => {
    const customTranslateModule = {
      translate: ["value", customTranslate],
    };
    modeler = new BpmnModeler({
      container: "#bpmnview",
      keyboard: { bindTo: document },
      additionalModules: [
        BpmnPropertiesPanelModule,
        BpmnPropertiesProviderModule,
        CamundaPlatformPropertiesProviderModule,
        camundaPlatformBehaviors,
        customTranslateModule,
      ],
      moddleExtensions: {
        camunda: camundaModdleDescriptors,
      },
      elementTemplates: templates,
      propertiesPanel: {
        parent: "#propview",
      },
    });
  };

  const openDiagram = async () => {
    try {
      const result = await modeler.importXML(props.bpmnFile);
      const { warnings } = result;
      console.log(warnings);
      const canvas = modeler.get("canvas");
      canvas.zoom("fit-viewport");
    } catch (err) {
      console.log(err.message, err.warnings);
    }
  };

  return (
    <Box sx={props.sx}>
      <Box
        component="div"
        id="bpmnview"
        sx={{
          width: "75%",
          minHeight: "100%",
        }}
      />
      <Box
        component="div"
        id="propview"
        sx={{
          width: "25%",
          minHeight: "100%",
        }}
      />
    </Box>
  );
};
export default BpmnIoModeler;

Element Templates:

[
	{
		"name": "Activate SAP Report",
		"id": "SOME ID 1",
		"appliesTo": [
			"bpmn:ServiceTask",
			"bpmn:Task"
		],
		"properties": [
			{
				"label": "Template",
				"type": "Hidden",
				"value": "VALUE",
				"editable": false,
				"binding": {
					"type": "camunda:property",
					"name": "##TEMPLATE"
				},
				"constraints": {
					"notEmpty": true
				}
			},
			{
				"label": "Object Name",
				"type": "Hidden",
				"value": "VALUE 2",
				"editable": false,
				"binding": {
					"type": "camunda:property",
					"name": "##NAME"
				},
				"constraints": {
					"notEmpty": true
				}
			},
			{
				"label": "SAP Agent",
				"type": "Dropdown",
				"editable": true,
				"binding": {
					"type": "camunda:inputParameter",
					"name": "SAP_AGENT_I"
				},
				"choices": [
        			{ "name": "Bank Analyzer", "value": "SAP_BA_1" },
        			{ "name": "Business Warehouse", "value": "SAP_BW_1" }
      			],
				"constraints": {
					"notEmpty": true
				}
			},
			{
				"label": "SAP Login",
				"type": "Hidden",
				"value": "LOGIN.SAP",
				"editable": false,
				"binding": {
					"type": "camunda:inputParameter",
					"name": "SAP_LOGIN_I"
				},
				"constraints": {
					"notEmpty": true
				}
			},
			{
				"label": "Report",
				"type": "String",
				"editable": true,
				"binding": {
					"type": "camunda:inputParameter",
					"name": "SAP_REPORT_I"
				},
				"constraints": {
					"notEmpty": true
				}
			},
			{
				"label": "Variant",
				"type": "String",
				"editable": true,
				"binding": {
					"type": "camunda:inputParameter",
					"name": "SAP_VARIANT_I"
				},
				"constraints": {
					"notEmpty": true
				}
			}
		],
		"entriesVisible": {
			"documentation" : true,
			"name": true
		}
	},
	{
		"name": "Activate SAP BW Chain",
		"id": "SOME ID 2",
		"appliesTo": [
			"bpmn:ServiceTask",
			"bpmn:Task"
		],
		"properties": [
			{
				"label": "Template",
				"type": "Hidden",
				"value": "VALUE 3",
				"editable": false,
				"binding": {
					"type": "camunda:property",
					"name": "##TEMPLATE"
				},
				"constraints": {
					"notEmpty": true
				}
			},
			{
				"label": "Object Name",
				"type": "Hidden",
				"value": "%(SAP_AGENT_I)_%(BW_CHAIN_ID_I)",
				"editable": false,
				"binding": {
					"type": "camunda:property",
					"name": "##NAME"
				},
				"constraints": {
					"notEmpty": true
				}
			},
			{
				"label": "SAP Agent",
				"type": "Dropdown",
				"editable": true,
				"binding": {
					"type": "camunda:inputParameter",
					"name": "SAP_AGENT_I"
				},
				"choices": [
					{ "name": "Business Warehouse 1", "value": "SAP_BW_1" },
					{ "name": "Business Warehouse 2", "value": "SAP_BW_2" }
				],
				"constraints": {
					"notEmpty": true
				}
			},
			{
				"label": "SAP Login",
				"type": "Hidden",
				"value": "LOGIN.SAP",
				"editable": false,
				"binding": {
					"type": "camunda:inputParameter",
					"name": "SAP_LOGIN_I"
				},
				"constraints": {
					"notEmpty": true
				}
			},
			{
				"label": "Chain ID",
				"type": "String",
				"editable": true,
				"binding": {
					"type": "camunda:inputParameter",
					"name": "BW_CHAIN_ID_I"
				},
				"constraints": {
					"notEmpty": true
				}
			}
		],
		"entriesVisible": {
			"documentation" : true,
			"name": true
		}
	}
]

Hi,

Please ask your question on Camunda 7 forums as this forum is about bpmn.io.

Hello Beatriz Mendes,
I use BPMN IO to model BPMN files and I would like to display element templates. Unfortunately this does not work as I have found in older forum posts. That’s why I asked here in the forum. How do I have to configure BPMN IO to show element templates in the property panel?

The documentation about the configuration of element templates is here Defining templates | Camunda Platform 8 Docs (has also Camunda Platform 7).

As to applying the templates, you can use the config as you are doing. Let me know if this helps.

Hello Beatriz Mendes,

Unfortunately the Camunda documentation cannot help. I want the element templates to be displayed in BPMN IO (as in the picture). Unfortunately it does not work as seen in previous forum post.

element-template

What does not work currently? What is the issue you’re facing? Do you want to have the element template selector?

@Freddy It does work perfectly fine, if properly integrated.

You may check out bpmn-js-connectors-extension > example as a blueprint of a working integration. It does feature Camunda 8 but you may replace zeebe and cloud for camunda and platform to adapt it for Camunda 7.

All components shipped with Camunda Modeling tools are available standalone, too. Just sometimes not sufficiently documented.

On a related note we have the task to build a standalone (core modeling only) example using element templates in our backlog. Just one of the many things in there, unfortunately.

Do I understand that I need to copy the ConnectorsExtension.js file from GitHub?

Because for the code line
modeler.get('connectorsExtension').loadTemplates(TEMPLATES);
I get the following error message

Uncaught Error: No provider for “connectorsExtension”! (Resolving: connectorsExtension)

Do I understand that I need to copy the ConnectorsExtension.js file from GitHub?

You don’t. It is a wrapper handing over actual work to the element templates loader service: Cf. source.

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.