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.

Badges a les pestanyes «Fitxers» i «Comentaris»

Pestanya Fitxers

Badge blau (#4970ff): 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 (#ff0000): indica que hi ha comentaris nous (per exemple, els publicats fa menys de 24 hores).
Badge gris (#999999): mostra la presència de comentaris més antics, o el nombre total de comentaris si no n'hi ha cap de recent.
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

Al camp «display only, if» de cada pestanya podeu crear una funció que contingui un JSON que defineixi diferents propietats d'un badge personalitzat, inclòs el seu contingut:

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 l'activador «Display 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

Propietat	Descripció	Exemple / Ús
caption	El títol que es mostra a la pestanya.	`"To Invoice" / "View Invoice"`
tooltip	Text que apareix en passar el ratolí per sobre de la pestanya.	`"Click to view details"`
color	El color del text quan la pestanya no està seleccionada.	`"#333333"`
backgroundColor	El color de fons quan la pestanya no està seleccionada.	`"#ededed"`
formBackgroundColor	El color de fons del formulari (editor) quan la pestanya està activa.	`"#fafafa"`
selected.color	El color del text quan la pestanya està seleccionada.	`"#ffffff"`
selected.backgroundColor	El color de fons quan la pestanya està seleccionada.	`"#4970ff"`
badge.caption	El text, el nombre o el símbol que es mostra al badge.	`"3"` (per a 3 clients nous) o `"!"` (alerta)
badge.color	El color del text del badge.	`"#ffffff"`
badge.backgroundColor	El color de fons del badge.	`"#4970ff"`

Funcionament general

Definiu la funció onUpdate
Al codi de l'activador «Display 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.
Retorneu un booleà per a la visibilitat
L'activador «Display 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) 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

Comentaris:

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.

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; si no, el badge queda en blanc.
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.