Eventos de botón

Registro ButtonEvent de la base de datos de demostración: el botón «Bonjour» lleva un badge rojo «2»

En la tabla «ButtonEvent» de la base de datos de demostración, los campos del registro («caption», «the color», «Tooltip», «badge.caption», «badge.color») ajustan la etiqueta, el color, el tooltip y el badge del botón «Bonjour», mediante la función onUpdate descrita más abajo.

Personalizar los botones con Ninext

Con Ninext puede modificar la apariencia de los botones de Ninox definiendo una función llamada onUpdate en la fórmula «Display field only, if» del botón. Esta función debe devolver un objeto que describa los elementos visuales que hay que modificar, y el script debe terminar con un booleano que indique si el botón debe mostrarse.

Con este método puede:

  • Cambiar el texto del botón.
  • Actualizar el tooltip (o título) del botón.
  • Cambiar el color del botón, entre los tres estilos de botón de Ninox: "blue" (fondo azul), "red" (fondo rosa, texto rojo) y "grey" (fondo blanco, contorno azul, como el botón «Bonjour» de arriba).
  • Mostrar un badge para destacar una información importante.

Esta función se desactiva en la Configuración de Ninext, sección «Mejoras de interfaz»: Eventos de botón (onUpdate) (activado por defecto).

Resumen de las propiedades JSON

PropiedadDescripciónEjemplo / Uso
captionEl texto que se muestra en el botón."Send" / "Cancel"
tooltip o titleEl texto que aparece al pasar el ratón, como tooltip."Click to send"
buttonColorEl color del botón: "blue", "red" o "grey", nada más. Cualquier otro valor se ignora y el botón conserva su color."blue"
badgeUn objeto que describe el badge que se muestra en el botón.Véanse los detalles más abajo
badge.captionEl texto, el número o el símbolo que se muestra en el badge. Siempre es un texto: convierta un número con text(). Un texto vacío oculta el badge."3" o "!"
badge.colorEl color de fondo del badge (rojo por defecto). El texto del badge sigue siendo blanco."red" o "#4970ff"

Funcionamiento general

  1. Definir la función onUpdate
    En la fórmula «Display field only, if» del botón, declare una función llamada onUpdate. Esta función devuelve un objeto (en formato JSON) que describe los elementos que hay que modificar. Recibe como parámetro la etiqueta y el color del botón tal como están definidos en Ninox: { caption, buttonColor }.
  2. Devolver un booleano para la visibilidad
    La fórmula debe terminar devolviendo un booleano (true o false) para indicar si el botón debe mostrarse.
  3. Ninext aplica las modificaciones
    Cuando se abre o se actualiza el registro, Ninext ejecuta la función onUpdate, lee el objeto devuelto y aplica dinámicamente los cambios de apariencia al botón.

Implementación

Un único bloque de código en la fórmula «Display field only, if»

Ninox
"Declaration of the onUpdate function that customizes the button";
function onUpdate(buttonValues : any) do
 let count := this.Count;
 {
      caption: if count > 0 then
          "Send (" + count + ")"
      else
          "Send"
      end,
      tooltip: "Click to send your request",
      buttonColor: if count > 0 then "red" else "blue" end,
      badge: {
           caption: if count > 0 then text(count) else "" end,
           color: "red"
      }
 }
end;

"Determination of the button's visibility";
this.Count >= 0

Comentarios:

  • La función onUpdate construye un objeto que permite modificar el texto del botón (con un indicador numérico si Count es positivo), el tooltip, el color del botón y mostrar un badge.
  • El último bloque de código devuelve un booleano que determina si el botón debe mostrarse.

Ejemplo mínimo (solo el badge)

Ninox
"Declaration of the onUpdate function to display only a badge";
function onUpdate(buttonValues : any) do
 let newItems := this.newItems;
 {
      badge: {
           caption: if newItems > 0 then text(newItems) else "" end,
           color: "red"
      }
     }
end;
"The button is always displayed";
true

Comentarios:

  • Solo se devuelve la propiedad badge, para mostrar un valor si newItems es mayor que 0.
  • El botón se muestra sin condición.

Puntos importantes

  • Devolución final de un booleano
    Sin devolver true o false al final, el botón 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.Count) y llamar a las funciones globales de la base de datos.