React properties panel

Hello, I want to create different UI for the property panel (with dynamic parts - fields that depend on given json), so I decide to use the react example abd build my own property panel (GitHub - bpmn-io/bpmn-js-example-react-properties-panel: An example how to build a simple properties panel for bpmn-js using React this is the example I am refferencing to).
Also, I am planning to reuse some of the existing functions for applying the xml elements. I am building the elements using material ui library.
I have doubts about if this is a good approach - creating the own panel or should I try to use the plugin and try to customize it?
Also I saw that there are big changes between some 0. versions and the newest alpha version? Is the newest alpha version stable for developing and deployment?

The 1.0.0-alpha.x series is a rewrite of the properties panel which contains big improvements to both the UX of the panel as well as extensibility. Check out the changelog for details. We expect version 1.0.0 to be released soon, so it’s ready to be tried out in development. I am looking forward to your feedback.

Thanks, I upgraded the bpmn plugins with the newest versions. I am using

"bpmn-js-properties-panel": "^1.0.0-alpha.13", 
"@bpmn-io/properties-panel": "^0.13.2",

Tried to implement the magic property example (bpmn-js-examples/properties-panel-extension at master · bpmn-io/bpmn-js-examples · GitHub referencing to this solution), had PropertiesProvider JS definition / create-react-app 5.x this issue, so I fixed with the suggested solution. Now I will try to implement the rules I need for the panel.
Also I had Palette overiden and after adding the newest version of the panel. I am facing this issue

Uncaught TypeError: canvas.findRoot is not a function
    at PreviewSupport.js:246:1
    at Array.filter (<anonymous>)
    at Selection.select (PreviewSupport.js:246:1)
    at RuleProvider.js:86:1
    at invokeFunction (EventBus.js:213:1)
    at EventBus._invokeListener (EventBus.js:64:1)
    at EventBus._invokeListeners (EventBus.js:48:1)
    at EventBus.fire (EventBus.js:9:1)
    at fire (HandTool.js:152:1)
    at SVGSVGElement.handlers.<computed> (HoverFix.js:31:1)

Previously it was working fine for me. :frowning:
But anyway any opinion on the custom property panel solution (using material UI elements instead of the bpmn ones) ? Is that wrong way of doing things? Are there some big cons for that solution?

I resolved the issue with the palette, adding the latest version of the bpmn (I had forgotten that one, did the update on the bpmn io and properties panel).
So I have another question in the list, regarding the newest property panel extension, as I said I tried the example with the extension, and tried to see if I can somehow reach to some local context that I have created and it’s throwing a console error.
So that means that I cannot use in the properties extensions the local contexts I created or I am not doing something properly?
Another thing that I noticed is that when I have installed the bpmn-js-properties-panel version 0.46.0 I have the full version of the package and I can reuse some of the existing methods for building the wanted xml but with 1.0.0-alpha.13 I have the minified version and I cannot use the existing methods :confused:

What do you mean with context? Are you referring to the React Context API?

Another thing that I noticed is that when I have installed the bpmn-js-properties-panel version 0.46.0 I have the full version of the package and I can reuse some of the existing methods for building the wanted xml but with 1.0.0-alpha.13 I have the minified version and I cannot use the existing methods

It’s true that we only publish the distros for the properties panel library, also to reduce the bundle size and avoid blowing up the application of the users. The source code is still open source and accessible via GitHub.

What do you mean with context? Are you referring to the React Context API?

Yes, I was planning to use React Context it since the requirements that I have are to build the properties panel dynamically - I am receiving a JSON object from BE API and I will need to create the groups/elements according to that JSON. And I was planning to keep it in some local react Context.

It’s true that we only publish the distros for the properties panel library, also to reduce the bundle size and avoid blowing up the application of the users. The source code is still open source and accessible via GitHub.

So for any reuse I will need to include the methods in my project right?

Also any opinion about the question bellow?

But anyway any opinion on the custom property panel solution (using material UI elements instead of the bpmn ones) ? Is that wrong way of doing things? Are there some big cons for that solution?

Instead of injecting groups, I will have react component included in the html that will work on the predefined methods from bpmn-js-properties-panel. (I am not able to use useService hook here and instead I will need to use it from modeler.get(…), as I found out, or is there a way for doing it?)

Yes, I was planning to use React Context it since the requirements that I have are to build the properties panel dynamically

If you intend to create an extension for the 1.0.0 version of the properties panel, I assume that using React context inside the extension won’t work. That’s because extensions have to be preact components as well.

If you are just using React context around the properties panel, that should be possible I guess.

work on the predefined methods from bpmn-js-properties-panel

Can you describe what “predefined methods” you mean?

In general It seems like that we are currently discussing multiple questions in one thread. Maybe let’s move single topics into another threads to keep the focus :+1:

1 Like

Hello, thanks for the answers, I created new topic Custom Property panel in React, and here I am explaining about what I mean about the predefined methods (copy -paste of needed methods from bpmn-js-properties-panel project) and asking one more question