Not able to initialize the Custom properties panel

Developers
1

hi i have followed the example given in bpmn-js-examples/properties-panel
i have implemented exactly same example in react project
this.modeler = new BpmnModeler({
container: ‘#bpmnview’, keyboard: { bindTo: window},
propertiesPanel: { parent: ‘#propview’ },
additionalModules: [ propertiesPanelModule, propertiesProviderModule],
moddleExtensions: { magic: magicModdleDescriptor}
});

even wrote the MagicPropertiesProvider exactly same as given and also created index.js file to initialize the custom tab
export default {
init: [ ‘propertiesProvider’ ],
propertiesProvider: [ ‘type’, MagicPropertiesProvider ]
};

i relay dont know where i am missing a thing i am not able create a custom tab magic the default tabs are coming can u please help me out

2 
import yourCustomPropertiesProvider from './your-custom-properties-provider';

export default {
  __init__: ['propertiesProvider'],
  propertiesProvider: ['type', yourCustomPropertiesProvider]
};

function YourCustomPropertiesProvider(eventBus, translate) {
  // your impelementation. see default properties provider impl.,
}

YourCustomPropertiesProvider.$inject = ['eventBus', 'translate'];

export default YourCustomPropertiesProvider;

import yourCustomPropertiesProvider
             from './path-to-your-custom-prop-provider/provider';

this.modeler = new BpmnModeler({
               container: ‘#bpmnview’, 
               keyboard: { bindTo: window},
               propertiesPanel: { parent: ‘#propview’ },
               additionalModules: [ 
                                 propertiesPanelModule, 
                                 propertiesProviderModule, 
                                 yourCustomPropertiesProvider
                                ]
               });

Please let me know if this doesn’t work.

3

If it doesn’t work it probably isn’t exactly the same. Please share your setup in a CodeSandbox so we can help you.

4

I wrote a sample code to bring BPMN with properties.

5

hi mallesh ,

sorry for the delayed reply ,

this is code sandbox link

i have followed the steps u mentioned still i was not able to achieve it in react
thanks a lot for your help

6

Thanks for sharing your code. I can’t see where you include your moddle descriptors, like it is described in the example.

Also, is there a reason, why you include both the CamundaPropertiesProvider and your custom one?

7

hey nikalas ,

yeah i have included moddle descriptor but then mallesh share this suggestion

additionalModules: [
propertiesPanelModule,
propertiesProviderModule,
yourCustomPropertiesProvider
]
even if i have custom tab without camundaproperties also fine
i also tried adding the moduler as shown in eg
link

8

getting error when i tried to add custom properties panel

image

here is my code

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 CustomPropertiesProvider(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;

}

};

}

CustomPropertiesProvider.$inject = [ ‘propertiesPanel’, ‘translate’ ]