Comment modifier le résultat d’une aide à la saisie ?
Prérequis
Afin de pouvoir suivre ce guide, il faut préalablement savoir Comment déclencher un code javascript lors de la sélection d’un menu spécifique ?.
Comment procéder ?
Dans notre exemple, on souhaite calculer une aide à la saisie côté client. Nous allons intercepter l’événement
SmartFieldHelperSearch pour modifier le résultat de l’aide à la saisie des boissons dans le Smart Element PLAT.
Recommandations
Si vous n’êtes pas familier avec l’événement SmartFieldHelperSearch, il est recommandé de lire la documentation
associée
disponible ici
Modifier le fichier src/public/menuEdit.js :
window.ank.smartElement.globalController.registerFunction("menuEdit", (controller) => {
controller.addEventListener("beforeValidate", function eventBeforeSave(event, documentObject, data) {
const description = controller.getValue("menu_description").value;
if (description == null) {
event.preventDefault();
controller.showMessage({
type: "error",
message: "Le menu n’a pas de description.",
});
}
const price = controller.getValue("menu_price").value;
if (price > 30) {
event.preventDefault();
controller.showMessage({
type: "warning",
message: "Le menu est au-dessus de 30 €",
});
}
});
controller.addEventListener("ready", function setMenuConstraint(event, smartElement) {
controller.addConstraint(
{
smartFieldCheck: (sf) => sf.id === "menu_title",
name: "menuTitleConstraint",
},
function (smartElement, smartField, values) {
const titleFirstChar = values.current.value.charAt(0);
const isFirstCharUpperCase = titleFirstChar.toUpperCase() === titleFirstChar;
if (!isFirstCharUpperCase) {
return `Le titre doit commencer par une majuscule`;
}
}
);
});
controller.addEventListener(
"smartFieldHelperSearch",
{
smartFieldCheck: (smartField, smartElement) => {
return smartField.id === "menu_boisson";
},
},
function changeAutocomplete(event, smartElement, smartField, options) {
event.preventDefault();
options.setResult([
{
title: "[Recommandé] Coca-Cola",
values: {
menu_boisson: {
value: 1186,
},
},
},
{
title: "Ice-Tea",
values: {
menu_boisson: {
value: 1189,
},
},
},
]);
}
);
});
Attention
Les titres et identifiants de Smart Element sont donnés ici à titre d’exemple. Pour le faire fonctionner sur votre projet, remplacer les valeurs des boissons que vous avez créées.
Vous pouvez maintenant déployer vos modifications :
npx @anakeen/anakeen-cli deploy -c http://localhost:8080/control -s . -u admin -p anakeen --reinstall
Et voir le résultat sur un MENU en création ou édition :
http://localhost:8080/api/v2/smart-elements/MENU/views/!defaultCreation.html
