How to extend bpmn-js-properties-panel in React

I was able to integrate the properties panel into the REACT application using below npm module

bpmn-js-properties-panel

I want to extend the bpmn-js-properties-panel (like adding a lookup text field under the CONNECTORS TAB and on click of it need to open a popup and after selecting something in popup need to auto-populate that in the lookup text field)

Hi @sathvik,

did you already check out this example? Extending the properties panel does not depend on a JS library or framework.

hi @Niklas_Kiefer,

thanks for the replay, I have already looked into it example in the example they have implemented it with the separate tab, but my requirement is to add a lookup text field in the CONNECTOR TAB (like append a look up text-field with icon) and have control over that field (like auto-populate)

It’s kind of hard to understand what you want to achieve. Can you maybe share a small sketch or something like this to illustrate your goal?

Screenshot 2020-10-05 at 16.41.18

hi @Niklas_Kiefer, sorry for the delay

i have add the sketch, in that i need to add lookup textfield and onClick on it need to open a popup and select one connector (will show list of connectors in popup). The selected connecter name need to be autopopulated.

Unfortunately, opening popups from properties panel entries is nothing we provide out of the box. You’ll have to build it on your own.

We build a kind of similar extension in the Camunda Modeler, where we open a Modal when clicking a link:

Kapture 2020-10-05 at 13.32.52

@Niklas_Kiefer thanks for the reply

how to build properties-pannel extending the bpmn-js-properties-panel

can we add the React textbox component to the properties-pannel (under CONNECTOR tab) ?

Unfortunately, opening popups from properties panel entries is nothing we provide out of the box. You’ll have to build it on your own.
[/quote]

Do you mean to say model (popup) need to build?