I have a BPMN project in which I have a panel with different fields. I have all my fields displayed, but I’d like them to be categorised in tabs like the ‘General’ tab where we find ‘name’ and ‘ID’. Here .

I’d like my Username and Password fields to be in the same category.Here (“User” for example)

//UsernamePropertiesProvider.js

  this.getGroups = function(element) {
 
    return function(groups) {

      if (is(element, 'bpmn:SubProcess')) {
        groups.push(createUserNameGroup(element, translate));
      }

      return groups;
    };
  };

UserNamePropertiesProvider.$inject = [ 'propertiesPanel', 'translate' ];

function createUserNameGroup(element, translate) {

  const UserNameGroup = {
    id: 'UserName',
    label: translate('Username'),
    entries: UserName(element),
    tooltip: translate("UserName"),
  };

  return UserNameGroup;
}


//username.js

import { html } from 'htm/preact';

import { TextFieldEntry, isTextFieldEntryEdited } from '@bpmn-io/properties-panel';
import { useService } from 'bpmn-js-properties-panel';

export default function(element) {

  return [
    {
      id: 'username',
      element,
      component: Username,
      isEdited: isTextFieldEntryEdited
    }
  ];
}

  return html`<${TextFieldEntry}
    id=${ id }
    description=${ translate('Nom d'utilisateur') }
    element=${ element }
    getValue=${ getValue }
    setValue=${ setValue }
    debounce=${ debounce }
    tooltip=${ translate('Écris ton nom d'utilisateur') }
  />`;
}```

I have the same thing with ‘Password’.

I've used this document : [https://github.com/bpmn-io/docs.bpmn.io/blob/main/docs/Examples/bpmn-examples/properties-panel-extension.md](https://stackoverflow.com)
I don't have a way of doing this even though it looks easy

Thank you