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.

Badges sur les onglets « Fichiers » et « Commentaires »

Onglet Fichiers

Badge bleu (#4970ff) : 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 (#ff0000) : signale de nouveaux commentaires (par exemple ceux publiés il y a moins de 24 heures).
Badge gris (#999999) : indique la présence de commentaires plus anciens, ou le nombre total de commentaires si aucun n'est récent.
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 le champ « display only, if » de chaque onglet, vous pouvez créer une fonction contenant un JSON qui définit différentes propriétés d'un badge personnalisé — son contenu compris :

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 le déclencheur « Display 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

Propriété	Description	Exemple / usage
caption	Le titre affiché sur l'onglet.	`"To Invoice" / "View Invoice"`
tooltip	Le texte affiché au survol de l'onglet.	`"Click to view details"`
color	La couleur du texte lorsque l'onglet n'est pas sélectionné.	`"#333333"`
backgroundColor	La couleur de fond lorsque l'onglet n'est pas sélectionné.	`"#ededed"`
formBackgroundColor	La couleur de fond du formulaire (éditeur) lorsque l'onglet est actif.	`"#fafafa"`
selected.color	La couleur du texte lorsque l'onglet est sélectionné.	`"#ffffff"`
selected.backgroundColor	La couleur de fond lorsque l'onglet est sélectionné.	`"#4970ff"`
badge.caption	Le texte, le nombre ou le symbole affiché dans le badge.	`"3"` (pour 3 nouveaux clients) ou `"!"` (alerte)
badge.color	La couleur du texte du badge.	`"#ffffff"`
badge.backgroundColor	La couleur de fond du badge.	`"#4970ff"`

Marche à suivre générale

Définir la fonction onUpdate
Dans le code du déclencheur « Display 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.
Renvoyer un booléen pour la visibilité
Le déclencheur « Display 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) do
    let nb := this.NumberTest;
    return {
        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 :

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.

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 ; sinon, le badge reste vide.
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.