Enable element templates in Property Panel


#1

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:


#2

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.


#3

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.


#4

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


#5

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();

#6

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');
  }

#7

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).


#8

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


#9

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


#10

@nikku, any update on this please?


#11

@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:


#12

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