Entry is not visible

Developers
1

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 };
        }
      };

      customGroup.entries.push(customEntry);

      if (element.type === 'bpmn:Task') {
        groups.push(customGroup);
      }

      return groups;
    };
  }
}

ExamplePropertiesProvider.$inject = ['propertiesPanel'];


...

  ngOnInit(): void {
    this.bpmnJS = new BpmnJS({
      additionalModules: [
        BpmnPropertiesPanelModule,
        BpmnPropertiesProviderModule,
        gridModule,
        {
          __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.

entry
entry1849×547 150 KB

2

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?

3

image

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?