Enable element templates in Property Panel

Continuing the discussion from How to add element template to diagram using Modeler? & Element templates usage in property panel.

I’m trying to have my custom element template. In the process, I face challenge to enable the element-template block in the property panel. I’ve tried the above mentioned post. But no luck.

Below is my code.

import { BpmnJS } from 'bpmn-js/dist/bpmn-modeler.development';
import propertiesPanelModule from 'bpmn-js-properties-panel/';
import propertiesProviderModule from 'bpmn-js-properties-panel/lib/provider/camunda';
import camundaModdleDescriptor from 'camunda-bpmn-moddle/resources/camunda.json';
import customElementTemplate from '../../.camunda/element-templates/EmailTask.json';

loadModeler() {
    this.container = document.getElementById('js-drop-zone');
    this.modeler = new BpmnJS({
      container: '#js-canvas',
      keyboard: { bindTo: document },
      propertiesPanel: {
        parent: '#js-properties-panel'
      },
      additionalModules: [
        propertiesPanelModule,
        propertiesProviderModule
      ],
      elementTemplates: [customElementTemplate], // <-- tried with --> elementTemplates: customElementTemplate,
      moddleExtensions: {
        camunda: camundaModdleDescriptor
      }
    });
    // this.modeler.get('elementTemplates');
  }

Bpmn-js Modeler :

Screenshot_1

element-templates path
Screenshot_2

Kindly throw some lights on this.

Note: Tried with Camunda Modeler - Electron App with the reference on this article. It enables element-template. But not in Bpmn.js :thinking:

1 Like

Ensure customElementTemplate is not an array, as you wrap it in an array yourself.

If that does not work, debug the template load mechanism to see what templates it receives.

When specify customElementTemplate as Object, template load mechanism is not handling Object. It takes template as function or array.

reload debug
Screenshot_4

setTemplates:

setTemplate is throw error. Is it not the valid templates, validTemplates is empty array. Screenshot below.

Screenshot_5

When debug the camunda-modeler the loadTemplate is a function. It fetch from the resource/element-template/*.json folder.

Screenshot_6

Is there anything Am I missing here. I used the same element template (EmailTask.json) works fine in camunda-modeler but not in bpmn-js moddle.

The reason I mention this, is because you wrap customElementTemplate in an array yourself:

An additional thing that may help you track down the issue: You may listen to the elementTemplates.errors event to get notified if template loading fails for whatever reason:

var bpmnJS = ...;

bpmnJS.on('elementTemplates.errors', function(event) {
  console.log('template load errors', event.errors);
});

bpmnJS.get('elementTemplatesLoader').reload();

When I pass as elementTemplates: customElementTemplate, ElementTemplatesLoader.reload method is not satisfy any condition, Since it is not satisfy no exception thrown.

Code:

  loadModeler() {
    this.container = document.getElementById('js-drop-zone');
    this.modeler = new BpmnJS({
      container: '#js-canvas',
      keyboard: { bindTo: document },
      propertiesPanel: {
        parent: '#js-properties-panel'
      },
      additionalModules: [
        propertiesPanelModule,
        propertiesProviderModule
      ],
      elementTemplates: customElementTemplate, // <--  In ElementTemplateLoader.reload => not satisfy any condition.
      // customElementTemplate,                // <-- In ElementTemplateLoader.reload, this._loadTemplate is undefined. 
      moddleExtensions: {
        camunda: camundaModdleDescriptor,
        qa: qaPackage
      }
    });

    this.modeler.on('elementTemplates.errors', function (event) {
      console.log('template load errors', event.errors);
    });
    this.modeler.get('elementTemplatesLoader').reload();

    // this.modeler.get('elementTemplates');
  }

The approach which I’m using to enable or load the elementTemplate is correct?

i.e., customElementTemplate is a direct MailTask.json result (import customElementTemplate from ‘…/…/.camunda/element-templates/EmailTask.json’) and passing the same as elementTemplate property to BpmnJS instance (elementTemplates: customElementTemplate).

Your general approach is correct. elementTemplates may be an Array<TemplateDescriptor> or Function(done).

any documentation on parsing JSON to TemplateDescriptor or any article related to enable element-template.

@nikku, any update on this please?

@nikku, Thank you for your support.

I found the issue. The issue is with the custom element template generation. The template structure is not valid. System I got the error. But I ignored it. My bad :frowning:

A post was split to a new topic: Using the BPMN properties panel with Polymer