Techfun - Editor de Widgets

Desde la versión 4.4.2200.22, se implementa el nuevo editor de Widgets que permite modificar los Widgets estándar para adaptarlos a las necesidades del usuario (desde la consulta SQL hasta la visualización del estilo) y además crear nuevos Widgets con vistas personalizadas.

Para utilizar el editor, activa el modo edición (1) y accede desde el menú flotante donde están los componentes de dashboard (2) pulsando sobre el botón +.

En el lateral izquierdo del panel, se encuentran los tres objetos disponibles (Gráficos, Widgets y buscadores). Pulsa sobre el icono con forma de rosca para acceder a la sección de Widgets y después pulsa sobre el editor.

Automáticamente se abre la ventana donde se editan los Widgets existentes o se pueden crear nuevos. 

La ventana consta de una cabecera con el selector de Widgets, un campo de texto "Nombre" y el selector de grupo de seguridad. A continuación se encuentra la sección correspondiente a las consultas y en la parte inferior se encuentra la sección destinada a representar el código HTML con el CSS correspondiente.

Nada mas abrir la pantalla, si no se ha seleccionado ningún Widget existente, la ventana sale sin código visible, según se muestra en la siguiente imagen.

En el primer selector es posible elegir un Widget existente (1) o crear uno nuevo (2). 

1)

2)

A continuación se explican ambas opciones con detalle.

Editar Widget existente

Seleccionar un Widget del desplegable, en el siguiente campo de texto se puede editar el nombre. Este nombre es el que se muestra en la lista de Widgets disponibles en el panel de objetos de dashboard.

La consulta SQL también se puede editar. Se debe tener en cuenta que el Widget solo puede cargar un campo.

Por último, se puede editar el HTML y cualquier valor de las propiedades del CSS. En la siguiente imagen se destaca con un rectángulo naranja el título que se va a mostrar dentro del Widget y el campo que se visualiza para el cálculo. 

Crear nuevo Widget

Para crear un nuevo Widget, selecciona la opción "Nuevo" del desplegable.

Establece un nombre y selecciona un grupo de seguridad, esta opción está habilitada únicamente para Widgets nuevos debido a que los que están predefinidos ya pertenecen a un grupo.

Añade la consulta SQL (vista, función o consulta de tipo SELECT) similar a la que se visualiza en el ejemplo.

Recuerda que si añades aquí el cálculo, debes poner un alias al campo calculado para que se realice correctamente el cálculo de lo contrario aparece un Widget en blanco según se muestra en la siguiente imagen. No olvides que el resultado debe mostrar un solo registro con un único campo.

Por último, edita el HTML, puedes añadir un título dentro del div <Titulo>, modificar los valores de las propiedades CSS y añadir etiquetas si las necesitas. En el espacio resaltado en color naranja "NOMBREVARIABLE", debes añadir el campo calculado.

<div style="background: #1fb4e2; width: 100%; height: 100%; border-radius: 4px; border: 1px solid lightgrey"> <div style="display: flex; flex-direction: column;"> <div style="padding:12px; width: 100%; display: flex; flex-direction:column; border-radius: 4px 0px 0px 4px; justify-content: left; height: 140px; font-family: MalpSemibold, serif; color:white; font-size: 14px; align-items:flex-start; padding-top:6px"> <div>Titulo</div> <div style="font-size:18px; padding-top:14px">{{NOMBREVARIABLE}}</div> </div> </div> </div>

Ejemplo final de nuevo Widget: