Badge

Ninext arricchisce l'interfaccia di Ninox aggiungendo dei badge su alcune schede per mettere in evidenza informazioni importanti.

• Sulla scheda File, un badge blu indica il numero di file allegati aggiunti al record.
• Sulla scheda Commenti, un badge rosso segnala i nuovi messaggi, mentre un badge grigio mostra i commenti più vecchi.
• Sulle schede personalizzate, è possibile modificare l'aspetto (colore, titolo) e aggiungere un badge per attirare l'attenzione su un'informazione chiave.

Questi badge permettono di individuare rapidamente le novità senza dover aprire ogni scheda.

Badge sulle schede «File» e «Commenti»

Scheda File

• Badge blu (#4970ff): compare se esistono file non collegati ad alcun campo «File», cioè reperibili nella scheda degli allegati. Il numero mostrato corrisponde a questi allegati autonomi.
• Nessun badge: non è stato rilevato alcun allegato autonomo.

Scheda Commenti

• Badge rosso (#ff0000): segnala i nuovi commenti (per esempio quelli pubblicati da meno di 24 ore).
• Badge grigio (#999999): indica la presenza di commenti più vecchi, oppure il numero totale di commenti se nessuno è recente.
• Nessun badge: non ci sono commenti per questo record.

I badge vi informano delle voci presenti sotto le icone corrispondenti:

In questo caso l'1 blu significa che c'è un allegato salvato in questo record e l'1 grigio che c'è un commento per questo record.

Badge personalizzati

Nel campo «visualizza solo se» di ogni scheda è possibile creare una funzione contenente un JSON che definisce diverse proprietà di un badge personalizzato, contenuto compreso:

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

Personalizzare le schede con Ninext

Con Ninext è possibile modificare l'aspetto delle schede definite dall'utente in Ninox, definendo una funzione chiamata onUpdate nel trigger «Visualizza solo se» della scheda. Questa funzione restituisce un oggetto che indica a Ninext quali elementi visivi cambiare. Si può:

• Regolare il titolo della scheda (caption) e il tooltip.
• Cambiare i colori del testo e dello sfondo (stato normale o selezionato).
• Impostare il colore di sfondo del modulo associato.
• Visualizzare un badge sulla scheda per evidenziare un'informazione importante.

Panoramica rapida delle proprietà JSON

Proprietà	Descrizione	Esempio / Uso
caption	Il titolo visualizzato sulla scheda.	"To Invoice" / "View Invoice"
tooltip	Testo mostrato al passaggio del mouse sulla scheda.	"Click to view details"
color	Il colore del testo quando la scheda non è selezionata.	"#333333"
backgroundColor	Il colore di sfondo quando la scheda non è selezionata.	"#ededed"
formBackgroundColor	Il colore di sfondo del modulo (editor) quando la scheda è attiva.	"#fafafa"
selected.color	Il colore del testo quando la scheda è selezionata.	"#ffffff"
selected.backgroundColor	Il colore di sfondo quando la scheda è selezionata.	"#4970ff"
badge.caption	Il testo, il numero o il simbolo mostrato nel badge.	"3" (per 3 nuovi clienti) o "!" (avviso)
badge.color	Il colore del testo del badge.	"#ffffff"
badge.backgroundColor	Il colore di sfondo del badge.	"#4970ff"

Svolgimento generale

• Definire la funzione onUpdate
  Nel codice del trigger «Visualizza solo se» della scheda, create una funzione chiamata onUpdate. Questa funzione deve restituire un oggetto (in forma di JSON) che descrive quali elementi di visualizzazione modificare.
• Restituire un booleano per la visibilità
  Il trigger «Visualizza solo se» deve terminare restituendo true o false per indicare se la scheda vada visualizzata o meno.
• Ninext applica le modifiche
  Ogni volta che l'utente apre o aggiorna il record, Ninext esegue la funzione onUpdate, legge l'oggetto restituito e applica dinamicamente alla scheda le modifiche di aspetto.

Esempi di implementazione

Esempio completo (più proprietà)

"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

Commenti:

• caption cambia il titolo della scheda in base a NumberTest.
• tooltip mostra un messaggio di testo al passaggio del mouse.
• color e backgroundColor definiscono i colori nello stato non selezionato.
• selected contiene i colori dello stato di scheda attiva.
• badge aggiunge un indicatore (numero o punto esclamativo) per dare risalto.

Esempio minimo (solo 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

Commenti:

• Viene restituita solo la proprietà badge.
• Se NewClients è maggiore di 0, ne viene mostrato il valore; altrimenti il badge resta vuoto.
• Il badge ha testo bianco su sfondo blu.

Punti importanti

• Restituzione booleana finale
  Senza restituire true o false alla fine, la scheda non sarà visibile.