Camunda-modeler: How to add element template to custom bower bpmn js project ?

[Syedgit]

we are trying to add element template into below custom bower project using code from here https://forum.bpmn.io/t/element-templates-usage-in-property-panel/809/3 we could not achieve element template with this documentation. If we can get some detail help on this issue it would be great ?

index.js

`var BpmnViewer = require('bpmn-js/lib/Modeler');
var camundaModdleDescriptor = require('camunda-bpmn-moddle/resources/camunda');
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 }
module.exports = BpmnViewer;`

[nikku]

You cannot use element templates with the BpmnViewer (it is a diagram viewer). Use the BpmnModeler instead.

If you got more questions, please open a respective topic in the bpmn.io forum.

[Syedgit]

so what changes i have to make to incorporate BpmnModeler ?

[nikku]

Just saw you were actually using the Modeler in the example code you provided.

How do you bootstrap the modeler in your application?

[Syedgit]

we have modeler/ properties panel as a bower component which we attach to index.html file in an angular project.Here how we initiate modeler from angular controller.

modeler.controller.js 

var BpmnViewer = window.BpmnJS;

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

[nikku]

var bpmnJS = new BpmnJS({
  container: $el,
  additionalModules: [
    propertiesPanelModule,
    propertiesProviderModule
  ],
  elementTemplates: elementTemplates
  ...
});

You need to provide the template descriptors as an [] during modeler instantiation.

We will add a more detailed example show-casing this via bpmn-io/bpmn-js-example#32.

[Syedgit]

So this is piece of code should be added to bower-viewer-custom.js or replacing with angular controller , How we are refering container: $el,?

[zengyanyu]

leave a comment

[preetvyas]

i follow this process
this.modeler = new Modeler({
container: '#canvas',
width: '100%',
height: '600px',
propertiesPanel: {
parent: '#properties'
},
additionalModules: [
propertiesPanelModule,
propertiesProviderModule,
ReplaceMenuProvider,
customTranslateModule
],
elementTemplates:botdetails.botdetails,
moddleExtensions: {
camunda: camunda.camunda
}
});
and i am able to set element templates but after set element templates when we click on task and based on that task need filter accordingly so element templates will display
anybody tell me how can i acheive this thing