Événement de bouton

Dans la table « ButtonEvent » de la base de démonstration, les champs de la fiche (« caption », « the color », « Tooltip », « badge.caption », « badge.color ») règlent le libellé, la couleur, l'infobulle et le badge du bouton « Bonjour », au moyen de la fonction onUpdate décrite ci-dessous.

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 la formule « Display field only, if » du bouton. 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, parmi les trois styles de bouton de Ninox : "blue" (fond bleu), "red" (fond rose, texte rouge) et "grey" (fond blanc, contour bleu, comme le bouton « Bonjour » ci-dessus).
• Afficher un badge pour mettre en évidence une information importante.

Cette fonction se désactive dans les Paramètres Ninext, section « Améliorations de l'interface » : Événements de bouton (onUpdate) (activé par défaut).

Aperçu rapide des propriétés JSON

Marche à suivre générale

1. Définir la fonction onUpdate
   Dans la formule « Display field 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. Elle reçoit en paramètre le libellé et la couleur du bouton tels qu'ils sont définis dans Ninox : { caption, buttonColor }.
2. Renvoyer un booléen pour la visibilité
   La formule 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 la formule « Display field 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.
• Une légende de badge toujours en texte
  Ninext n'affiche le badge que si badge.caption est un texte non vide. Un nombre (3 au lieu de "3") laisse le badge masqué : utilisez text().
• Une fonction évaluée à part
  Ninext extrait la seule fonction onUpdate de la formule, puis l'évalue à part, dans le contexte de l'enregistrement. Elle ne voit donc ni les variables ni les autres fonctions déclarées ailleurs dans « Display field only, if » : déclarez à l'intérieur d'onUpdate tout ce dont elle a besoin. Elle peut lire les champs de l'enregistrement (this.Count) et appeler les fonctions globales de la base.