How to add element template to diagram using Modeler?


#1

I have element templates in property panel under cammunda folder when i invoke modeler i dont see it with diagram ?

Below file structure I have element template in property panel in node modules.

propertypanel > lib > provider > camunda > element-templates > javaClass.json

javaClass.json

{
"name":"Java Class",
"id":"javaClass",
"appliesTo":[
"bpmn:ServiceTask"
],
"properties":[
{
"label":"Java Package Name",
"type":"String",
"editable":true,
"binding":{
"type":"property",
"name":"camunda:class"
}
}
]
}

Client.Ctrl.js

 var BpmnViewer = window.BpmnJS;

    var bpmnModeler = new BpmnViewer({
      container: '#canvas',
      propertiesPanel:{
        parent: '#js-properties-panel'
      }
    });

bpmnModeler.get('elementTemplates');

bower.custom.js

var BpmnViewer = require('bpmn-js/lib/Modeler');
var templates = require('resources/element-templates/sample.json');
var camundaModdleDescriptor = require('camunda-bpmn-moddle/resources/camunda');

var elementTemplates = require('bpmn-js-properties-panel/lib/provider/camunda/element-templates');

var additionalModules = [
require('bpmn-js-properties-panel'),

//1. require camunda provider instead of the bpmn one (!)
require('bpmn-js-properties-panel/lib/provider/camunda')
];

BpmnViewer.prototype._modules = BpmnViewer.prototype._modules.concat(additionalModules);

//2. include camunda moddle descriptor
BpmnViewer.prototype._moddleExtensions = { camunda: camundaModdleDescriptor }

BpmnViewer.prototype.elementTemplates = { camunda: elementTemplates }
BpmnViewer.prototype.templates = { camunda: templates }

module.exports = BpmnViewer;

#2

You need to configure the element templates via the elementTemplates=[] property:

var bpmnJS = new BpmnJS({
   ...,
  elementTemplates: [
    {
      "name": "Java Class",
      "id": "javaClass",
      ...
    },
    ...
});

How to add Element templates to bpmn-js bower bundle?
#3

Thank you for your response, I tried your answer but for some reason i do not see element template in property panel , I understand your time is valuable but if you can provide us bower code that we need to generate custom.js for element template we will really appreciate that because we already spent so many days , your 10 mins can save our time.If you can provide example using above code that will be great.