Extension elements with properties panel v1.0

[damthor]

Hi,

I really like the new design and approach of the properties panel v1.0. I already had a look into your example on how to extend the default properties (bpmn-js-examples/properties-panel-extension at master · bpmn-io/bpmn-js-examples · GitHub). I use the panel with bpmnjs as a plugin for modeling and we have multiple custom properties nested in the extension elements container (along with a custom namespace).

Something like that:

<bpmn:userTask id="Activity_123456">
  <bpmn:extensionElements>
    <custom:callPage>
      <custom:application>100</custom:application>
      <custom:page>1</custom:page>
      <custom:items>
        <custom:item>
          <custom:itemName>USER</custom:itemName>
          <custom:itemValue>dummy</custom:itemName>
        </custom:item>
      </custom:items>
    </custom:callPage>
  </bpmn:extensionElements>
</bpmn:userTask>

I achieved this via an approach with extending the properties panel by adding additional groups and using a variety of helpers (e.g. extensionElementsHelper, elementHelper, cmdHelper). For the elements in the panel I used basic text fields, select lists, etc. of the entryFactory as well as the extensionElementsEntry (I guess that’s the ListEntry now?).

I already managed to add custom attributes using the new structure in the example. But I’m struggeling with finding the needed interfaces for the extension elements. In the props.json definition I added the custom type with “superClass”: [ “Element” ] instead of the “extends” attribute (I think I read this in an old version of the examples some day).

Do you plan on extending the current examples to include examples for the extension elements structure as well, or do you maybe have a hint on how to start on that?

Thanks in advance!

[Niklas_Kiefer]

Thanks for reaching out! We currently do not have a dedicated example for more complex custom elements inside the properties panel. If you think that would be beneficial, feel free to open an issue.

There is an example plugin for the Camunda Modeler that is doing exactly that: https://github.com/camunda/camunda-modeler-process-io-specification-plugin. It does not define moddle extensions, but is creating custom list groups for specific Camunda extensions. That might be helpful to you.

You could also share your extension via CodeSandbox, maybe we are already able to help you then.

[damthor]

Thanks for your quick response!

The example for the Camunda Modeler looks pretty promising on first sight. I see what I can achieve with that for now and maybe reach out to you again if I need explicit help on my code