How to put panel fields in different tabs

Developers
1

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’.
general

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

usernameProperties.js

// Importez vos entrées de propriétés personnalisées.
// L'entrée est un champ de saisie de texte avec une logique attachée pour créer,
// mettre à jour et supprimer la propriété "UserName".
import UserName from './UserName';

import { is } from 'bpmn-js/lib/util/ModelUtil';

const LOW_PRIORITY = 500;


/**
 * Un fournisseur avec une méthode `#getGroups(element)` qui expose des groupes pour un élément de diagramme.
 *
 * @param {PropertiesPanel} propertiesPanel
 * @param {Function} translate
 */
export default function UserNamePropertiesProvider(propertiesPanel, translate) {

  // API ////////

  /**
   * Retourne les groupes fournis pour l'élément donné.
   *
   * @param {DiagramElement} element
   *
   * @return {(Object[]) => (Object[])} middleware de groupes
   */
  this.getGroups = function(element) {

    /**
     * Nous retournons un middleware qui modifie
     * les groupes existants.
     *
     * @param {Object[]} groups
     *
     * @return {Object[]} groupes modifiés
     */
    return function(groups) {

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

      return groups;
    };
  };


  // Inscription ////////

  // Enregistrez notre fournisseur de propriétés magiques personnalisées.
  // Utilisez une priorité plus faible pour vous assurer qu'il est chargé après
  // les propriétés BPMN de base.
  propertiesPanel.registerProvider(LOW_PRIORITY, this);
}

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

function Username(props) {
  const { element, id } = props;

  const modeling = useService('modeling');
  const translate = useService('translate');
  const debounce = useService('debounceInput');

  const getValue = () => {
    return element.businessObject.username || '';
  };

  const setValue = value => {
    return modeling.updateProperties(element, {
      username: value
    });
  };

  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’.
2

You Group has a property called entries. It accepts Arrays of Components. Add both your UserName and Password Component there and they will appear in the same group