Properties panel - edit fields

Developers Modeler
1

Hi.
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
2

Hi,

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) => e.id === "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);

    groups.push(blackMagicGroup);

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

    groups.splice(idx, 1);

    return entries;
  };
};


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

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

Source: CodeSandbox

2 Likes
3

How do I add a new tab using the latest version of bpmn-js-properties-panel?

4

Hi @LittleBlack007,

the new property panel didn’t support Tabs anymore. They are Groups now.

Hope this helps, Ingo

5

Thank you for your reply. I had to give up tabs