Change default tab group in palette

Developers
1

Hi everyone,

I have the requirement to set a custom tab group as the default, meaning it should be selected initially. The group is defined in a properties provider as per this example (bpmn-js-examples/properties-panel-extension at master · bpmn-io/bpmn-js-examples · GitHub), and I can change the order by changing the order in the array returned by the default function of this provider. But I do not yet know how to set something else than general as the default tab.

2

When you set your custom tab as the first one retrieved by a properties provider, shouldn’t it be displayed at the first position? What else would you expect?

3

When I set the custom tab as the first to be retrieved is is displayed at the first position, so far as expected. But the tab in focus is still the same, the (now second) general tab.

I would like to be able to set which tab is in focus by default.

4

There is the PropertiesPanel#activateTab API you could use to always open your specified tab.

5

I’ll see if I can do it with this call. One thing I do not understand though: Nothing in this function specifies that the general tab should be active by default. I also tried to swap the ids of general and my custom module tab, but general is still active by default. I am struggling to understand what marks the general tab as the one that is active?

6

Can you maybe showcase that via a CodeSandbox? By default, it should show the first tab that is visible. However, we would have to look at your setup to tell what went wrong.

7

I tried importing the example into CodeSandbox (because my application is build based on it), but I get a syntax error “Unexpected token ] in JSON”. I have no experience with CodeSandbox so far, which is why I am at a bit of a loss on how to fix this.

8

While not in CodeSandbox, I managed to come up with a very simple showcase: If you take the Properties Panel Extension Example and swap MagicPropertiesProvider, Line 43 for

entries.unshift(magicTab)

you can see that the magic tab appears before the General tab, but General is selected by default.

9

This worked for me in this Sandbox.

However, according to the current implementation, the properties panel will always try to keep the currently active tab. That means if your custom tab is not available for one type of element (e.g. Task), and you switch to another element, where the new tab will be displayed, it will keep the currently active tab.

This might follow the behavior that the general tab will be kept active, although your custom tab is in the first position.

10

If you want to change this behavior, you would have to override the existing implementation or create another behavior that sets the active tab depending on certain events (e.g. when a new element was selected)

const eventBus = modeler.get('eventBus');

const propertiesPanel = modeler.get('propertiesPanel');

eventBus.on('selection.changed', function(event) {
   propertiesPanel.activateTab('custom');
});

Source: default tab on selection change properties panel - CodeSandbox

11

Ah, now I get what is happening. I will override that and make the properties panel switch to the first tab whenever a new element is selected. Thanks again for the assistance.