Comment rendre un bouton non-cliquable en JavaScript de manière persistante?

Bonjour,

Je suis actuellement confronté à un problème avec un bouton (action). Je souhaite rendre ce bouton non cliquable à l’aide d’un script JavaScript qui désactive le bouton en utilisant la propriété “disabled” selon le profil. De la manière suivante je réussi à rendre le bouton non clickable :

if(app.grant.responsibilities.includes(‘…Profil…’)){
button.disabled = true;".
}

Cependant, j’ai remarqué que le script ne s’exécute qu’une seule fois, au chargement de la page. Lorsque je rafraîchis la donnée, le bouton redevient cliquable car le script n’est pas réexécuté. Je suis donc à la recherche d’une solution pour rendre ce bouton non cliquable même après un rafraîchissement de donnée (via le fil d’Ariane par exemple).

Je suis ouvert à toutes vos suggestions et je vous remercie d’avance pour votre aide.

Mounir

[Platform]
Status=OK
Version=5.2.31
BuiltOn=2023-02-09 18:48
Git=5.2/***********************
Encoding=UTF-8
EndpointIP=10.144.56.222
EndpointURL=http://*********************
TimeZone=Europe/Paris
SystemDate=2023-03-01 17:07:05

Bonjour, pourquoi ne pas passer par l’implémentation du hook isActionEnabled ?

Parcequ’il ne permet pas de rendre le bouton non clickable mais permet le cache totalement.

Le besoin métier ici est de le laisser visible mais grisé (non clickable) pour que l’utilisateur puisse comprendre que c’est une possibilité pour un autre profil (admin notamment)

Testé dans le SCRIPT de l’objet Produit du module Demo (téléchargeable depuis l’app store)

Simplicite.UI.hooks.DemoProduct = function(o, cbk) {
	try {
		console.log("DemoProduct hooks loading...");
		var p = o.locals.ui;
		if (p && o.isMainInstance()) {
			p.form.onload = function(ctn, obj, params) {
				var disabled = !app.getGrant().hasResponsibility("DEMO_ADMIN")
				$('[data-action="DEMO_INCSTOCK"]').prop("disabled", disabled); // Increase stock button disabled for users not in DEMO_ADMIN Group 
			};
		}
		//...
	} catch (e) {
		app.error("Error in Simplicite.UI.hooks.DemoProduct: " + e.message);
	} finally {
		console.log("DemoProduct hooks loaded.");
		cbk && cbk(); // final callback
	}
};

ATTENTION : rien n’empêche un user d’enlever la propriété disabled en éditant le html de la page. Pensez donc à revérifier qu’il y est habilité dans la méthode appelée par l’action.

1 Like

Bonjour,

J’ai essayé mais même comportement, mon problème provient surtout sur le fait que le script ne s’exécute qu’au premier chargement de l’objet
Il suffit d’ouvrir les logs du navigateur pour s’en rendre compte, dans l’exemple ici on peut voir

DemoProduct hooks loading…
DemoProduct hooks loaded.

Lorsqu’on ouvre DemoProduct pour la première fois.

Si je retourne sur l’accueil (via le logo par exemple (sans rafraichir le navigateur) ) et que je reviens sur DemoProduct (dans un formulaire), le script n’est pas rejoué (pas de nouveaux logs), ce faisant le bouton récupère son état initiale càd clickable.

Peut être m’y prendrais-je de la mauvaise manière…

Merci encore pour vos retours

Autant pour moi, le onload est effectivement rappelé à chaque ouverture d’un formulaire sur mon instance SIM.
C’est uniquement sur mon environnement dev qui se passe quelque chose de bizarre.

Où est affiché sur le bouton d’action ? Sur la liste ou formulaire ?

Dans mon exemple, c’est le hook onload du formulaire qui est implémenté, il est donc exécuté à chaque affichage du formulaire de l’objet - c’est donc applicable à un bouton sur formulaire.

Si votre bouton est affiché en liste, il faut implémenter le hook onload de la liste.

p.list.onload = function(ctn, obj, params){
	...	
}
1 Like

Merci pour ton aide précieuse Alistair !

Après avoir examiné de plus près mon code, je me suis rendu compte que j’avais fait une erreur d’inattention en désactivant le bouton en dehors du hook p.list.onload. C’est pourquoi cela ne fonctionnait pas correctement…

Encore merci.

Bien cordialement,

Mounir

This topic was automatically closed 60 minutes after the last reply. New replies are no longer allowed.