Événement de bouton

image.png

Personnaliser les boutons avec Ninext

Avec Ninext, vous pouvez modifier l'apparence des boutons de Ninox en définissant une fonction nommée onUpdate dans le déclencheur « Display only if ». Cette fonction doit renvoyer un objet décrivant les éléments visuels à modifier, et le script doit se terminer par un booléen indiquant si le bouton doit être affiché.

Cette approche vous permet de :

  • Changer le libellé du bouton.
  • Modifier l'infobulle (ou le titre) du bouton.
  • Changer la couleur du bouton à l'aide de classes prédéfinies.
  • Afficher un badge pour mettre en évidence une information importante.

Aperçu rapide des propriétés JSON

PropriétéDescriptionExemple / usage
captionLe texte affiché sur le bouton."Send" / "Cancel"
tooltip ou titleLe texte affiché au survol, sous forme d'infobulle."Click to send"
buttonColorLa classe de couleur à appliquer au bouton (par exemple "blue", "red", "grey")."blue"
badgeUn objet décrivant le badge à afficher sur le bouton.Voir le détail ci-dessous
badge.captionLe texte, le nombre ou le symbole affiché sur le badge."3" or "!"
badge.colorLa couleur du badge (par défaut ou personnalisée)."red" or "#4970ff"

Marche à suivre générale

  1. Définir la fonction onUpdate
    Dans le code du déclencheur « Display only if » du bouton, déclarez une fonction nommée onUpdate. Cette fonction renvoie un objet (au format JSON) décrivant les éléments à modifier.
  2. Renvoyer un booléen pour la visibilité
    Le déclencheur doit se terminer en renvoyant un booléen (true ou false) qui indique si le bouton doit être affiché.
  3. Ninext applique les modifications
    À l'ouverture ou au rafraîchissement de l'enregistrement, Ninext exécute la fonction onUpdate, lit l'objet renvoyé et applique dynamiquement les changements d'apparence au bouton.

Mise en œuvre

Bloc de code unique dans le déclencheur « Display only if »

"Declaration of the onUpdate function that customizes the button";
function onUpdate(buttonValues : any) do
 let count := this.Count;
 {
      caption: if count > 0 then
          "Send (" + count + ")"
      else
          "Send"
      end,
      tooltip: "Click to send your request",
      buttonColor: if count > 0 then "red" else "blue" end,
      badge: {
           caption: if count > 0 then text(count) else "" end,
           color: "red"
      }
 }
end;

"Determination of the button's visibility";
this.Count >= 0

Commentaires :

  • La fonction onUpdate construit un objet qui permet de modifier le libellé du bouton (avec un indicateur numérique si Count est positif), l'infobulle, la couleur du bouton, et d'afficher un badge.
  • Le dernier bloc de code renvoie un booléen qui détermine si le bouton doit être affiché.

Exemple minimal (badge seul)

"Declaration of the onUpdate function to display only a badge";
function onUpdate(buttonValues : any) do
 let newItems := this.newItems;
 {
      badge: {
           caption: if newItems > 0 then text(newItems) else "" end,
           color: "red"
      }
     }
end;
"The button is always displayed";
true

Commentaires :

  • Seule la propriété badge est renvoyée, afin d'afficher une valeur si NewItems est supérieur à 0.
  • Le bouton est affiché sans condition.

Points importants

  • Renvoi final d'un booléen
    Sans renvoi de true ou false à la fin, le bouton ne sera pas visible.