Nous avons actuellement depuis la 6.1.16 sur simplicité cette fonctionnalité lorsque l’utilisateur tente de quitter un processus sans l’avoir terminé :
Pour personnaliser les boutons, je prévois de mettre un coup de css pour ne garder que 2 boutons, mais je n’ai pas encore trouvé une approche propre et efficace pour implémenter cela. (ou mettre cette ressource dans la responsive5 ou une autre ?..)
Les styles sont applicables dans le thèmes chargés ce n’est pas bloquants.
Existe-t-il aussi une méthode dans l’API Simplicité pour personnaliser le texte ?
La fonctionnalité vient de sortir, nous essayons de prendre les bonnes pratiques dès le départ concernant cette nouvelle feature
C’est faux sauf à cliquer sur Abandonner que vous voulez retirer… les données ne sont pas perdues, elles restent en mémoire de session pour un process court/screenflow ou en base pour un processus long.
A date, il n’y pas 1 texte de sortie par processus, le message est générique à toute sortie de processus. On pourrait créer un nouveau TEXT statique dédié à ce dialog (pour ne pas utiliser la même que pour un formulaire d’objet) mais il devra expliquer les actions qui ne sont pas juste Annuler / Quitter, lesquels on pourrait également renommer en Valider l'activité et quitter / Quitter l'activité sans la valider pour être plus explicite.
Ce n’est pas simplement un problème d’UX mais d’actions possibles. Votre besoin a changé, car vous deviez pouvoir quitter en enregistrant (avec validate = enregistrer ou quitter) et en y revenant plus tard (par exemple en recliquant sur le processus du menu).
En terme d’UX, quid du rechargement de la page F5 qui est comme faire un Quitter jaune = le processus reste en cours/mémoire / sans faire le validate de l’activité courante, mais les précédentes restent accessibles. Là il est impossible d’inhiber par CSS le F5 ou d’y forcer un Abandon.
De notre point de vue, les 4 actions sont bien utiles dans un cas général d’usage (F5 compris). Et le bouton rouge Abandon (niveau “danger” bootstrap) est suffisamment explicite, et ce serait confusant de mettre uniquement “Quitter” qui ne fait que quitter l’activité, ce n’est pas du tout un Abandon total.
Merci pour ton retour et les précisions concernant le fonctionnement actuel des 4 actions.
La fonctionnalité actuelle respecte et contribue à l’esprit du standard Simplicité qui permet aux utilisateurs d’être autonomes dans leurs processus. L’objectif n’est pas de remettre en cause le standard existant ou de supprimer des actions. Il s’agit plutôt d’une demande fonctionnelle de personnalisation d’un processus, sans impacter le fonctionnement global de cette feature.
Pour répondre à cette demande tout en conservant l’intégrité du standard, voici les points que j’ai envisagé ( je re-spécifie car j’ai mal exprimer comment j’envisageais d’aborder le useCase):
• Masquer le bouton “Quitter” jaune ( via un displayNone)
• Renommer “Abandonner” en “Quitter” : Le but est d’adapter le libellé pour correspondre au vocabulaire métier tout en conservant la même action et son comportement actuel.
Nous voulions simplement avoir des pistes pour modifier le text et les libellés des actions. Peut être via une ressource css qui sera appliqué au modal du save&quit en fonction d’un rôle sur le projet…
Nous allons tester le possible pour le moment concernant ce qui peut être fais.
Bonjour, je relance sur ce post pour apporter des élements que nous avons pu tester pour personnalisé le modal d’un processus métier.
Nous avons dans le script javascript de la disposition responsive5 mis un code pour modifier le modal si nous détectons d’abord la div lié au processus métier (#wkf_CreateProcessAsEditor)et sur le modal associé(dlgmodal_saveBeforeQuit) :
Je partage le code script pour savoir si c’est une bonne facon de faire avant de voir le futur du modal et ce qui pourrais changer
(function ($) {
$(document).on("ui.loaded", function () {
// Customize UI here before home page
$("body").attr("data-theme", "light");
$("body").attr("data-brand", "rg");
const detectProcess = () => {
if ($("#wkf_CreateProcessAsEditor").length) {
console.log("L'utilisateur est dans le processus associé : #wkf_CreateProcessAsEditor");
const observeModal = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
if ($(mutation.addedNodes).is("#dlgmodal_saveBeforeQuit")) {
console.log("Abandon initié : #dlgmodal_saveBeforeQuit détecté.");
if ($("#wkf_CreateProcessAsEditor").length) {
const currentLang = $ui.getGrant().getLang();
const modalMessage = currentLang === "FRA" ? `<p>Attention : si vous abandonnez maintenant la création de ce projet, les informations seront perdues.</p><p><strong>Voulez-vous vraiment abandonner ce processus de création ?</strong></p>` : `<p>Warning: If you abandon this project creation now, the information will be lost.</p><p><strong>Do you really want to abandon this creation process?</strong></p>`;
const modalBody = $("#dlgmodal_saveBeforeQuit .modal-body");
if (modalBody.length) {
modalBody.html(modalMessage);
console.log("Texte du modal modifié en fonction de la langue.");
}
const btnSave = $("#dlgmodal_saveBeforeQuit .btn-SAVE");
const btnQuit = $("#dlgmodal_saveBeforeQuit .btn-QUIT");
if (btnSave.length) {
btnSave.css("display", "none");
console.log("Bouton Enregistrer masqué.");
}
if (btnQuit.length) {
btnQuit.css("display", "none");
console.log("Bouton Quitter masqué.");
}
} else {
console.log("Modal détecté hors du contexte du processus associé, aucune modification appliquée.");
}
}
});
});
const modalConfig = { childList: true, subtree: true };
observeModal.observe(document.body, modalConfig);
} else {
console.log("L'utilisateur n'est pas dans le processus associé, aucune action nécessaire.");
}
};
// Vérification initiale pour le processus
detectProcess();
//détecter l'apparition de la div du processus
const processObserver = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
if ($(mutation.addedNodes).is("#wkf_CreateProcessAsEditor")) {
console.log("Processus associé détecté.");
detectProcess();
}
});
});
// observateur pour surveiller le body
const processConfig = { childList: true, subtree: true };
processObserver.observe(document.body, processConfig);
console.log("Observer de mutation initialisé pour détecter le processus et le modal.");
});
})(jQuery);
J’avais aussi une petite question relative à la ressource JS dans la disposition responsive5 , j’ai voulu créer une nouvelle ressource JS Responsive5 en langue * pour pouvoir mettre ce script dans mon module mais pas possible.
Du coup, j’ai dupliqué le script en francais/anglais pour les mettre dans le bon module associé sans passer par le module UI,
Merci pour ton partage. Utiliser un MutationObserver est pratique pour ajouter du code sur des événements du DOM s’il n’y a pas de hook ou handler prévu. Mais bon c’est assez lourd à maintenir.
Vous pouvez utiliser $grant au lieu de $ui.getGrant().
Sinon il serait plus simple de passer par du simple CSS mais il manque un élément de contexte pour cibler ce dialogue sur ce processus.
On devra ajouter un data-context au dialogue avec le nom du processus ou de l’objet.
Cela devrait vous permettre d’alléger votre code avec du pur CSS, comme par exemple :
dont un des rendu spécifié est le suivant :
