Template selector not working

Developers Modeler
1

We’ve got element templates working for events, sequence flows and tasks in version 0.4 of the properties panel. Now, we’re updating to version 1.0-alpha and the templates are still valid, existing models are working properly with the existing templates.

But when adding a new element, we see the button + Select but nothing happens when that gets clicked.

Our app looks like this:

import BpmnModeler from 'bpmn-js/lib/Modeler';
import {
    BpmnPropertiesPanelModule,
    BpmnPropertiesProviderModule,
    CamundaPlatformPropertiesProviderModule,
    ElementTemplatesPropertiesProviderModule,
} from 'bpmn-js-properties-panel';
import CamundaBpmnModdle from 'camunda-bpmn-moddle/resources/camunda.json'

window.modeller = new BpmnModeler({
    container: '#bpmn-io .canvas',
    propertiesPanel: {
        parent: '#bpmn-io .property-panel'
    },
    additionalModules: [
        BpmnPropertiesPanelModule,
        BpmnPropertiesProviderModule,
        CamundaPlatformPropertiesProviderModule,
        ElementTemplatesPropertiesProviderModule,
    ],
    moddleExtensions: {
        camunda: CamundaBpmnModdle
    },
    elementTemplates: [],
  });

And on runtime, we’re filling the element templates list. This is working just fine, just the selector for elements doesn’t show up.

Any idea what could be wrong?

2

It looks like nothing is listening to the event elementTemplates.select - is that intentional? I’ve checked the eventBus and there is really nothing there. Do we have to write our own selector? If so, I’d need some help. What I managed to do is

const eventBus = Drupal.bpmn_io.modeller.get('eventBus');
eventBus.on('elementTemplates.select', function(event) {
  const elementTemplates = Drupal.bpmn_io.modeller.get('elementTemplates');
  alert('I got fired');
});

But how would I go about finding applicable templates and then apply the selected one to the element or property panel?

Or even better, if there were a generic solution for this that we only could import, that would be much appreciated.

3

Linking to Default Templates for same BPMN type - #4 by maxtru

4

Hi @jurgenhaas ,

cool you are updating to the latest propPanel version!

Indeed, with 1.0.0-alpha.0 we removed the element template select, so your observation is correct, nothing is listing on the elementTemplates.select event. See CHANGELOG.

We are already considering how to improve the situation (e.g., provide a default, or give a good example how to implement an easy solution). See issue.

For now, you would have to look into how the Camunda Modeler implements this feature as an example.

Thanks
Max

5

Thanks @maxtru for your feedback. I’ll see if I can get something up and running later this week. I had a quick look into the Camunda implementation but not sure yet if I can do something similar outside of Camunda - or how many dependencies would get into my way.

The issue you linked to contains a link to https://github.com/bpmn-io/connectors-modeling-demo but that responds with a 404, unfortunately. The topic sounds very promising though :wink:

6

Good news: with help from @nikku over at Template selector doesn't work · Issue #608 · bpmn-io/bpmn-js-properties-panel · GitHub we’ve got a working example of a template selector. I’m so excited - and thank you everybody for your help on this.

1 Like
7

We have got element templates working for events, sequence flows and tasks in version 0.4 of the properties panel.

Now, we’re updating to version 1.0-alpha and the templates are still valid, existing models are working properly with the existing templates.

8

Hey there, I subscribed to the elementTemplates.select event to open a dialog with a little selection to select a element template. It’s all working fine, but how do I apply the selected element template to the BPMN?

this.bpmnJS.on("elementTemplates.select", ({ element }) => {
      this.dialog
        .open(ElementTemplatesDialogComponent, {
          // TODO load element templates within dialog
          data: { elementTemplates: [...] },
        })
        .afterClosed()
        .subscribe((elementTemplate) => {
          // TODO how to apply it to the BPMN Model?
        });
    });