Properties panel extension throwing error

Developers Modeler
1

Hey there. I’m developing an angular app where I need to add an extra tab to my properties panel which is initiated by camunda. I followed the steps in the magicPropertiesPanel example, and everything seems fine. But then no new tab gets added, instead I get this error in the console:
Properties provider does not impement #getTabs(element) API
any idea what could be the problem here?

2

Can you share your custom properties panel provider? Especially inside a CodeSandbox would be appreciated.

3

it’s exactly what you guys have provided in the example:

// Require your custom property entries.
import spellProps from './parts/SpellProps';

var LOW_PRIORITY = 500;


// Create the custom magic tab.
// The properties are organized in groups.
function createMagicTabGroups(element, translate) {

  // Create a group called "Black Magic".
  var blackMagicGroup = {
    id: 'black-magic',
    label: 'Black Magic',
    entries: []
  };

  // Add the spell props to the black magic group.
  spellProps(blackMagicGroup, element, translate);

  return [
    blackMagicGroup
  ];
}

export default function MagicPropertiesProvider(propertiesPanel, translate) {

  // Register our custom magic properties provider.
  // Use a lower priority to ensure it is loaded after the basic BPMN properties.
  propertiesPanel.registerProvider(LOW_PRIORITY, this);

  this.getTabs = function(element) {

    return function(entries) {

      // Add the "magic" tab
      var magicTab = {
        id: 'magic',
        label: 'Magic',
        groups: createMagicTabGroups(element, translate)
      };

      entries.push(magicTab);
  
      // Show general + "magic" tab
      return entries;
    }
  };
}

MagicPropertiesProvider.$inject = [ 'propertiesPanel', 'translate' ]
4

I actually traced the problem, and it seems that it’s because this piece of code is not rendered as a function:

this.getTabs = function(element) {

    return function(entries) {

      // Add the "magic" tab
      var magicTab = {
        id: 'magic',
        label: 'Magic',
        groups: createMagicTabGroups(element, translate)
      };

      entries.push(magicTab);
  
      // Show general + "magic" tab
      return entries;
    }
  };
5

Thanks for sharing! Indeed it seems that the example is broken since the provider is adding the getTabs only after the provider was registered, therefore it throws an error because the function is not defined at this time.

Can you maybe open an issue at our examples so that we can investigate it? We would very much appreciate :+1:

6

I just opened an issue on github like you said.
Should I wait for this issue to be solved or is there a way that I can register the provider first to avoid this error?

7

Thank you!

Yes, you can simply define the function before you register the provider. Codesandbox: magic properties provider - CodeSandbox

export default function MagicPropertiesProvider(propertiesPanel, translate) {
  this.getTabs = function (element) {
    return function (entries) {
      // Add the "magic" tab
      var magicTab = {
        id: "magic",
        label: "Magic",
        groups: createMagicTabGroups(element, translate)
      };

      entries.push(magicTab);

      // Show general + "magic" tab
      return entries;
    };
  };

  // Register our custom magic properties provider.
  // Use a lower priority to ensure it is loaded after the basic BPMN properties.
  propertiesPanel.registerProvider(LOW_PRIORITY, this);
}
1 Like
8

Thanks Niklas, but this seems not to be working either. even the CodeSandbox sample you provided does not work. The “magic” tab is not added.

9

It’s working for me

image

Note that the custom props indicate they are only visible for start events: magic properties provider - CodeSandbox

2 Likes
10

You’re right, thank you again. :+1:

1 Like
11

We’ve fixed the example based on your input @Rashed_Bayani. Thank you :pray:

12

Thanks a lot.
I implemented it in my angular app and works perfectly now :ok_hand: