Properties panel element title

Hello everyone!
Is there a way of customizing the selected element title in the properties panel? (and even the icon if possible)

Captura de pantalla 2024-01-29 a la(s) 09.45.15

Hi there @Sun95, certainly. It is done through the headerProvider property of the properties panel.

You may see an example of how this was done in form-js here: the provider class and how to provide it.

All the best,

1 Like

Thank you! I’ll try it and see how it turns out :slight_smile:

Hello again! I have another question. Since in my project I use bpmn-js-properties-panel and Vue 3, I found a similar example here bpmn-js-properties-panel render to reuse this library, but it is based in React (as well as the example you gave me). So my question is how can I translate this to Vue? I tried to test it but the parts that are giving me problems are these (from this new link):
This is from BpmnPropertiesPanelRenderer

        element={ element }
        injector={ this._injector }
        getProviders={ this._getProviders.bind(this) }
        layoutConfig={ this._layoutConfig }
        descriptionConfig={ this._descriptionConfig }
        tooltipConfig={ this._tooltipConfig }
        feelPopupContainer={ this._feelPopupContainer }


And this is from BpmnPropertiesPanel

return <BpmnPropertiesPanelContext.Provider value={ bpmnPropertiesPanelContext }>
      element={ selectedElement }
      headerProvider={ PanelHeaderProvider }
      placeholderProvider={ PanelPlaceholderProvider(translate) }
      groups={ groups }
      layoutConfig={ layoutConfig }
      layoutChanged={ onLayoutChanged }
      descriptionConfig={ descriptionConfig }
      descriptionLoaded={ onDescriptionLoaded }
      tooltipConfig={ tooltipConfig }
      tooltipLoaded={ onTooltipLoaded }
      feelPopupContainer={ feelPopupContainer }
      eventBus={ eventBus } />

And the error I got is something like this for both:
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See Concepts | webpack
| render(


| element={ element }
| injector={ this._injector }

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.