How to customize properties panel

Developers Modeler
1

i have added custom property panel but getting below error. i want to display only few tabs in the 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’ ]

2

You not sharing complete code where you actually providing your CustomPropertiesProvider to the BpmnModeler. Edit your question with proper code indentation.

3

index,js

import CustomPaletteProvider from “./CustomPaletteProvider”;

import CustomContextPadProvider from “./CustomContextPadProvider”;

import CustomPropertiesProvider from “./CustomPropertiesProvider”;

export default {

__init__: ["customPaletteProvider", "CustomContextPadProvider", "CustomPropertiesProvider"],

customPaletteProvider: ["type", CustomPaletteProvider],

CustomContextPadProvider: ["type", CustomContextPadProvider],

CustomPropertiesProvider: ['type', CustomPropertiesProvider],

};

component code
@Component({

selector: ‘app-create-modeler’,

templateUrl: ‘./create-modeler.component.html’,

styleUrls: [’./create-modeler.component.css’]

})

export class CreateModelerComponent implements OnInit {

title = ‘Angular/BPMN’;

modeler;

deployType: any;

processId: any;

constructor(private http: HttpClient, private router: Router, private route: ActivatedRoute) {

}

ngOnInit(): void {

this.modeler = new BpmnModeler({

  container: '#canvas',

  width: '100vw',

  height: '100vh',

  additionalModules: [

     { [InjectionNames.elementTemplates]: ['type', ElementTemplates.elementTemplates[1]] },

     { [InjectionNames.propertiesProvider]: ['type', CamundaPropertiesProvider.propertiesProvider[1]] },

    // { [InjectionNames.originalPaletteProvider]: ['type', OriginalPaletteProvider] },

    executableFixModule,

    PropertiesPanelModule,

   // customModule,

     customControlsModule,

     CustomPaletteModule,

  ],

  propertiesPanel: {

    parent: '#properties'

  },

  moddleExtensions: {

    camunda: CamundaModdleDescriptor

  }

});

}

4

Main intention is to customize properties tabs. I want to display only required tabs instead of displaying all default tabs properties.

5

Which version of bpmn-js-properties-panel are you using? I think the registerProvider API was released with v0.41.0

6

thanks. upgraded to [v0.41.0]. it worked

7

Im able to add new tabs and remove unwanted tabs from properties panel but i want to restrict tabd level fields. for example i want to display only name id and details fields in general tab. remaining fields need to be removed. I Tried to remove entries and keep required fields but it dint work. attaching image for reference

image

I want to display only highlighted fields. Thanks in advance

8

Can you share what you already tried? Especially inside a sandbox would be nice.

9

Here is my code

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 class CustomPropertiesProvider {

constructor(propertiesPanel, translate) {

    propertiesPanel.registerProvider(this);

    

}

getTabs(element, translate) {

    return function (entries) {

        console.log(entries);

        console.log(entries[0]['groups'])

        //  let newEntries = entries[0].groups = entries[0]['groups'][1]

         entries[0]['groups'][1].entries =  entries[0]['groups'][1].entries.length =2;

        // Add the "magic" tab

        var magicTab = {

            id: 'magic',

            label: 'Magic',

            groups: createMagicTabGroups(element, translate)

        };

        entries.unshift(magicTab);

        // return entries;

        return [entries[0], entries[1]];

    };

}

}

CustomPropertiesProvider.$inject = [“propertiesPanel”, “translate”];