Depuis notre passage en V6.2, nous avons un problème de perfs à l’affichage des formulaires. On dirait que le isActionEnable et le onLoad se déclenchent après le chargement des onglets, ce qui laisse les actions Enabled quelques secondes (particulièrement à la première ouverture avec le chargement des contraintes)
Dans l’exemple ci-dessous, nous avons une transition d’état To be validated qui est désactivée dans le isActionEnable, et une action custom Global validation request qui est disabled en javascript dans le onLoad.
Sommes nous les seuls à avoir ce souci ? Est-ce que ça peut être dû à un problème de chargement des onglets, trop de contraintes ou de pillbox par exemple ?
le isActionEnabled est back et envoyé dans les metadata donc avant affichage. C’est bizarre que le bouton soit actif puis retiré. Il doit aussi être modifié par contrainte ou code front.
onload : comme son nom l’indique ça passe une fois le formulaire affiché.
Pourquoi ne pas utiliser le hook front preload (ou la methode de classe preLoadForm) avant affichage mais après avoir reçu/préparé les métadata ?
beforeload / beforeLoadForm : avant les metadata
preload / preLoadForm : avant affichage avec les metadata
onload / onLoadForm : après affichage
onunload / onUnloadForm : quand on quitte
La lenteur est surement lié au nombre de requetes Ajax / volume de données que vous faites dans votre formulaire.
Au temps pour moi, en effet les deux boutons sont masqués / disabled dans le onLoad car on veut garder la transition possible via une action custom.
En revanche si j’essaie de déplacer ça dans le preLoad, je ne sais pas où le faire car je n’ai pas accès à la page - ou alors je cherche pas au bon endroit ?
Voici ce que je fais dans le onLoad
if (tbvActionButton !== null)
$(tbvActionButton).attr('style','display:none !important');
//Enable or disable TBV button according to completion
if (cplInt < 100)
{
var tbvButton = $('[data-action="askForValidation"]');
$(tbvButton).prop("disabled", true);
$(tbvButton).title = 'Please complete application to 100% before requesting validation';
}
Alors, je m’en sors moyennant beaucoup de bricolage + un souci d’affichage résiduel.
(en fait je souhaite avoir l’un des deux boutons affiché avec effet disabled (grisé))
Dans le preLoad, je cache la transition et l’action a.enabled = false n’est pas pris en compte, je dois aller chercher l’action dans la variable p.
let t = obj.getTransition("RCIAPPRECORDSTATUS-TOBEVALID");
if (t) t.enabled = false;
let formAct = p.actions.form.find(o => o.name === 'askForValidation');
if (formAct)
formAct.enabled = false;
Dans le onLoad, je réaffiche mon action et je lui donne l’effet disabled
var tbvButton = $('[data-action="askForValidation"]');
if (tbvButton)
$(tbvButton).removeClass('disabled');
if (cplInt < 100)
{
$(tbvButton).prop("disabled", true);
$(tbvButton).title = 'Please complete application to 100% before requesting validation';
}
Le souci d’affichage concerne la transition d’état sur laquelle la classe disabled ne fonctionne pas bien : le style de ma liste de valeurs s’affiche par dessus celui du disabled.
Il apparaît donc sur le form jusqu’à ce que je le cache explicitement dans le onLoad.
Si tu as une solution, nous sommes preneurs, mais au moins nous n’avons plus l’action cliquable pendant plusieurs secondes à l’affichage donc c’est moins embêtant.
Exact tu as raison, en fait au moment de preload, les métadata ont déjà été digérées dans les paramètres d’affichage du formulaire (variable du scope p).
Il faut surement forcer ta couleur par un !important qui va écraser le style de l’ENUM, exemple :
Mais c’est plutôt une anomalie, le style de l’ENUM ne devrait pas être placé si l’action est inactive. Comme par défaut la UI masque un bouton disabled (besoin de baisser la charge cognitive en terme d’UX), on a jamais eu ce pb de surcharge CSS. Mais bon on peut aussi vouloir griser la couleur de l’ENUM (via opacity ou grayscale).
Il manque surement un $(tbvButton).attr("title", ...)
Comme toujours, tu peux surcharger du CSS en ajoutant une ressource STYLES à ton objet (ou dans le STYLES de la disposition responsive5 si c’est global).
