Badges

Ninext millora la interfície de Ninox afegint badges a determinades pestanyes per destacar informació important.

• A la pestanya Fitxers, un badge blau mostra el nombre de fitxers adjunts afegits al registre.
• A la pestanya Comentaris, un badge vermell indica que hi ha missatges nous, mentre que un badge gris mostra els comentaris més antics.
• A les pestanyes personalitzades, podeu modificar-ne l'aparença (color, títol) i afegir-hi un badge per cridar l'atenció sobre una informació clau.

Aquests badges permeten detectar ràpidament la informació nova sense haver d'obrir cada pestanya.

Els badges, com la personalització de les pestanyes descrita més avall, es desactiven a la Configuració de Ninext, secció «Millores d'interfície»: Badge en fitxers i comentaris (activat per defecte).

Badges a les pestanyes «Fitxers» i «Comentaris»

Pestanya Fitxers

• Badge blau: apareix si hi ha fitxers que no estan vinculats a cap camp «Fitxer», és a dir, que es troben sota la pestanya d'adjunts. El nombre que es mostra correspon a aquests adjunts independents.
• Cap badge: no s'ha detectat cap adjunt independent.

Pestanya Comentaris

• Badge vermell: indica el nombre de comentaris nous, és a dir, publicats fa menys de 24 hores.
• Badge gris: quan cap comentari no té menys de 24 hores, indica el nombre total de comentaris.
• Cap badge: aquest registre no té cap comentari.

Els badges us informaran de les entrades existents sota les icones corresponents:

En aquest cas, l'1 blau vol dir que hi ha un adjunt desat en aquest registre, i l'1 gris que hi ha un comentari per a aquest registre.

Badges personalitzats

A la fórmula «Display field only, if» de cada pestanya, podeu declarar una funció onUpdate que retorni un objecte JSON que descrigui la pestanya i el seu badge. L'exemple següent prové de la taula «Badges» de la base de dades d'exemple: Caption, Color, 'badge.caption'… hi són camps d'aquesta taula.

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

Personalitzar les pestanyes amb Ninext

Amb Ninext podeu modificar l'aparença de les pestanyes definides per l'usuari a Ninox definint una funció anomenada onUpdate a la fórmula «Display field only, if» de la pestanya. Aquesta funció retorna un objecte que indica a Ninext quins elements visuals cal canviar. Podeu:

• Ajustar el títol de la pestanya (caption) i el text d'ajuda.
• Canviar els colors del text i del fons (en estat normal o seleccionat).
• Definir el color de fons del formulari associat.
• Mostrar un badge a la pestanya per destacar informació important.

Visió ràpida de les propietats JSON

Funcionament general

• Definiu la funció onUpdate
  A la fórmula «Display field only, if» de la pestanya, creeu una funció anomenada onUpdate. Aquesta funció ha de retornar un objecte (tipus JSON) que descrigui quins elements de visualització cal modificar. Rep com a paràmetre l'objecte que va retornar a la crida anterior (un objecte buit la primera vegada).
• Retorneu un booleà per a la visibilitat
  La fórmula «Display field only, if» ha d'acabar retornant true o false per indicar si la pestanya s'ha de mostrar.
• Ninext aplica les modificacions
  Cada vegada que l'usuari obre o refresca el registre, Ninext executa la funció onUpdate, llegeix l'objecte retornat i aplica dinàmicament els canvis d'aparença a la pestanya.

Exemples d'implementació

Exemple complet (diverses propietats)

"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

Comentaris:

• La funció no conté cap return: aquesta paraula no existeix al llenguatge de Ninox. Retorna el valor de la seva darrera expressió, aquí l'objecte.
• caption canvia el títol de la pestanya en funció de NumberTest.
• tooltip mostra un missatge de text en passar-hi el ratolí per sobre.
• color i backgroundColor defineixen els colors en estat no seleccionat.
• selected conté els colors de l'estat actiu de la pestanya.
• badge afegeix un indicador (nombre o signe d'admiració) per emfatitzar; en els altres casos, la seva llegenda és buida i el badge no apareix.

Exemple mínim (només badge)

"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

Comentaris:

• Només es retorna la propietat badge.
• Si NewClients és més gran que 0, se'n mostra el valor, convertit en text per text(); si no, la llegenda és buida i el badge no apareix.
• El badge té el text blanc sobre fons blau.

Punts importants

• Retorn booleà final
  Sense retornar true o false al final, la pestanya no serà visible.
• Una llegenda de badge sempre en text
  Ninext només mostra el badge si badge.caption és un text no buit. Un nombre (3 en lloc de "3") deixa el badge amagat: feu servir text().
• Una funció avaluada a part
  Ninext extreu només la funció onUpdate de la fórmula i, després, l'avalua a part, en el context del registre. Per tant, no veu ni les variables ni les altres funcions declarades en altres llocs de «Display field only, if»: declareu dins d'onUpdate tot el que necessiti. Pot llegir els camps del registre (this.NumberTest) i cridar les funcions globals de la base de dades.