Properties panel element title

[Sun95]

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

[Skaiir]

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,
Val.

[Sun95]

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

[Sun95]

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

render(
      <BpmnPropertiesPanel
        element={ element }
        injector={ this._injector }
        getProviders={ this._getProviders.bind(this) }
        layoutConfig={ this._layoutConfig }
        descriptionConfig={ this._descriptionConfig }
        tooltipConfig={ this._tooltipConfig }
        feelPopupContainer={ this._feelPopupContainer }
      />,
      this._container
    );

  }

And this is from BpmnPropertiesPanel

return <BpmnPropertiesPanelContext.Provider value={ bpmnPropertiesPanelContext }>
    <PropertiesPanel
      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 } />
  </BpmnPropertiesPanelContext.Provider>;

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(

  <BpmnPropertiesPanel

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