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