How to overwrite panel

Users
1

Hi,

I have a form design component, and will use it to generates the form.

So I want overwrite the “Forms tab” in properties panel, and the other tabs will use default.

How to do it?

Thanks! :slight_smile:

2

What have you already done to achieve this? Where are you stuck? Have you made yourself familiar with how the properties panel is structured?

3

@philippfromme
Hello philippfromme,

Thanks for reply! :slight_smile:

I am finished it, but instead of extended and overwrite, it is replace. like follow:

MyFormPropertiesProvider.js

// ...other code
import CamundaPropertiesProvider from "bpmn-js-properties-panel/lib/provider/camunda/CamundaPropertiesProvider";

function MyFormPropertiesProvider(eventBus, bpmnFactory, elementRegistry, elementTemplates, translate) {
  PropertiesActivator.call(this, eventBus);

  var camundaProvider = new CamundaPropertiesProvider(eventBus, bpmnFactory, elementRegistry, elementTemplates, translate);
  this.getTabs = function (element) {
    var results = camundaProvider.getTabs(element);
    var myFormTab = {
      id: 'forms',
      label: 'Forms',
      groups: createMyFormTabGroups(element, elementRegistry)
    };
    results.forEach((item, index) => {
      if (item.id === 'forms') {
        results.splice(index, 1, myFormTab);
      }
    });
    return results;
  }
}

privider/index.js

import MyFormPropertiesProvider from './MyFormPropertiesProvider';

export default {
  __depends__: [
    require('bpmn-js-properties-panel/lib/provider/camunda/element-templates/'),
    require('diagram-js/lib/i18n/translate')
  ],
  __init__: [ 'propertiesProvider' ],
  propertiesProvider: [ 'type', MyFormPropertiesProvider ]
};

I only found this.
Do you have others?

Thanks! :slight_smile: