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.

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

Pestaña Archivos

Badge azul (#4970ff): 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 (#ff0000): indica que hay comentarios nuevos (por ejemplo, publicados hace menos de 24 horas).
Badge gris (#999999): señala la presencia de comentarios más antiguos, o el número total de comentarios si ninguno es reciente.
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 el campo «Mostrar solo si» de cada pestaña puede crear una función que contenga un JSON que defina distintas propiedades de un badge personalizado, incluido su contenido:

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 el desencadenador «Mostrar solo si» 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

Propiedad	Descripción	Ejemplo / Uso
caption	El título que se muestra en la pestaña.	`"To Invoice" / "View Invoice"`
tooltip	Texto que aparece al pasar el ratón sobre la pestaña.	`"Click to view details"`
color	El color del texto cuando la pestaña no está seleccionada.	`"#333333"`
backgroundColor	El color de fondo cuando la pestaña no está seleccionada.	`"#ededed"`
formBackgroundColor	El color de fondo del formulario (editor) cuando la pestaña está activa.	`"#fafafa"`
selected.color	El color del texto cuando la pestaña está seleccionada.	`"#ffffff"`
selected.backgroundColor	El color de fondo cuando la pestaña está seleccionada.	`"#4970ff"`
badge.caption	El texto, el número o el símbolo que se muestra en el badge.	`"3"` (para 3 clientes nuevos) o `"!"` (alerta)
badge.color	El color del texto del badge.	`"#ffffff"`
badge.backgroundColor	El color de fondo del badge.	`"#4970ff"`

Funcionamiento general

Definir la función onUpdate
En el código del desencadenador «Mostrar solo si» 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.
Devolver un booleano para la visibilidad
El desencadenador «Mostrar solo si» 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) 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

Comentarios:

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.

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; en caso contrario, el badge queda vacío.
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.