Détection de changement d'écran avec un objet externe

Bonjour,

J’aimerai savoir s’il existe un utilitaire front qui permet de détecter l’action utilisateur s’apprêtant à changer de page. Ceci pour l’intégrer à un objet externe.

L’objectif est d’avoir le même comportement que celui des objets métiers, où une pop-up de confirmation de changement page apparait sur les formulaires lorsque qu’une donnée a été modifiée (déclenché lorsque obj.locals.hasChanged ===true).

Pop-up ci-dessous :
image
La gestion de la pop-up (contenu et actions) serait fait par code dans notre script.
Cordialement

N’est-ce pas le même sujet que http://community.simplicite.io/t/comment-detecter-un-changement-de-page-pour-executer-du-code-front ?

C’est un peu plus complexe que ça , il faut distinguer :

  1. le onunload qui est un simple handler permettant par exemple de détruire des objets javascript quand on quitte=décharge un container.

Le container doit avoir la class js-content-unload et un handler ui.content.unload.

ctn.addClass("js-content-unload").on("ui.content.unload", handler);

Ensuite c’est la méthode front $ui.canCloseContent(container, callback) qui :

  • invoke les handlers “ui.content.unload” du container, mais ceux-ci sont non bloquants.
  • elle regarde aussi s’il faut poser la question à l’utilisateur s’il y a des choses à sauvegarder

Attention si on fait un $(ctn).html("…") aucun handler ne sera appelé, il faut obligatoirement utiliser le pattern suivant pour appeler les handlers et/ou afficher le popup avant de remplacer un contenu :

var ctn = $("#work"); // for example the main work zone
$ui.canCloseContent(ctn, function() {
    $ui.view.getContent(ctn).html("...");
});

C’est comme ceci que les displayForm, displayList… fonctionnent avant de remplacer le contenu du container de destination (1 container simplicité = une nav + un content + éventuel split, mais ça peut être une simple div).

  1. le popup “save or quit” est lié au hasChanged de l’objet

Le popup bloquant est lié à la présence de l’attribut data-event-close="ui.content.close" sur le container, il est positionné en appelant :

$ui.bindSaveAndQuit(ctn, obj, { msg }, save)

  • A appeler avant que l’objet ne soit changé par l’utilisateur ou par code.
  • Avec une fonction save/callback qui sera appelé si l’utilisateur dit oui, elle prend en paramètre la fonction à appeler quand le “save” est terminé :
function save(cbk) {
  // save something...
  // then chain when save is done to continue closing
  // (i.e. call ui.content.unload handlers)
  cbk(); 
}
  • Si l’attribut data-event-close est retiré ou absent, il n’y aura pas de popup = canCloseContent passant mais sans save.
  • Sinon le popup s’affiche si la propriété obj.localParameter(“hasChanged”) == true.
    Donc il suffit de la changer a un moment donné dans votre composant.

Je pense qu’on est à mi-chemin entre les 2 réponses.

Binder un évènement sur la div work permet effectivement de détecter des changements de page, mais cela ne me permet pas de stopper temporairement la redirection.

La solution que tu proposes (@Francois) semble s’appliquer pour un objet métier (pour le paramètre obj).

Est-ce que ta solution s’adapte aux objets externes ? Ou est-il préférable de trouver un moyen de stopper la redirection le temps de répondre à la pop-up ?

Jean-Baptiste

N’importe quel objet metier peut servir. Il suffit d’utiliser une instance bidon :

var obj = app.getBusinessObject(“myobject”,“canclose”);

Il sert juste dans ton cas à flaguer un hasChanged . Cette notion n’existe pas sur un objet externe.