Entry is not visible

Hi, my versions I use are:

 "bpmn-js": "^12.1.1",
 "bpmn-js-properties-panel": "^1.9.0",

When I click on a task, I was able to add a Group to the Properties panel, but the Entry I added in the group is not visible, the code is as follows:

export default class ExamplePropertiesProvider {
  constructor(propertiesPanel) {
    propertiesPanel.registerProvider(500, this);

  getGroups(el) {
    return (groups, element = el) => {

      const customGroup = {
        id: 'customGroup',
        label: 'Custom Group1',
        entries: []

      const customEntry = {
        id: 'customEntry',
        label: 'Custom Entry',
        modelProperty: 'customProperty',
        html: '<input id="customEntry" type="text" name="customEntry" />',

        set: function(element, values, containerElement) {
          const customPropertyValue = values.customEntry;
          return { customProperty: customPropertyValue };

        get: function(element, entryNode) {
          const customPropertyValue = element.businessObject.get('customProperty');
          return { customEntry: customPropertyValue };


      if (element.type === 'bpmn:Task') {

      return groups;

ExamplePropertiesProvider.$inject = ['propertiesPanel'];


  ngOnInit(): void {
    this.bpmnJS = new BpmnJS({
      additionalModules: [
          __init__: ['propertiesProvider'],
          propertiesProvider: ['type', ExamplePropertiesProvider]
      propertiesPanel: {
        parent: '#js-properties-panel'


Why the entry may not be visible, I’m trying to integrate it into my angular 14 project.

It seems like you may be using an example for the older versions of the properties panel (0.x) but you are using a recent version.

Have you looked at our example on how to add custom properties providers to the recent properties panel?


When I try to go through this example, I get a compiler error and I don’t want to include babel react in my project, how do I adapt the textfieldentry to the an angular component?