Descripción
Control que permite mostrar diferentes tipos de Widget (Basic Box, Stat Box, Progress Box) con diseños modernos y atractivos.
Compatibilidad
Web
Instalación
Instalación de Forma Manual
Para instalar el User Control Widget de forma manual se debe copiar los archivos relacionados con el control en la ruta [Instalación de GeneXus]\UserControls\ignia\, posteriormente se debe ejecutar un /install en la ruta de la instalación de GeneXus.
Templates de Widget Disponibles
El User Control Widget cuenta con una propiedad que permite definir el tipo de Template que se utilizará para el render de los datos de un Widget.
Los datos a visualizar para cada Tipo de Widget se setean en la propiedad Data, para cada Tipo de Template se necesita una estructura específica de datos que se explica a continuación.
Estilo Basic Box
El estilo de Basic Box es el siguiente:
Este estilo de widget permite definir los siguientes campos de información:
- Message: Mensaje a mostrar
- Number: Número o texto inferior
- Icon: Icono a mostrar, puede ser cualquiera de los disponibles en Font Awesome http://fontawesome.io/icons/
La estructura de datos asociada al estilo es la siguiente:
Estilo Progress Box
El estilo de Progress Box es el siguiente:
Este estilo de widget permite definir los siguientes campos de información:
- Message: Mensaje a mostrar
- Number: Número o texto inferior
- Icon: Icono a mostrar, puede ser cualquiera de los disponibles en Font Awesome http://fontawesome.io/icons/
- Progress: Valor numérico para dibujar el % de avance de la barra de progreso de la card, debe ser un valor entre 0 a 100.
- Description: texto inferior a mostrar bajo la barra de progreso.
La estructura de datos asociada al estilo es la siguiente:
Estilo Stat Box
El estilo de Stat Box es el siguiente:
Este estilo de widget permite definir los siguientes campos de información:
- Message: Mensaje a mostrar
- NumberIcon: Número o texto superior
- More Info Text: Texto a mostrar en el link de visualización de más información
- Link: Enlace al que se redirige el usuario para mostrar más información.
- Target: Permite especificar donde se desea que se abra el enlace del texto More Info.
La estructura de datos asociada al estilo es la siguiente:
Xpz de Ejemplo
Al importar el xpz de ejemplo del User Control Widget en la ruta Ignia/Controls/Widget se crear un Web Panel de ejemplo con varios widgets y los SDT con la estructura de datos para cada tipo de widget.
Configuración de estilos
El estilo de los componentes de los widgets se pueden definir desde el tema de GeneXus que se esté utilizando en la KB. Para ello a cada widget se le puede asignar una clase a través de la propiedad Class.
El tipo de clase posible a adicionar a esta propiedad es de tipo Widget y se puede utilizar una de las que viene por defecto al instalar el User Control o crear una propia en el tema.
Las clases de tipo Widget cuenta con propiedades para poder personalizar cada uno de los componentes. Cada propiedad son clases de un tipo en el tema que se pueden crear para personalizar una parte de un widget.
A su vez las propiedades vienen agrupadas y especificadas para cada tipo de Widget.
Ejemplo de personalización
El Web Panel de ejemplo que se importa con el User Controls, al visualizarlo por primera vez se muestra de la siguiente forma:
Todos los widgets se muestran con los mismos colores, si se modifica en el tema las clases importadas de ejemplo, se puede ver como cambia la apariencia de las widgets. Para ello en el tema hacer las siguientes modificaciones.
- Bajo la clase WidgetSection asignar un Background Color a las subclases: SectionDanger, SectionSuccess, SectionWarning.
- A las clases WidgetDanger, WidgetSuccess, WidgetWarning, que se encuentran bajo la clase Widget asignar las clases modificadas anteriormente de la siguiente forma:
Luego de realizar esta modificaciones ejecutar nuevamente GeneXus para ver los cambios:
En este caso se muestran varios estilos de widgets, esto se debe a que en el Web Panel de ejemplo cada widget ya viene con una clase asignada que puede ser WidgetDanger, WidgetSuccess, WidgetWarning, las cuales son las clases que se modificaron anteriormente. De igual forma se pueden modificar los estilos de cada uno de los componentes de cada widget.