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
}
}
]
