Badges

Ninext mejora la interfaz de Ninox añadiendo badges a ciertas pestañas para destacar información importante.

• En la pestaña Archivos, un badge azul muestra el número de archivos adjuntos añadidos al registro.
• En la pestaña Comentarios, un badge rojo señala los mensajes nuevos, mientras que un badge gris muestra los comentarios más antiguos.
• En las pestañas personalizadas, puede modificar la apariencia (color, título) y añadir un badge para llamar la atención sobre una información clave.

Estos badges permiten detectar rápidamente las novedades sin tener que abrir cada pestaña.

Los badges, al igual que la personalización de las pestañas descrita más abajo, se desactivan en la Configuración de Ninext, sección «Mejoras de interfaz»: Badge en archivos y comentarios (activado por defecto).

Badges en las pestañas «Archivos» y «Comentarios»

Pestaña Archivos

• Badge azul: aparece cuando hay archivos que no están vinculados a ningún campo «Archivo», es decir, que se encuentran en la pestaña de adjuntos. El número mostrado corresponde a esos adjuntos independientes.
• Sin badge: no se ha detectado ningún adjunto independiente.

Pestaña Comentarios

• Badge rojo: indica el número de comentarios nuevos, es decir, publicados hace menos de 24 horas.
• Badge gris: cuando ningún comentario tiene menos de 24 horas, indica el número total de comentarios.
• Sin badge: este registro no tiene ningún comentario.

Los badges le informan de las entradas existentes bajo los iconos correspondientes:

En este caso, el 1 azul significa que hay un adjunto guardado en este registro, y el 1 gris que hay un comentario para este registro.

Badges personalizados

En la fórmula «Display field only, if» de cada pestaña puede declarar una función onUpdate que devuelva un objeto JSON que describa la pestaña y su badge. El ejemplo siguiente procede de la tabla «Badges» de la base de datos de demostración: Caption, Color, 'badge.caption'… son campos de esa tabla.

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

Personalizar las pestañas con Ninext

Con Ninext puede modificar la apariencia de las pestañas definidas por el usuario en Ninox definiendo una función llamada onUpdate en la fórmula «Display field only, if» de la pestaña. Esta función devuelve un objeto que indica a Ninext qué elementos visuales debe cambiar. Puede:

• Ajustar el título de la pestaña (caption) y el tooltip.
• Cambiar los colores del texto y del fondo (estado normal o seleccionado).
• Definir el color de fondo del formulario asociado.
• Mostrar un badge en la pestaña para destacar una información importante.

Resumen de las propiedades JSON

Funcionamiento general

• Definir la función onUpdate
  En la fórmula «Display field only, if» de la pestaña, cree una función llamada onUpdate. Esta función debe devolver un objeto (con forma de JSON) que describa qué elementos de la presentación hay que modificar. Recibe como parámetro el objeto que devolvió en la llamada anterior (un objeto vacío la primera vez).
• Devolver un booleano para la visibilidad
  La fórmula «Display field only, if» debe terminar devolviendo true o false para indicar si la pestaña debe mostrarse.
• Ninext aplica las modificaciones
  Cada vez que el usuario abre o actualiza el registro, Ninext ejecuta la función onUpdate, lee el objeto devuelto y aplica dinámicamente los cambios de apariencia a la pestaña.

Ejemplos de implementación

Ejemplo completo (varias propiedades)

"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

Comentarios:

• La función no contiene return: esa palabra no existe en el lenguaje de Ninox. Devuelve el valor de su última expresión, aquí el objeto.
• caption cambia el título de la pestaña en función de NumberTest.
• tooltip muestra un mensaje de texto al pasar el ratón.
• color y backgroundColor definen los colores en el estado no seleccionado.
• selected contiene los colores del estado activo de la pestaña.
• badge añade un indicador (número o signo de exclamación) para llamar la atención; en los demás casos, su leyenda está vacía y el badge no aparece.

Ejemplo mínimo (solo el 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

Comentarios:

• Solo se devuelve la propiedad badge.
• Si NewClients es mayor que 0, se muestra su valor, convertido en texto por text(); en caso contrario, la leyenda está vacía y el badge no aparece.
• El badge tiene texto blanco sobre fondo azul.

Puntos importantes

• Devolución final de un booleano
  Sin devolver true o false al final, la pestaña no será visible.
• Una leyenda de badge siempre en texto
  Ninext solo muestra el badge si badge.caption es un texto no vacío. Un número (3 en lugar de "3") deja el badge oculto: utilice text().
• Una función evaluada aparte
  Ninext extrae únicamente la función onUpdate de la fórmula y la evalúa aparte, en el contexto del registro. Por tanto, no ve ni las variables ni las demás funciones declaradas en otras partes de «Display field only, if»: declare dentro de onUpdate todo lo que necesite. Puede leer los campos del registro (this.NumberTest) y llamar a las funciones globales de la base de datos.