Is it possible to add properties panel for custom elements?

Developers Modeler
1

Hello everybody.
I’ve been trying to create custom elements using the bpmn-js-examples on custom elements. I added a properties panel to it, and the custom element is being dragged to the canvas succesfully and the properties panel is working for normal elements.
But whenever i click and drag on my custom element, even though it is added to the canvas, i get an error message:

Bo.get is not a function at gettemplateId.

I’m assuming this is due to the fact that my element is not recognized by the properties panel.
And i want this to happen, i want to give my custom element a properties panel option.
So is it possible to do? And if yes, can anybody help?
I appreciate any help.

1 Like
2

Hi @fatima_hijazi,

Is it possible to explain me the steps how you added the custom element?

Thanks!

3

I used the custom elements examples in bpmn-js-examples.


This one.

I would like for the properties pabel to be available for it.
And also add input/output parameters to the InputOutput tab for service tasks that will be coming from a file.
So if for example, they choose a java class in details, i will be adding corresponding input output that are in that class.

But the properties panel for custom elements is my priority now.

4

Hey,

there are two things:

  1. The error you’re experiencing is actually a bug that shouldn’t occur. I’ll create an issue for that.
  2. The properties panel displays the properties of an element based on its business object. If there’s no business object, it can’t display anything. You probably didn’t add a business object to your custom element. Have a look at CustomElementFactory, where the business object is added to the custom element.
1 Like
5

Well i did add a CustomElementFactory that i got from the custom elements example of bpmn-js-examples.

For example, if someone adds a properties panel to your custom elements example, it should work for custom elements as well? Is that supported?
Or there are extra changes that need to be made?

EDIT

I just tried adding properties panel and properties panel provider to your custom-elements example
Using:
additionalModules and moddleExtensions
But i get the error

Failed to instantiate component
Diagram.js:56 TypeError: Cannot read property 'appendChild' of null
    at PropertiesPanel.attachTo (PropertiesPanel.js:364)
    at PropertiesPanel._init (PropertiesPanel.js:338)
    at new PropertiesPanel (PropertiesPanel.js:230)
    at invoke (injector.js:94)
    at Array.instantiate (injector.js:74)
    at Injector.get (injector.js:63)
    at Diagram.js:53
    at Array.forEach (<anonymous>)
    at bootstrap (Diagram.js:49)
    at createInjector (Diagram.js:84)

Is there a special way to add properties panel to a custom modeler?

6

When you create custom elements you are free to give them any properties you want. The properties panel is not aware of that though. You also have to extend the properties panel in order to display and edit your custom elements properties. We have an example of extending the properties panel to handle a custom property.

Hope that helps.

7

Hello, how do i give custom elements properties?

And alright, i will look into the extension of the panel and see if it solves my problem. Thank you for the advice.

8

Our custom elements example adds properties to custom elements using a custom ElementFactory.

9

Yes i used the custom elements example, and what i did was basically just try to add a properties panel to it, but it did not work.

10

Hey,
@philippfromme, you mentioned that you will create an issue for the Bo.get is not a function problem. Would you please link this issue? The thing is, I really would like to solve this issue because I need properties-panel-example and custom-shapes-example to work together. Is there anybody who is working on this issue right now? Can I have more information about what causes this issue?
Thank you very much!

1 Like
11

Hello Fatima, i face the same issue currently you solved it ?

12

i face the same issue , CustomElementFactory already exists in custom modeler please your advice ?

1 Like
13

Hi,
it seems like I’m facing the same bug. I have created the custom elements just like the example. Then I extended the CustomPropertiesPanel and the CustomElementFactory, to add the business object to the custom element. Upon inspecting the resulting business object, it would seem that no get method is present, causing the error.

@philippfromme is there any update on this? Does the bug still exists? Is there a workaround?

I’m using the latest (as of this writing) version of bpmn-js and the bpmn-js-properties panel.

Thanks in advance!

Edit:
I found a solution by adding

        attrs.businessObject.get = (attributeToGet) => {
          return attrs.businessObject[attributeToGet]
        }

        attrs.businessObject.set = (key, value) => {
          attrs.businessObject[key] = value
        }

in the CustomElementFactory. This does the trick. However, from bootstrapping the custom element example, it was not clear enough to me that this should be done as well.