Element templates usage in property panel

Developers Modeler
1

Hi,

I would like to use element templates feature in the property-panel example project.
How can I achieve this? Is there any documentation or example project how can it be implemented?

Thank you for your help in advance.

Answer

You need to provide the templates as JSON to the properties panel. See this answer for details.

1 Like
2

Hi there,

I found code for it in bpm-js-properties-panel > lib > provider > camunda > element-templates

But I don’t know where to put the templates, to activate the relevant input field in the properties panel. I put my template as MailTask.json in resources/element-templates but nothing happened.

Thank you for your help.

3

I found the solution here: https://github.com/camunda/camunda-modeler/blob/master/client/lib/app/editor/bpmn-editor.js

First you have to require your own templates:

var templates = require('../resources/element-templates/templates.json');

When initializing your Modeler, don’t forget the element templates:

var renderer = new Modeler({
    container: canvas,
    keyboard: {bindTo: document},
    additionalModules: [
       propertiesPanelModule,
        propertiesProviderModule
    ],
    elementTemplates: templates,
    moddleExtensions: {camunda: camundaModdleDescriptor},
    propertiesPanel: {
        parent: '#js-properties-panel'
    }
});
1 Like
4

Thank you very much, it works!

5

We are using the element templates with the Properties Panel.We love them.
In our case, we are - for example - mapping an element template to an input/output Parameter.

For Strings types this was easy. Now we are trying to realize this with more complex types. (Map)

So, we want to have an element template to create an input/output Parameter of the type Map.
The Map type does not exist yet.

Could you give us a hint, how we could implement this? Is there an extension mechanism for the element templates?
Or better, are you planing to support these data types like Map, List in the near future?

6

We do not plan to build support for Map and List types via the properties panel in the near future.

7

Can you please provide little more detail how did you solve this problem we are stuck in same issue where to add json file, So in your above code. Did you added var templates into bower-custom.js and initialization part is for client side. we have this in client side.

var BpmnViewer = window.BpmnJS;

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