Template selector doesn't work

[jurgenhaas]

Describe the Bug

We have integrated BPMN.iO into Drupal a while ago and worked with version 8.x of bpmn-io and version 0.4 of this module. We're also using the camunda and the template extensions.

Now, we're upgrading to version 9.x and 1.0-alpha which is a huge step forward. Thanks a lot for that.

All is working fine, except the template selector doesn't show up. We validated all our templates, and they are just fine. Also, debugging the setTemplates confirms, that the validator accepts all templates as valid.

The button "+ Select" only shows on elements, where we have applicable templates. But when we click on the button, nothing happens. Not even an error or warning in the browser console.

When we open existing models which already use some of those templates, then we get the drop-down "Applied" and we can unlink the template. Also, elements with an applied template show all the defined properties from the template. The other test, removing all our templates from the application and opening an existing model, then we get the red indicator "Missing template".

All that tells me that the templates are ok and recognized. Only the select template action doesn't work.

I don't know how I should further debug this and hope, somebody from the community could help me finding out what's wrong.

[jurgenhaas]

I have verified, that this is working:

  return jsxs(HeaderButton, {
    title: "Select a template",
    class: "bio-properties-panel-select-template-button",
    onClick: selectTemplate,
    children: [jsx(CreateIcon, {}), jsx("span", {
      children: translate('Select')
    })]
  });

When clicking the button, this event

  const selectTemplate = () => eventBus.fire('elementTemplates.select', {
    element
  });

gets executed. But it feels as if nothing is listening to the fired event elementTemplates.select - is there anything I need to add separately to the app?

[pinussilvestrus]

But it feels as if nothing is listening to the fired event elementTemplates.select

This is expected as of now. The properties panel library itself doesn't provide such a selection, it leaves it open to the implementor to listen to the event (cf. #573).

As an example, the Camunda Modeler is implementing it itself

[jurgenhaas]

The link in #573 to https://github.com/bpmn-io/connectors-modeling-demo responds with a 404, unfortunately.

[nikku]

@jurgenhaas We'll see if we can provide you with a chooser or a way to build one.

It is really something that is missing with properties-panel@1, I acknowledge that.

[jurgenhaas]

Oh, that would be fantastic

[nikku]

Is something along the lines of #573 what would help you?

[jurgenhaas]

Well, there is only an animated Gif in there. The link to the promissing repo responds with a 404 as I mentioned above. But what the Gif shows would be great as a starter.

[nikku]

@jurgenhaas you can give @bpmn-io/element-template-chooser a try.

If it does not work directly for you it shows, in a nutshell, how to integrate your own chooser with properties-panel@1+.

Feedback, of course, welcome.

[nikku]

On a site-note it would be really interesting to understand what you folks are doing / building on top of our tooling.

[jurgenhaas]

Oh, this is so great. Got it working after fixing 2 issues I found in ElementTemplateChooser.js:

• import './ElementTemplateChooser.css'; throws exceptions when building a webpack. Removing that line and adding the css to the html later, fixes this
• ElementTemplateChooser.prototype._updateTemplate should call propertiesPanel.camunda.changeTemplate instead of propertiesPanel.zeebe.changeTemplate

Shall I open issues for that over in the new repository?

@nikku we are integrating you tool into Drupal to use it as a front-end for the new rules engine we're going to publish soon, see https://www.drupal.orf/project/eca

I'd be very interested in showing you what we already have as there is huge potential behind this for both of us. Would you like to get on a screen sharing session to have a look?

[nikku]

Please create issues in this repository for everything you found.

[jurgenhaas]

Done in bpmn-io/element-template-chooser#1 and bpmn-io/element-template-chooser#2