<!-- INICIO: Estilos -->
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

<style>
body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, code, pre, blockquote, span {
font-family: 'Roboto', sans-serif !important;
}

.nav>li {
padding-top: 6px;
padding-bottom: 6px;
line-height: 1.6;
margin-left: 0; /* Quitamos el corrimiento lateral */
}

.markdown-body ul {
padding-left: 1em; /* Espaciado limpio y coherente */
}

.markdown-body img {
border: 1px solid #e0e0e0;
border-radius: 6px;
padding: 8px;
margin: 24px 0;
background-color: #ffffff;
display: block;
max-width: 100%;
height: auto;
box-sizing: border-box;
margin-left: auto;
margin-right: auto;
}

.markdown-body li {
padding: 4px 0;
margin-left: 5px;
line-height: 1.4;
}

</style>
<!-- FIN: Estilos -->

# Basics


## Widget Metrics

Este widget permite mostrar el valor de una variable. A su vez se puede configurar distintos estilos condicionales para mostrar esta información.
El valor de esta variable se obtiene de una query a un recurso. Esta información se puede obtener desde un [datasource](https://hackmd.io/@sitrackio/S1r8PbX2ll#Settings---Configuraci%C3%B3n-Data-Sources).


### Basic Options

En esta sección se realiza la configuración general del widget.

- **Name**: Nombre del widget, único campo obligatorio.
- **Description**: Descripción opcional del propósito del widget.
- **Documentation**: Espacio libre para incluir documentación adicional.
- **Sample Data**: Se muestra un ejemplo en formato json.


### Metric Options

En esta sección se especifica la variable a mostrar y la unidad que corresponda y si se desea se pueden agregar estilos CSS.

- **Value Key**: nombre de la variable que contiene la información a mostrar.
- **Unit**: en este campo se puede especificar el nombre para expresar la información, p.e.: km, grs, db, cm3, entre muchos más
- **CSS style**: se refiere a las reglas de estilo escritas en CSS que determinan la presentación visual de los elementos del widget, p.e.: font-size:40px;color:#f40000


### Style Rules

Este apartado de configuración sirve para establecer un condición que, cumplida, puede verse el valor de la variable de acuerdo a un color, o grupo de colores, seleccionado. Es posible seleccionar un color para el background.

- **Condition**: espacio para especificar la condición que debe cumplir una variable para tomar la configuración establecida.
- **Priority**: prioridad que se le otorga a esa condición
- **Background** y **Text**: funciones que permites seleccionar el color de fondo y el color del texto con el que se mostrará la variable.
- **Font Weight**: permite seleccionar el tipo de fuente de la variable, entre ellos *Regular*, *Medium* y *Bold*
- **Italic**: Permite optar por el estilo *italico* para los caracteres que se especifiquen en el campo "Unit" de la sección "Metric Options"

Se pueden agregar más Styes Rules cliqueando el botón **Add** y elegir una paleta de colores seleccionando el botón **Apply color group**


### Widget Setup

Dado que esta sección es común a todas las configuraciones de los widgets, siga el siguiente enlace " [Widget Setup - Basic Options y Query](https://hackmd.io/@sitrackio/S1r8PbX2ll#Widget-Setup) "


**Ejemplo visual de un widget Metrics**

[](https://youtu.be/KiKdhLERPc0)

<br/> <br/>

## Widget Imagen

Este widget permite mostrar imágenes en formato .jpg/.png ubicadas en la plataforma o indicando una URL externa.


### Basics Options

En esta sección se realiza la configuración general del widget.

- **Name**: Nombre del widget, unico campo obligatorio.
- **Description**: Descripción opcional del propósito del widget.
- **Documentation**: Espacio libre para incluir documentación adicional.
- **Sample Data**: Se muestra un ejemplo en formato JSON.


### Image Options

En este apartado se especifica cuál será la variable clave para mostrar la imagen y las funcionalidades disponibles para realizar controles de la imagen.

- **URL Key**: se especifica el nombre de la variable que contiene la url que dirije a la imagen a mostrar
- **File Name Key**: es el nombre de la variable que contiene la denominación con la que se desea descargar la imagen
- Existen **controles de imagen** pueden habilitarse para esa imagen.
- **Show Status**: muestra la cantidad de imagenes que se han subido, es muy útil cuando se ha generado un carrusel de imagenes, p.e. *1 de 3* donde se comprende que se muestra la imagen 1 de 3.
- **Show Indicators**: muestra pequeños íconos o señales visuales (por ejemplo, flechas o puntos) que indican que hay más imágenes disponibles en un carrusel o galería
- **Disable Download**: Bloquea la opción de descargar la imagen directamente desde el widget
- **Show Dots on Top**: Coloca los “dots” (los puntitos de navegación de un carrusel de imágenes) en la parte superior del widget en lugar de abajo.


**--------VERIFICAR ISSUES--------**

### Image Map

En esta sección se encuentran varias funciones que permiten dibujar zonas dentro de una imagen e interactuar con ellas.


- **Use area maps from datasource**: si se habilita este toggle se muestra un espacio para colocar el "Custom map key" lo que indica el nombre de la variable que define la geometria en esa imagen. **COLOCAR UN EJEMPLO**


- **+Add Area**: en caso de no activar el toggle descrito ateriormente, queda habilitado el botón *+ Add Area* que, al seleccionarlo, se muestra un desplegable que permite acceder a la función **Open Drawing** y dibujar un area dentro de la imagen e interactuar con ella. Se puede agregar tantas areas como se deseen solo seleccionando este botón cada vez.


- **Area Name**: espacio para definir el nombre del area dibujada
- **Active**: este toggle permite activar el area dibujada
- **Stroke color**: al seleccionar el cuadrado, se abre la paleta de colores que permite elegir el color del contorno del area.
- **Fill color**: al seleccionar el cuadrado, se abre la paleta de colores que permite elegir el color de relleno del area.
- **Opacity**: este control permite establecer la opacidad del *Fill Color* definido previamente.
- **Open Drawing**: al seleccionar esta funcionalidad se abre un panel en el que, mediante puntos con un clic, se dibuja un area sobre la imagen. Aqui es posible descargar la imagen dibujada.
- **Download Drawing**: esta funcionalidad permite descargar la imagen dibujada.
- **Remove Area**: función que permite eliminar el area dibujada.


### Widget Setup

Dado que esta sección es común a todas las configuraciones de los widgets, siga el siguiente enlace " [Widget Setup - Basic Options y Query](https://hackmd.io/@sitrackio/S1r8PbX2ll#Widget-Setup) "


**Ejemplo visual del widget Image:**

1) Construcción con una sola imagen
[](https://youtu.be/ycoANmukFvQ)

2) Construcción con imágenes en carrusel y descarga
[](https://youtu.be/YvH6392vfPE)

3) Construcción con imágenes con areas demarcadas
Esta funcionalidad permite demarcar una zona en una imagen específica. Es posible agregar una o más acciones en la sección **Actions** pero no se podrá hacer una acción por cada zona. Sin embargo, se pueden configurar las acciones deseadas y al momento de cliquear en la zona demarcada, elegir la acción desde un pop up.

Para este caso de ejemplo, se obtuvo las coordenadas de la zona a partir de dejar pública en la web la imagen en cuestión. Esto se realizó mediante un html.
Los atributos básicos del json, para mostrar la zona, son los siguientes:

{
  "id": "8Ns7CSVvaecht8S9cdrDW",
  "title": "New Area 1",
  "fillColor": "#ffffff", 
  "visible": true,
  "coords": [186, 136, 288, 180, 251, 218, 150, 178, 175, 137],
  "polygon": [[186, 136], [288, 180], [251, 218], [150, 178], [175, 137]],
  "active": true,
  "shape": "poly"
}

Tanto las coordenadas en formato **coords (lista plana)** como **polygon (lista de arrays)** contienen los mismos datos, pero depende de la libreria o herramienta que se utilice.

Se deja una query de ejemplo, que es la misma que se muestra en el video.

select * from '[{
  "url": "https://i.imgur.com/6Lsu7xw.png",
  "areaMapCustom": [
        {
            "fillColor": "transparent",
            "visible": true,
            "polygon": [[484,166], [807,236], [761,468],[319,380]],
            "shape": "poly",
            "preFillColor": "rgba(0, 0, 0, 0)",
            "active": true,
            "id": "Uxnt72E9cX-4V9Hx3iIeN",
            "title": "AREAUNO",
            "strokeColor": "#1a237e",
            "strokeWidth": 20,
            "opacity": "1"
        }, 
        {
        "fillColor": "#e61330",
        "visible": true,
        "polygon": [[110, 199], [106, 303], [183, 206], [111, 199]],
        "shape": "poly",
        "preFillColor": "rgba(165, 40, 145, 0.8)",
        "active": true,
        "id": "P9apD-an23f5BJcxwBfMw",
        "title": "AREADOS",
        "strokeColor": "#ff5733 ",
        "opacity": "1",
        "coords": [328, 84, 326, 157, 397, 159, 393, 85, 328, 85]
      }
    ]
  }]' as data

Es posible obtener las coordenadas de la zona a demarcar con la funcionalidad "Open Drawing" y luego descargar el json, aunque existe un pedido de arreglo para esto.

**FALTA UNA ISSUE que es DIBUJAR LA ZONA SOBRE LA IMAGEN DESEADA, por ahora la imagen del Open Drawing es la de ejemplo.

Video

<br/> <br/>

## Widget Button Set

Este widget permite crear un botón que, mediante una sencilla configuración, dispara una acción en particular.


### Basic Options

En esta sección se realiza la configuración general del widget.

- **Name**: Nombre del widget, unico campo obligatorio.
- **Description**: Descripción opcional del propósito del widget.
- **Documentation**: Espacio libre para incluir documentación adicional.
- **Sample Data**: Se muestra un ejemplo en formato json.


### Button Set Options
En esa sección se configuran aspectos visuales del botón.
- **Align buttons**: se espcifica la alinieación del botón en relación al reacuadro del widget del botón: *Center, Right or Left*
- **Position buttons**: es posible seleccionar *Posición* que tendrá un botón respecto de otro: *Vertical u Horizontal*


### Widget Setup

Dado que esta sección es común a todas las configuraciones de los widgets, siga el siguiente enlace " [Widget Setup - Basic Options y Query](https://hackmd.io/@sitrackio/S1r8PbX2ll#Widget-Setup) "


En la query de ejemplo existen palabra claves que determinan el color del botón y algunos atributos que pueden ser agregados a cada botón.
[{
"name": "Primary button",
"color": "primary" --> Negro
},{
"name": "Secondary button",
"color": "secondary" --> Azul
},{
"name": "Success button",
"color": "success", --> Verde
"height": 50, --> Altura
"width": 200 --> Ancho
},{
"name": "Warning button",
"color": "warning" --> Amarillo
},{
"name": "Danger button",
"color": "danger", --> Rosado
"disabled": true --> Si está en True, el botón se muestra pero no realiza acción alguna.
}]

#### Container styles

Esta sección muestra un toggle **"Hide widget container"** que, al activarlo, hace que desaparezca el contenedor de los botones. Ver video demostrativo.


>Nota: Cada botón DEBE ser asociado a una **Acción** **--------AGREGAR LINK para la CONFIGURACION DE ACCIONES--------**

> Cada botón se debe asociar a una acción, esta debe tener el mismo nombre para que se linkeen los atributos que se especifican en la query. Se crea una issue en la que se solicita revisar el caso en el que se coloca el color al botón pero al agregarle una acción el color se cambia a negro.

**Ejemplo visual de un widget Button Set**

[](https://youtu.be/Q26kRtkb9bY)

<br/> <br/>

## Widget Composite

Un widget composite combina el uso de otros widgets en uno solo, en el que se puede utilizar la misma información para mostrarla de diferentes maneras o bien combinar datos de otras fuentes.

La configuración de este widget tiene características comunes a otros widgets.

### Basic Options

En esta sección se realiza la configuración general del widget.

- **Name**: Nombre del widget, unico campo obligatorio.
- **Description**: Descripción opcional del propósito del widget.
- **Documentation**: Espacio libre para incluir documentación adicional.
- **Sample Data**: En este caso no hay datos de ejemplos debido a que el widget se alimenta de otros widgets.

### Composite Options

En esta sección **Composite Options** se agregan los widgets que se desean combinar o mostrar en el Composite. Las opciones que se muestran son:


**1.** **Layout**: Se selecciona la opción de la vista del Composite, ya sea en pestañas (tabs), tal como se muestra en la figura de la izquierda o en cuadrícula (grid) como se ve en la figura de la derecha. Seleccionando la opción **Tabs** se activa la opción "Data loading behavior". Seleccionando la opción **Grid** se activa la opción "Edit Layout"

<div style="display: flex; gap: 10px; text-align: center;">
<figure style="margin: 0;">
<figcaption style="font-size: 12px; color: gray; margin-bottom: 0px;">
Layout en Tabs
</figcaption>
<img src="https://hackmd.io/_uploads/S1SectLUbg.png" alt="Layout en Tabs" style="width: 80%;"/>
</figure>
<figure style="margin: 0;">
<figcaption style="font-size: 12px; color: gray; margin-bottom: 0px;">
Layout en Grid
</figcaption>
<img src="https://hackmd.io/_uploads/SJDvqKII-l.png" alt="Layout en Grid" style="width: 65%;"/>
</figure>
</div>

**2.** **Data loading behavior**: esta opción se activa cuando se selecciona la opción **Tabs** en *Layout*. Aqui se muestran 2 posibilidades:

- **Classic**: indica que al seleccionar cada tab o pestaña, se realiza una llamada cada vez al backend para cargar los datos. Es decir, cada vez que el usuario cambia de pestaña dentro de una interfaz compuesta, se hace una nueva llamada al servidor para cargar los datos correspondientes.
- **Local Query**: indica que al seleccionar cada tab o pestaña, el backend se llama solo una vez y la recuperación de datos posterior se realiza localmente y así filtrar la información que requiere el widget.

**3.** **Edit Layout**: esta opción se activa cuando se selecciona el tipo *_Grid_* como layout, y permite distribuir los widgets de manera deseada.

**4.** **+ Add widget**: esta opción redirige al usuario a la sección de widgets para seleccionar el que será parte del composite. Una vez configurado, según cada caso, se muestra nuevamente la pantalla de un nuevo widget. Notar que en el breadcrumb se agregan los pasos anteriores.

> **Nota**: Es posible agregar acciones dentro de cada widget de tipo Link y Contextual. Las acciones de tipo General sólo se pueden agregar en el composite padre.

Como método de optimización se recomienda agregar una query genérica en el composite padre, para evitar que el composite realice búsquedas cada vez que el dashboard refresque. P.e.:

select * from '[]' as data

**Configuración Adicional**: se puede añadir en el widget composite los parámetros dinámicos en los títulos de las pestañas (tabs). Por ejemplo: si se tiene una Tabla DX (**COLOCAR EL LINK A LA CONFIGURACION DE LA TABLA**) es posible seleccionar algún dato de esa tabla que se reflejará como titulo en la pestaña del widget.

Asi se verá:

La configuración se realiza en la sección Widget Setup/Query, en que en el titulo (*_Title_*) se especifican las variables de las que se toman los nombres para el tab.


En la sección Query se deberá especificar el [datasource](https://hackmd.io/@sitrackio/S1r8PbX2ll#Settings---Configuraci%C3%B3n-Data-Sources) que contiene los datos.


Para que esta configuración se complete, es importante dirigirse a la sección **Selection options** y elegir *_Send Parameters inmediately_*.


### Environment

En esta sección se especifica la paleta de colores que se desea usar. Si se selecciona el botón **"Apply color group"** se puede elegir un conjunto de colores predefinidos.

**------ No funciona, se genera una issue ------**

### Widget Setup

Dado que esta sección es común a todas las configuraciones de los widgets, siga el siguiente enlace " [Widget Setup - Basic Options y Query](https://hackmd.io/@sitrackio/S1r8PbX2ll#Widget-Setup) "

##### Actions
Este apartado requiere un especial atención, puesto que para que las acciones tengan efecto, se deben configurar en un composite **"hijo"** y la acción debe ser de tipo **"General"**.
Adicionalmente, este tipo de cción debe llevar realcionado un **_Evento_**
Otro aspecto a tener en cuenta, es que la acción se ejecutará siempre y cuando se posicione sobre el tab que corresponde al composite hijo.
Las acciones, además, sólo pueden configurarse si el composite padre ha sido configurado previamente con el Layout en tipo TAB.

#### Data Sources
Esta sección es exactamente igual a la configuración del [datasource](https://hackmd.io/@sitrackio/S1r8PbX2ll#Settings---Configuraci%C3%B3n-Data-Sources) que se muestra en la barra de herramientas. Se agregó para facilitar el orden de los DS que intervienen en el widget.
Se agrega un DS seleccionando el botón **"Add"**


**Ejemplo visual del widget composite**

Insertar foto y video

<br/> <br/>

## Widget Progress Step

El widget **Progress Step** permite representar gráficamente el estado de avance de un proceso en pasos secuenciales. Cada paso se visualiza como un círculo conectado por una línea, mostrando el nombre del paso, su estado y una descripción adicional como *tooltip*.




### Basic Options

En esta sección se realiza la configuración general del widget.

- **Name**: Nombre del widget, unico campo obligatorio.
- **Description**: Descripción opcional del propósito del widget.
- **Documentation**: Espacio libre para incluir documentación adicional.
- **Sample Data**: Se muestra un ejemplo en formato JSON.


- **Query**: Se agrega el nombre del **Datasource**.


- **General options**: Permite configurar las siguientes claves (keys), que deben coincidir con los campos devueltos por la query en el datasource. Se puede utilizar las keys por defecto o cambiarlas según las keys que contenga la query:

**Title Key**: Es el nombre del paso.
**Status Key**: Representa el estado actual del paso (uno de los 4 permitidos).
**Order Key**: Define el orden de aparición del paso.
**Description Key**: Se mostrará como tooltip al pasar el mouse sobre el paso.

⚠️ Las claves configuradas deben coincidir exactamente con los nombres de los campos devueltos por la query.



**States options**: puede contener **uno de los siguientes estados válidos** :

- **Pending**
- **In_progress**
- **Finished**
- **Error**


**Cada uno de estos estados contiene la siguiente configuración:**

- Un **icono** representativo que puede elegirse seleccionando el botón _Icon selector_.
- El **color del icono** (_Icon Color_).
- El **color de fondo del icono** (_Icon Background Color_).




### Vista Previa del Widget:

Este widget consume información desde un Datasource. La estructura esperada de la data es una lista de objetos que representen cada paso. En el modo de vista previa, el widget carga una muestra de datos por defecto, con las claves por defecto (`title`, `status`, `order`, `description`):

[ {  
    "title": "Initial",
     "status": "pending",
     "order": 1,
     "description": "initial step description"
}, {
    "title": "Second",
    "status": "in_progress",
     "order": 2,
     "description": "second step description"
}, {
     "title": "Third",
     "status": "finished",
     "order": 3,
     "description": "third step description"
}, {
     "title": "Fourth",
     "status": "error",
     "order": 4,
     "description": "fourth step description"
} ]

<br/>


### Datos de Ejemplo:

A continuación, se muestra un ejemplo de cómo puede escribirse una query utilizando nombres de claves personalizados:

SELECT * FROM '[
{"nombre_paso": "Inicio", 
 "estado": "pending", 
 "posicion": 1, 
 "detalle": "Aún no iniciado"
 }, 
 {"nombre_paso": "Validación", 
  "estado": "in_progress", 
  "posicion": 2, 
  "detalle": "Revisando datos"
  },
  {"nombre_paso": "Ejecución", 
   "estado": "finished", 
   "posicion": 3, 
    "detalle": "Completado con éxito"
  },
  {"nombre_paso": "Resultado", 
   "estado": "error", 
    "posicion": 4, 
     "detalle": "Hubo un problema"
   }
]' AS data

<br/>


**Ejemplo Adicional:**



## Widget Híbrido Imagen/Video

El widget de tipo Híbrido Imagen/Video permite mostrar de forma dinámica, por medio de un parámetro, tanto una imagen como un video.


### Basic Options

En esta sección se realiza la configuración general del widget.

- **Name**: Nombre del widget, unico campo obligatorio.
- **Description**: Descripción opcional del propósito del widget.
- **Documentation**: Espacio libre para incluir documentación adicional.
- **Sample Data**: Se muestra un ejemplo en formato JSON.


En la sección “Hybrid options” se especifica los campos “Type Key” y “Data Key”. En estos se coloca la variable del tipo de archivo que se va a recibir y la variable con la url del archivo.


Adicional a esos campos se encuentran las opciones mencionadas anteriormente para los distintos tipos de archivo.

Una vez colocados los nombres de las variables que se van a utilizar y seleccionadas las opciones deseadas, se presiona el botón “Ok” para avanzar a la siguiente pantalla.

### Widget Setup

**Basic Options y Query**

Ver [Construcción](https://hackmd.io/d2nhP3QmQziRjWnvcUwJMg#Widget-Setup)

En la sección “Basic options” se colocará el título que se mostrará en el widget, en caso de ser requerido. En “Refresh Group” se elige la misma opción configurada en el Data Source al cual se consultará desde el widget.


En la sección “Query” se ingresa la consulta al Data Source, que puede escribirse de 2 formas diferentes, por ejemplo:

select * from ds_Hybrid   o  $ds_Hybrid


Una vez realizada esta configuración se presiona el botón “Ok” y ya puede configurar el Data Source.
Para acceder a esta configuración se selecciona el botón "Settings" de la pantalla de edición.



En esta sección se ingresar un nombre para el Data Source y la query que que obtiene la información requerida.


En caso de seleccionar en el campo **Content Type** el tipo YouTube, el valor del datakey será el ID del video a mostrar.



Una vez completados estos datos se presiona el botón “Apply” y se visualizará el video, en el widget.

>[!Note] Se muestra un ejemplo en este video, se deja a continuación la query utilizada.

select * from '[{  "url": "https://cdn.pixabay.com/video/2016/02/12/2127-155244168_large.mp4",  "type": "video" }]' as data

📺
[Video Ejemplo](https://youtu.be/UhxptxiiBKo)

<br/>

> [!Important]

- Para más información sobre imagen y video consultar el documento “[Widgets de Imagen y Video](https://docs.google.com/document/u/0/d/1Jb0qAXfq7Wm30NAvwM0rBbMY6ZCDmwJ2q8PqTt6FSwU/edit)” donde se explica cómo utilizar PublicFile para mostrar por medio de una url archivos cargados en la plataforma.
- Los videos siempre se reproducen **en silencio** por defecto, tanto los que tienen configurado Autoplay como los iniciados manualmente.
- **Disable Download**: Permite deshabilitar la opción de descarga de la imagen.
- **Opciones de Video:**

**Content Type**: Permite elegir el formato del video que se va a mostrar en el widget. Estos pueden ser MP4, OGG, WebM, YouTube.
**Autoplay:** Al ingresar al dashboard o pestaña (dentro de un composite) se reproduce automáticamente el video.
**Loop:** El video se reproduce en bucle.

<br/>
<br/>

## Widget HTML Content

Este widget está realizado para mostrar información a través de un formulario. No permite agregar código Html.


### Basic Options

En esta sección se realiza la configuración general del widget.

- **Name**: Nombre del widget, unico campo obligatorio.
- **Description**: Descripción opcional del propósito del widget.
- **Documentation**: Espacio libre para incluir documentación adicional.
- **Sample Data**: Se muestra un ejemplo en formato JSON.

### Layout

En esta sección se especifica la Condition a cumplirse y el Formulario (Form) que ses mostrará.
Obviamente, el formulario primero debe crearse. Para esto dirijase a la sección **Crear un formulario** **--agregar aqui el link para esa sección--**

Es posible además dirigirse directamente a la sección de creación de formulario seleccionando el botón **New** o bien es posible editar el formulario previamente diseñado y seleccionado, presionando el botón con el icono :arrow_heading_up:

En el espacio de Query, es posible agregar una query genérica y asi se mostrará el formulario o una query que muestre los datos ingresados en un formulario.



Seleccionando el botón OK se visualiza el widget con la información requerida.



Para este segundo caso, el formulario debe contener etiquetas de texto y a las mismas, agregarle un nombre de modelo de las variables.
Se debe tener en cuenta que la query debe contener el mismo nombre de la columna que se agrega en el "Model Variable".

📺
[Video Ejemplo](https://youtu.be/tT8EG4HyVPQ)

<br/>
<br/>

## Widget PDF Viewer

El widget de tipo PDF Viewer permite visualizar, dentro de un dashboard, un archivo de tipo PDF, ya sea por medio de un link externo, interno o por ID.


### Basic Options

En esta sección se realiza la configuración general del widget.

- **Name**: Nombre del widget, unico campo obligatorio.
- **Description**: Descripción opcional del propósito del widget.
- **Documentation**: Espacio libre para incluir documentación adicional.
- **Sample Data**: Se muestra un ejemplo en formato JSON.


En la sección **“Viewer options”** se especifica la forma en la que se insertará el .pdf.
Existe el switch **“Indicate file by ID”** que al activarlo se acepta que el archivo se mostrará mediante un ID y el campo **“Data Key”** en el que se especifica el nombre de la variable que contendrá la URL. Si el switch está desactivado se indica que el archivo se mostrará por medio de una URL(ya sea interna o externa).


Una vez especificados los datos necesarios, se configuran los datasources. **---Colocar vinculo a Creacion de Datasource---**

### Viewer por ID

En el caso de que el switch de **Indicate file by ID** esté activo, el archivo se muestra por ID.

**Ejemplo de una query:**

select id as fileId from PublicFile  where id = 7f2d5bc7-2f5d-5266-88dc-ca760021699c


### Viewer por URL

En la sección “Query” se ingresa la consulta al Data Source, por ejemplo:

select * from ds_PDF   

Tambien se puede escribir asi:

 $ds_PDF

Ejemplo de una query en el Data source::

select * from '[{"url":"https://www.renfe.com/content/dam/renfe/es/General/PDF-y-otros/Ejemplo-de-descarga-pdf.pdf"}]' as data


📺
[Video Ejemplo](https://youtu.be/18SGtBmrW_g)

> NOTA: para más información puede consultar el **Widgets de Imagen y Video** en el que se explica cómo utilizar PublicFile para mostrar por medio de una URL archivos cargados en la plataforma.

<br/>
<br/>

## Widget QR Code

El widget de tipo **QR Code** es utilizado para representar información en un formato de código QR, permitiendo su lectura mediante escáneres compatibles.
Su implementación dentro de un dashboard permite que datos dinámicos o estáticos sean codificados visualmente para su fácil acceso por parte del usuario final.


### Basic options

En esta sección se realiza la configuración general del widget.

- **Name**: Nombre del widget, unico campo obligatorio.
- **Description**: Descripción opcional del propósito del widget.
- **Documentation**: Espacio libre para incluir documentación adicional.
- **Sample Data**: Se muestra un ejemplo en formato JSON.


### QR code options

En esta sección se agrega en el campo **Value Key** el nombre de la clave del dataset que contiene el valor a codificar. Por ejemplo: **value**.

Esto indica al componente que debe tomar el valor desde la clave `"value"` de cada objeto en el dataset (como en el ejemplo que brinda el widget: `{"value": "QR example"}`).

El QR que se renderiza contendrá el texto `"QR example"` al escanearlo.


### Widget Setup

**Basic Options y Query**

Ver [Construcción](https://hackmd.io/d2nhP3QmQziRjWnvcUwJMg#Widget-Setup)


Si se utiliza un *DataSource*, este debe estar definido en la sección **Setting**, accesible desde la barra superior de funciones.

📺
[Video Ejemplo](https://youtu.be/1bSXdNtIWEM)

<br/>
<br/>

## Widget Form

Este widget permite visualizar e interactuar de forma directa en el dashboard con un formulario que se ha sido creado en sección Forms **----AGREGAR LINK----**, sin la necesidad de acceder a él a través de acciones.


### Basic Options

En esta sección se realiza la configuración general del widget.

- **Name**: Nombre del widget, unico campo obligatorio.
- **Description**: Descripción opcional del propósito del widget.
- **Documentation**: Espacio libre para incluir documentación adicional.
- **Sample Data**: Se muestra un ejemplo en formato JSON.


En la sección **Form options** se ingresan los siguientes datos:

- **Form**: Espacio para seleccionar el formulario a visualizar
- **Result path**: Nombre para el array de datos resultante de lo rellenado del formulario
- **Event**: Evento que se ejecutará al enviar el formulario.

> Nota: el ejemplo se muestra en el DemoVideo

Opcionalmente, es posible activar un switch para que no se borren los datos ingresados una vez enviado el formulario.


Una vez seleccionado el botón "OK" se mostrará la siguiente pantalla con la configuración general de widgets donde se puede colocar un título para el mismo.


Luego de aplicar y guardar los cambios, se visualizará en el dashboard el formulario y se podrá interactuar con el mismo.


<br/>

📺
[Video Ejemplo](https://youtu.be/2WhfxJzlknI)

<br/>
<br/>
<br/>

## Widget Video

Este widget permite visualizar un video indicando la URL correspondiente.


### Basic Options

En esta sección se realiza la configuración general del widget.

- **Name**: Nombre del widget, unico campo obligatorio.
- **Description**: Descripción opcional del propósito del widget.
- **Documentation**: Espacio libre para incluir documentación adicional.
- **Sample Data**: Se muestra un ejemplo en formato JSON.


### Video Options
En esta sección se configura lo relacionado al video a presentar.

- **Content Type**: Es posible sesleccionar el tipo de video que se reproducirá. Los formatos disponibles son los siguientes:
* MP4
* OGG
* WebM
* YouTube

- **Data Key**: Se especifica el nombre de la variable que traerá la inforación del video que se mostrará. En el caso de mostarse un video de YouTube se especifica el **ID** del video en esta plataforma.


Existen 2 switch que configuran la visualización del video:
- **Autoplay**: Una vez que se accede al dashboard que contiene el video, éste se autoejecuta.
- **Loop**: Si este switch está activado, el video se reproduce de manera continua.

<br/>

### Widget Setup

**Basic Options y Query**

Ver [Construcción](https://hackmd.io/d2nhP3QmQziRjWnvcUwJMg#Widget-Setup)

**>Nota:** ninguno de estos parámetros es obligatorio, con excepción del **Refresh Group** siempre y cuando se haya configurado un Data Source y estos campos, refresh group, deben coincidir.

Una vez colocada la información deseada en las dos secciones se selecciona el botón “Ok” para avanzar a la siguiente pantalla.

En la sección Query se coloca el datasource (**---COLOCAR LINK A LA CREACIÓN DE DATASOURCE----**) que contiene la referencia al video a mostrarse.



Una vez completados estos datos se presiona el botón “Apply” y se visualizará el video en el widget.

<br/>

> [!Important]
> Siga el siguiente enlace a **Public File** para utilizar este widget con archivos cargados en la plataforma.

<br/>
<br/>
<br/>
<br/>

## Public File

Al cargar un archivo en la plataforma, ya sea por medio de un dashboard o desde el Navigator, este se guarda en el recurso File. Este archivo tiene varios atributos, aunque la atención se centrará en el id y la url. Si se intenta acceder al archivo cargado por medio de la url se mostrará un un mensaje de error ya que éste pertenece a un bucket privado. Por ello, se utiliza el recurso **Public File**.

La consulta a **Public File**, genera una url pública con *límite de tiempo* por medio de la cual es posible acceder a ese archivo. Se realiza una consulta al recurso **File**, en búsqueda del archivo subido, y se obtiene el ID del mismo.

select id from File where completeName = 'nombre_de_archivo'

Luego, se realiza la query a **Public File** indicando el **ID** obtenido.
Al mismo tiempo, es posible asignar un limite de tiempo, aunque por defecto es de 1 minuto.

select * from PublicFile where id = clave de ID

Query con duración definida:

select * from PublicFile where id = clave de ID and duration = 5

> Nota: El número que se ingresa en **duration** se interpreta en minutos.

Esta misma información se puede especificar en un Datasource. En este caso no es necesario indicar una duración ya que cada vez que se abra el dashboard, se obtendrá una nueva url e inmediatamente quedará la imagen/video descargada/o y guardada/o en el browser dejando de necesitar que esté activo el link para acceder de manera pública.

📺
[Video Ejemplo](https://www.youtube.com/watch?v=kmyOVncEa4k)

<br/>
<br/>
<br/>

## Widget Json

Este widget permite visualizar datos en formato JSON por medio de una query al recurso o archivo deseado.


### Basic Options

En esta sección se realiza la configuración general del widget.

- **Name**: Nombre del widget, unico campo obligatorio.
- **Description**: Descripción opcional del propósito del widget.
- **Documentation**: Espacio libre para incluir documentación adicional.
- **Sample Data**: Se muestra un ejemplo en formato JSON.

### Json options

En esta sección se configura lo relacionado al espacio donde se mostrará el json.

- **Theme**: Es posible seleccionar diferentes temas (que modifican el color y estilos) que tendrá el json mostrado en el widget.
- **Icon Style**: Permite seleccionar la forma que tendrán los botones para colapsar o expandir los apartados del json (circular, cuadrado o triangular)
- **Space**: Se selecciona el tamaño de las tabulaciones (sobre el margen izquierdo) de cada nivel del json.
- **Length for collapsing texts**: Es posible seleccionar si se colapsa, o no, o cuántos caracteres se colapsará el texto de cada linea del json.
- **Show data type**: Permite elegir si se mostrará el tipo de dato del json.
- **Show length**: Permite elegir si se mostrará el largo de cada elemento del json.
- **Creased**: Permite elegir si se mostrará colapsado, expandido (parcial o totalmente) el json.
- **Enable Clipboard**: Si se activa la opción. será posible copiar los elementos del json.


Una vez seleccionadas las opciones se presiona el botón **“OK”.**

### Widget Setup

**Basic Options y Query**

Ver [Construcción](https://hackmd.io/d2nhP3QmQziRjWnvcUwJMg#Widget-Setup)

Una vez configurado el Data Source se presiona el botón “Apply” y se visualizará el Json en el widget.

📺
[Video Ejemplo](https://youtu.be/vamG1opOJAo)

<br/>
<br/>
<br/>
<br/>

## Widget Markdown

Este widget permite mostrar texto en formato Markdown, aunque son minimas las alternativas de formato que pueden utilizarse. Entre éstas el formato **negrita (bold)** e *itálica (italic)* son las disponibles hasta el momento. **--------Averiguar si hay más opciones disponibles---------**


### Basic Options

En esta sección se realiza la configuración general del widget.

- **Name**: Nombre del widget, unico campo obligatorio.
- **Description**: Descripción opcional del propósito del widget.
- **Documentation**: Espacio libre para incluir documentación adicional.
- **Sample Data**: Se muestra un ejemplo en formato Json.

### Markdown options

En esta sección solo se especifica cuál es la key (**Value Key**) que traerá los datos a mostrar en el widget.


Una vez finalizada esta etapa, seleccionando el botón **OK** es posible ir a la configuración del widget.

### Widget Setup

**Basic Options y Query**

Ver [Construcción](https://hackmd.io/d2nhP3QmQziRjWnvcUwJMg#Widget-Setup)


En la sección **Query** se especifica el Datasource que trae la información o bien es posible colocar una query. A continuación un ejemplo:

select * from '[{ "value": "Este **texto** esta *escrito* en formato <br/> ### Titulo <br/>  ~Tachado~ <br/> **_Soporta algunas especificaciones_**"}]' as data


Una vez ingresada la información requerdia se finaliza la configuración seleccionado el botón **OK**

El resultado final, de acuerdo al ejemplo, será:


# Core Metrics
Este widget permite mostrar información sobre métricas junto con un gráfico si es deseado.
> ***Nota:** Por el momento solo se puede seleccionar como gráfico una barra de progreso como gráfico, pero se planea agregar más opciones a futuro.*

Apps - Dashboard - Widget Core metrics.png

Apps - Dashboard - Widget Core metrics 2.png

## Creación de un Widget Core metrics
Con el dashboard en modo edición se debe ingresar en "New widget" y encontraremos este dentro de la categoría "Basics".

Apps - Dashboard - Widget Core metrics 3.png

### Basic Options

En esta sección se realiza la configuración general del widget.

**Name**: Nombre del widget, único campo obligatorio.
**Description**: Descripción opcional del propósito del widget.
**Documentation**: Espacio libre para incluir documentación adicional.
**Sample Data**: Se muestra un ejemplo en formato Json.

Apps - Dashboard - Widget Core metrics_Basic options.png

### General Options
En esta sección es donde se configuraran las variables correspondientes al título y/o subtítulo, valor o valores que se desea mostrar, la unidad de medida junto su valor, color para la métrica, orientación e icono. Tanto el icono como el color pueden ser dinámicos o estáticos.

> ***Nota:** La principal diferencia entre las variables Main value y Measured Value es que una refleja el valor exacto de lo que se está mostrando y la otra la proporción correspondiente a la medida que se está utilizando.*
>
> *Por ejemplo:*
>
>*Archivos Descargados
Main value = 894, Measured value = 75, Measurement Unit= "%"*
>
>*En este caso 894 sería la cantidad de archivos descargados y 75 significaría que el valor main value corresponde al 75% del total de archivos por descargar.*

Apps - Dashboard - Widget Core metrics_General options.png

### Graphics Options
Desde esta sección se podrá seleccionar si se mostrará algún gráfico o no, elegir el tipo, y se colocará la variable que le dará al gráfico el valor que debe representar.

Apps - Dashboard - Widget Core metrics_Graphics options.png

Al presionar "Ok" se mostrará la siguiente pantalla con la configuración general de widgets.

### Configuración Visual del Widget (Widget Setup - Basic options)

En esta sección se indican los siguientes datos y opciones:
- **Title**: es el nombre que se mostrará en la card del widget
- **Font Weight**: se selecciona el peso de la tipografia (Normal, Medium o Bold), por defecto siempre será de tipo Normal aún sin ser seleccionado.
- **Refresh Group:** es el grupo de refresco de la información que debe coincidir con la opción configurada en el Data Source **-----insertar link a esa sección----**
- **Icon selector** este botón sirve para seleccionar un icono que identifique la card que se diseña.
- **Alarm**: se puede agregar una condición que una vez cumplida se activa una alarma.
- Query de ejemplo: ```select new(true) as alert from '{}' as data```
- Se comprende que alert debe ser un valor ```'true'``` para activar la alarma.
**------ COLOCAR EJEMPLO-----**
- **Actions:** define una acción **-----especificar su uso y colocar link a la sección-----**
- **Tooltip:** se muestra un icono (i) que despliega la información que el diseñador desee.
- **Action Parameters:** **------no tengo info sobre esta opción-----**

Existen otras opciones disponibles que se habilitan a través de un switch:
- **Hide Title:** sirve para ocultar el titulo del widget
- **Collapse Icons:** **------no tengo info sobre esta opción-----**
- **Use dynamic icon:** **------no tengo info sobre esta opción-----**

Apps - Dashboard - Widget Core metrics_Basic options 2.png

### Query
Aquí se colocará la consulta que trae la información al gráfico con las variables previamente configuradas en el widget. Esta información puede venir directamente de un recurso de la plataforma o de un DataSource dentro del Dashboard. Además la query utilizada puede ser simple o pueden ser varias queries, cada una sujeta a una condición.

Apps - Dashboard - Widget Core metrics_Query.png

### Container Styles
Este widget tiene la posibilidad de ocultar el fondo de la tarjeta que lo contiene, en esta sección se encuentra un switch para activar o desactivar esta opción.

Apps - Dashboard - Widget Core metrics_Container styles.png

Luego de aplicar y guardar los cambios, se visualizará en el dashboard el formulario y se podrá interactuar con el mismo.