How to create drop-down menus in the panel

[DoxT1]

I have a panel with a form. I’ve created a drop-down menu with different options:

//dropDownPropertiesProvider

// 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é "dropdown".
import dropdown from './DropDown';

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

import i18n from 'i18next';

import initI18n from '../app/i18n'

//appel de l'internationalisation
initI18n();
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 DropDownPropertiesProvider(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:ServiceTask')) {
        groups.push(createdropdownGroup(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);
}

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

function createdropdownGroup(element, translate) {


  const dropdownGroup = {
    id: 'dropdown',
    label: i18n.t('Type'),
    entries: dropdown(element),
    tooltip: translate(""),
  };

  return dropdownGroup;
}

and the other code

DropDown.js

import { html } from 'htm/preact';
import { useService } from 'bpmn-js-properties-panel';
import { DropdownButton, isTextFieldEntryEdited } from '@bpmn-io/properties-panel';

// Importer les options depuis le fichier JSON
import dropdownOptions from '../resources/DropDownModdle';

export default function (element) {
  return [
    {
      id: 'DropDown', // Identifiant unique pour le groupe de propriétés
      element, // L'élément BPMN actuel
      component: DropDownButton, // Composant à utiliser pour cette propriété
      isEdited: isTextFieldEntryEdited // Fonction pour vérifier si l'entrée de texte a été modifiée
    }
  ];
}

function DropDownButton(props) {
  const { element, id } = props; // Destructuration des props pour obtenir element et id

  const modeling = useService('modeling'); // Utilisation du service 'modeling' pour mettre à jour les propriétés du modèle
  const translate = useService('translate'); // Utilisation du service 'translate' pour traduire les chaînes de texte
  const debounce = useService('debounceInput'); // Utilisation du service 'debounceInput' pour éviter les mises à jour trop fréquentes

  // Extraire les options depuis le fichier JSON
  const options = dropdownOptions.enumerations.find(enumerations => enumerations.name === 'DropdownOptions').values;

  // Fonction pour obtenir la valeur actuelle de la propriété DropDown de l'élément
  const getValue = () => {
    return element.businessObject.DropDown || '';
  };

  // Fonction pour mettre à jour la propriété DropDown de l'élément avec une nouvelle valeur
  const setValue = value => {
    console.log('Setting Value:', value);
    modeling.updateProperties(element, {
      DropDown: value
    });
  };

function ElementHidden(option){
  const Basic = option.value === 'Basic';
  const Token = option.value === 'Bearer Token';
  const Api = option.value === 'Api Key';

  // Ajoute ou enleve la class hidden à ceux qui l'ont ces data-group-id
  if (Basic) {
    const ElementBasicHidden = document.querySelectorAll('[data-group-id="group-Token"], [data-group-id="group-apikeyloc"], [data-group-id="group-ApiKeyName"], [data-group-id="group-ApiKeyValue"]');
    ElementBasicHidden.forEach(element => {
      element.classList.add('hidden');
    });

    const ElementBasicRemove = document.querySelectorAll('[data-group-id="group-UserName"], [data-group-id="group-password"]');
    ElementBasicRemove.forEach(element => {
      element.classList.remove('hidden');
    });
  } else if (Token) {
    const ElementTokenHidden = document.querySelectorAll('[data-group-id="group-UserName"], [data-group-id="group-password"], [data-group-id="group-apikeyloc"], [data-group-id="group-ApiKeyName"], [data-group-id="group-ApiKeyValue"]');
    ElementTokenHidden.forEach(element => {
      element.classList.add('hidden');
    });

    const ElementTokenRemove = document.querySelectorAll('[data-group-id="group-Token"]');
    ElementTokenRemove.forEach(element => {
      element.classList.remove('hidden');
    });
  } else if (Api) {
    const ElementApiHidden = document.querySelectorAll('[data-group-id="group-UserName"], [data-group-id="group-password"], [data-group-id="group-Token"]');
    ElementApiHidden.forEach(element => {
      element.classList.add('hidden');
    });

    const ElementApiRemove = document.querySelectorAll('[data-group-id="group-apikeyloc"], [data-group-id="group-ApiKeyName"], [data-group-id="group-ApiKeyValue"]');
    ElementApiRemove.forEach(element => {
      element.classList.remove('hidden');
    });
  }
}

  // Création des éléments de menu
  const menuItems = options.map(option => ({
    entry: option.name,
    action: () => {
      console.log('Option Clicked:', option.value);
      setValue(option.value);
      ElementHidden(option);
    }
  }));



  return html`
  <${DropdownButton}
    id=${id}
    class="bio-properties-panel-dropdown"
    element=${element}
    menuItems=${menuItems}
    debounce=${ debounce }
    children=${getValue() ? options.find(opt => opt.value === getValue()).name : translate("None")}
  />
`;

}

and the json

{
  "name": "DropDown",
  "prefix": "DropDown",
  "uri": "http://DropDown",
  "xml": {
    "tagAlias": "lowerCase"
  },
  "associations": [],
  "types": [
    {
      "name": "BewitchedTask",
      "extends": [
        "bpmn:ServiceTask"
      ],
      "properties": [
        {
          "name": "DropDown",
          "isAttr": true,
          "type": "String"
        },
        {
          "name": "DropDownOptions",
          "isAttr": false,
          "type": "DropdownOptions"
        }
      ]
    }
  ],
  "enumerations": [
    {
      "name": "DropdownOptions",
      "values": [
        {
          "name": "Basic",
          "value": "Basic"
        },
        {
          "name": "Bearer Token",
          "value": "Bearer Token"
        },
        {
          "name": "Api Key",
          "value": "Api Key"
        }
      ]
    }
  ]
}

I would like that when I choose one of the 3 options, it displays me some boxes of the form and makes me disappear others. How can I do this? Thank you

[barmac]

If I understand it correctly, you want to decide on which entries appear in the properties panel based on the element properties. You can do that by changing the entries property returned by the properties panel (in createdropdownGroup). If it’s about something different, please explain where you got stuck in your solution.