Badges

Ninext enrichit l'interface de Ninox en ajoutant des badges sur certains onglets, afin de mettre en évidence les informations importantes.

• Sur l'onglet Fichiers, un badge bleu affiche le nombre de fichiers joints ajoutés à l'enregistrement.
• Sur l'onglet Commentaires, un badge rouge signale les nouveaux messages, tandis qu'un badge gris indique les commentaires plus anciens.
• Sur les onglets personnalisés, vous pouvez modifier l'apparence (couleur, titre) et ajouter un badge pour attirer l'attention sur une information clé.

Ces badges permettent de repérer rapidement les nouveautés sans avoir à ouvrir chaque onglet.

Les badges, comme la personnalisation des onglets décrite plus bas, se désactivent dans les Paramètres Ninext, section « Améliorations de l'interface » : Badge sur fichiers et commentaires (activé par défaut).

Badges sur les onglets « Fichiers » et « Commentaires »

Onglet Fichiers

• Badge bleu : apparaît s'il existe des fichiers qui ne sont rattachés à aucun champ « Fichier », c'est-à-dire ceux que l'on trouve sous l'onglet des pièces jointes. Le nombre affiché correspond à ces pièces jointes autonomes.
• Pas de badge : aucune pièce jointe autonome n'a été détectée.

Onglet Commentaires

• Badge rouge : donne le nombre de nouveaux commentaires, c'est-à-dire publiés depuis moins de 24 heures.
• Badge gris : quand aucun commentaire n'a moins de 24 heures, donne le nombre total de commentaires.
• Pas de badge : cet enregistrement n'a aucun commentaire.

Les badges vous renseignent sur les entrées existantes sous les icônes correspondantes :

Ici, le 1 bleu signifie qu'une pièce jointe est enregistrée sur cet enregistrement, et le 1 gris qu'il porte un commentaire.

Badges personnalisés

Dans la formule « Display field only, if » de chaque onglet, vous pouvez déclarer une fonction onUpdate qui renvoie un objet JSON décrivant l'onglet et son badge. L'exemple ci-dessous vient de la table « Badges » de la base de démonstration : Caption, Color, 'badge.caption'… y sont des champs de cette table.

function onUpdate(event : any) do
 debug(formatJSON(event));
 {
  caption: Caption,
  color: Color,
  backgroundColor: BackgroundColor,
  tooltip: Tooltip,
  badge: {
   caption: 'badge.caption',
   color: 'badge.color',
   backgroundColor: 'badge.backgroundColor'
  }
 }
end;
true

Personnaliser les onglets avec Ninext

Avec Ninext, vous pouvez modifier l'apparence des onglets définis par l'utilisateur dans Ninox, en définissant une fonction nommée onUpdate dans la formule « Display field only, if » de l'onglet. Cette fonction renvoie un objet qui indique à Ninext quels éléments visuels changer. Vous pouvez :

• Ajuster le titre de l'onglet (caption) et son infobulle.
• Changer les couleurs du texte et du fond (état normal ou sélectionné).
• Définir la couleur de fond du formulaire associé.
• Afficher un badge sur l'onglet pour mettre en évidence une information importante.

Aperçu rapide des propriétés JSON

Marche à suivre générale

• Définir la fonction onUpdate
  Dans la formule « Display field only, if » de l'onglet, créez une fonction nommée onUpdate. Cette fonction doit renvoyer un objet (de type JSON) décrivant les éléments d'affichage à modifier. Elle reçoit en paramètre l'objet qu'elle a renvoyé à l'appel précédent (un objet vide la première fois).
• Renvoyer un booléen pour la visibilité
  La formule « Display field only, if » doit se terminer en renvoyant true ou false, selon que l'onglet doit être affiché ou non.
• Ninext applique les modifications
  Chaque fois que l'utilisateur ouvre ou rafraîchit l'enregistrement, Ninext exécute la fonction onUpdate, lit l'objet renvoyé et applique dynamiquement les changements d'apparence à l'onglet.

Exemples de mise en œuvre

Exemple complet (plusieurs propriétés)

"Declaration of the onUpdate function";
function onUpdate(tabValues : any) do
    let nb := this.NumberTest;
    {
        caption: if nb > 0 then "To Invoice" else "View Invoice" end,
        tooltip: "Click to view details",
        color: "#333333",
        backgroundColor: "#ededed",
        formBackgroundColor: "#fafafa",
        selected: {
            color: "#ffffff",
            backgroundColor: "#4970ff"
        },
        badge: {
            caption: if nb = 3 then "3" else if nb = -1 then "!" else "" end,
            color: "#ffffff",
            backgroundColor: if nb = 3 then "#4970ff" else if nb = -1 then "#ff0000" else "#cccccc" end
        }
    }
end;

"Determine whether the tab is displayed: shown if NumberTest > 0";
if this.NumberTest > 0 then
    true
else
    false
end

Commentaires :

• La fonction ne contient pas de return : ce mot n'existe pas dans le langage de Ninox. Elle renvoie la valeur de sa dernière expression, ici l'objet.
• caption change le titre de l'onglet en fonction de NumberTest.
• tooltip affiche un message au survol.
• color et backgroundColor définissent les couleurs de l'état non sélectionné.
• selected contient les couleurs de l'onglet actif.
• badge ajoute un indicateur (nombre ou point d'exclamation) pour attirer l'œil ; dans les autres cas, sa légende est vide et le badge n'apparaît pas.

Exemple minimal (badge seul)

"Declaration of the onUpdate function";
function onUpdate(tabValues : any) do
 let newClients := this.NewClients;
 {
  badge: {
   caption: if newClients > 0 then text(newClients) else "" end,
   color: "#ffffff",
   backgroundColor: "#4970ff"
  }
 }
end;
"The tab is always displayed";
true

Commentaires :

• Seule la propriété badge est renvoyée.
• Si NewClients est supérieur à 0, sa valeur est affichée, convertie en texte par text() ; sinon, la légende est vide et le badge n'apparaît pas.
• Le badge a un texte blanc sur fond bleu.

Points importants

• Renvoi final d'un booléen
  Sans renvoi de true ou false à la fin, l'onglet 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.NumberTest) et appeler les fonctions globales de la base.