Edit appearance of group-toggle / Override _createPanel

Developers
1

Hello everyone,

I would like to change the group-toggle element found in groups in the properties panel to be an arrow (up or down) next to (and behind) the headline. I found the code that generates the element here but am at a loss as to how to override this. What I have so far is:

import inherits from 'inherits';
import PropertiesPanel from 'bpmn-js-properties-panel/lib/PropertiesPanel'

var escapeHTML = require('bpmn-js-properties-panel/lib/Utils').escapeHTML;

var domClasses = require('min-dom').classes,
	domify = require('min-dom').domify;
var forEach = require('lodash/forEach');

export default function CustomPropertiesPanel(
	config, injector, eventBus,
	modeling, commandStack, canvas) {
	
	PropertiesPanel.call(this, 
		config, injector, eventBus,
		modeling, commandStack, canvas);

	this._createPanel = (element, tabs) => {
		console.log("§test");
		var self = this;
	  
		var panelNode = domify('<div class="bpp-properties test"></div>'),
... (copy of original code removed for brevity)
	  };
}

inherits(CustomPropertiesPanel, PropertiesPanel)

The console output is called, but the test-class I added to the panelNode does not appear. Neither do any other changes I make to the panel generation code. So while I have succeded in creating a custom panel that is being called, it does not seem to replace the existing one. In case it is relevant: I add the custom panel to my application like this:

// index.js next to the CustomPropertiesPanel
import CustomPropertiesPanel from './CustomPropertiesPanel'

export default {
  __init__: ["customPropertiesPanel"],
  customPropertiesPanel: ["type", CustomPropertiesPanel]
};

// In the main index.js
import customPropertiesPanel from './custom/propertiesPanel';

var bpmnModeler = new BpmnModeler({
...
  additionalModules: [
    customPropertiesPanel,
...
  ]
});
2

You are not really overriding the existing propertiesPanel with this one but adding another. Did you try out to use propertiesPanel as module name instead of customPropertiesPanel?

3

I had not tried that. When I do, the test-css-class is still not applied and the test console output disappears as well. Then I removed the existing import of the properties panel which I had used like this:

import propertiesPanelModule from 'bpmn-js-properties-panel';
...
additionalModules: [
    propertiesPanelModule

Afterwards the console test appeared again, but there is no properties panel (also no error messages). Same happens if i do not remove the properties panel import, but just move my custom panel below the original import in the additionalModules.

4

Are you able to share your complete extension inside a CodeSandbox? This way it will be easier to check out what is going on.

5

I have created a CodeSandbox showcasing my problem.

6

Any chance someone will find the time to look at my problem? I keep trying to change the group-toggle to something more obvious, but I fear that without editing the PropertiesPanel-Code I won’t achive well-rounded results.