Properties panel - edit fields

I am new to bpmn and I am exploring some of examples.
I was able to add a new Tab to properties panel following the properties-panel-extension example.

Now I would like a couple of things

  • Move the spell group to the general tab instead of being in new tab.
  • Remove the documentation group

But I don’t how to accomplish this.

1 Like


inside the properties provider, you have the ability to add and remove groups to specific tabs. So something like

this.getTabs = function (element) {
  return function (entries) {
    const generalTab = entries.find((e) => === "general");

    const groups = generalTab.groups;

    // Add the "magic" group to the general tab
    const blackMagicGroup = {
      id: "black-magic",
      label: "Black Magic",
      entries: []

    spellProps(blackMagicGroup, element, translate);


    // Remove the "documentation" group
    const idx = findGroup(groups, "documentation");

    groups.splice(idx, 1);

    return entries;

// helpers /////////////////////

function findGroup(entries, groupId) {
  return findIndex(entries, (e) => === groupId);

Source: CodeSandbox