<!-- 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

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.


#### Ejemplo:

Se muestra la cantidad que contiene una variable.

### Basic Options

Se ingresa un **name**, que se mostrará en el front y la opción de ingresar la descripción y documentación si se cree necesaria.


### Metric Options

Se ingresa el nombre de la variable que contiene la información a mostrar y es posible además escribir un nombre para expresar la unidad de la información (km, grs, db, cm3, etc.)
Si se desea se pueden agregar estilos CSS.

En Widget Setup hay 2 opciones de ingresar las variables a mostrar:

### **Single Query**


- Conditional queries ### **NO HAY FOTO**

### 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.


## Widget Imagen

Muestra imágenes en formato .jpg/.png ubicadas en la plataforma o indicando una URL externa.


### Basics Options

Es obligatorio completar el campo **Name** y es opcional ingresar datos en los campos **Description** y **Documentation**


### Image Options

En este apartado se especifica cuál será la variable clave para mostrar la imagen, la **URL Key**
Se puede establecer cuáles **controles de imagen** pueden habilitarse para esa imagen.
- Show Status
- Show Indicators
- Disable Download
- Show Dots on Top


Una vez realizada esta configuración, en **Widget Setup - Query** se especifica el Datasource que buscará la imagen.



## Widget Button Set

Permite crear un botón que dispare una acción en particular.


En Basic Options se ingresa un **Nombre** (campo obligatorio) y es posible agregar una **Descripción y Documentación** en caso de ser necesario.


En la sección Button Set Options, se configura la **alineación** del botón: _**Center, Right or Left**_, también es posible seleccionar (en caso de 2 o más botones) la **Posición** que tendrán una respecto de otro, en este caso **_Vertical u Horizontal_**


Cada botón puede ser asociado a una **Acción** (ver Configuración de Acciones)



## 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. En Basic Options, se especifican los siguientes datos:

- Name (único campo obligatorio)
- Description
- Documentation
- Sample Data (no muestra nada) ???? **Analizar si es posible eliminar este espacio.**

## 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) o en cuadrícula (grid). 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"

**2.** **Data loading behavior**: existen 2 posibilidades, el estilo **Classic** en la que al seleccionar cada tab o pestaña, se realiza hace una llamada al backend para cargar los datos, y el estilo **Local Query** en la que 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**: permite distribuir los widgets de manera personalizada.

**4.** **+ Add widget**: esta opción permite ir a la sección de widgets y seleccionar los que serán parte del composite. Una vez configurado se muestra nuevamente la pantalla de un nuevo widget. Notar que en el breadcrumb se agregan los pasos anteriores.

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**

Otra configuración que se puede añadir en el widget composite son los parámetros dinámicos en los títulos de las pestañas (tabs) de un widget
de tipo Composite. A modo de ejemplo: cuando se seleccione algún dato en una tabla, se toman esos parámetros y se reflejan en el título del widget.






## 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*.




## Configuración del Widget Progress Step

- **Basic options**: permite agregar información al widget como el título, icono del widget y grupo de actualización.


- **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"
} ]
****


### 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


**Ejemplo Adicional:**



## Widget Híbrido Imagen/Video (hasta aqui llegue)

El widget de tipo Híbrido Imagen/Video permite mostrar de forma dinámica, por medio de un parámetro que indica el tipo, tanto una imagen como un video. Las opciones disponibles para cada tipo de archivo son:

**- Imagen:**

**- Disable Download:** Permite deshabilitar la opción de descarga de la imagen.

**- 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.

## Paso a Paso

Este widget se encuentra en la sección “New Widget” durante la creación o edición de un Dashboard, en la categoría “Basics”.


Una vez seleccionado el widget nos encontraremos con la sección de configuración básica, donde debemos colocar un nombre y también veremos un ejemplo de información que podría recibir el widget.

Luego nos dirigimos a la sección “Hybrid options” donde encontraremos 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 debe presionar el botón “Ok” para avanzar a la siguiente pantalla.

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, por ejemplo:

select * from ds_Hybrid

O

$ds_Hybrid


Luego de configurar estas secciones se presiona el botón “Ok” para poder ir a configurar el Data Source. Al estar en la pantalla de edición del dashboard se selecciona el botón “Setting” y luego se ingresa a “Data Sources”.

Una vez ahí se presiona el botón “Add” y luego se elige el Data Source creado para configurarlo.


Se coloca un título al Data Source, y el query para obtener la información.


A continuación se adjunta el link de un pequeño video de prueba de este widget.

En este caso el query de ejemplo utilizado es:

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

Una vez completados estos datos se presiona el botón “Apply” y podremos visualizar el archivo, de video en este caso, en el widget.

A continuación se adjunta el link de un pequeño video de prueba de este widget.

 [Demo Widget Hybrid](https://youtu.be/UhxptxiiBKo)

## Notas

- 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.

## Filter

El widget se encuentra en la sección “New widget” al crear un nuevo dashboard o al editar uno existente.

Este widget permite visualizar datos en formato JSON por medio de una query al recurso o archivo deseado.
Al seleccionar el widget tendremos la pantalla de opciones donde podremos encontrar:

## Basic options
**Name:** Aquí colocaremos el nombre para nuestro widget. Este campo es el único obligatorio.
**Description:** Podremos colocar una pequeña descripción sobre lo que mostraremos en este widget.
**Sample Data:** En este campo encontraremos un JSON de muestra para visualizar cómo se mostrará el formato en el widget.

## Json options
**Theme:** Aquí podremos elegir el tema de colores que tendrá el JSON mostrado en el widget

**Icon Style:** Nos permitirá elegir la forma que tendrán los botones para colapsar o expandir los apartados del JSON.

**Space** Elegiremos el tamaño de las tabulaciones de cada nivel.

**Length for collapsing texts:** Se podrá elegir sí los textos se colapsarán pasado un determinado largo o si se mostrará completo.

**Show data type:** Permite elegir si se mostrará el tipo de dato que se está mostrando o no.

**Show length:** Podemos elegir si se mostrará el largo de cada elemento del JSON.

**Creased:** Nos permite elegir si se mostrará colapsado,**expandido parcial o totalmente el JSON.

**Enable Clipboard:** Aquí se activa la opción de poder copiar o ****no los elementos del JSON.

Luego de haber completado las opciones según nuestra preferencia pasaremos a la siguiente pantalla presionando el botón “OK”.

En esta pantalla podemos colocar un título al widget en el campo “Title” y el refresh group si deseamos que se actualice la información del widget, que debe coincidir con el datasource consumido por el widget.
En la sección “Query” se ingresa la consulta al Data Source, por ejemplo:

select * from ds_dataJson
O
$ds_dataJson

Luego de configurar estas secciones se elige el botón “Ok” para poder ir a configurar el Data Source. Al estar en la pantalla de edición del dashboard se selecciona el botón “Setting” (los 2 engranajes) y luego se ingresa a “Data
Sources”.

Una vez ahí se presiona el botón “Add” y luego se elige el Data Source creado para configurarlo.

Se coloca un título al Data Source, y el query para obtener la información.

En este caso el query de ejemplo utilizado es:

select *
from pizzeria.order

Una vez configurado el Data Source se presiona el botón “Apply” y al guardar podremos visualizar el JSON en nuestro widget con las preferencias colocadas.

## HTML Content
Dentro de un Dashboard, podremos crear un widget de Html content. Para esto, debemos seleccionar el botón “New widget”. Dentro del cuadro, seleccionamos “Select or create a new widget” y seleccionamos la opción Html content.

(Este widget no nos permitirá agregar código Html, sino que está realizado para poder mostrar información a través de un formulario)

Luego, se desplegará un cuadro con dos opciones:

**1. Basic options:** podemos completar con datos básicos como el nombre y la descripción.

**2. Layout:** podremos agregar una condición y un formulario.

Para poder agregar un formulario en Layout, primero debemos crear el formulario.

En caso de no tenerlo creado previamente, se puede crear un nuevo formulario presionando el botón NEW que se ve en la imagen.
En la sección derecha de la misma página, podremos observar cómo se ve nuestro formulario presionando en el botón “Apply”:

Luego de completar esta sección, podremos definir una query para llamar al formulario que queremos mostrar.

Seleccionamos el botón “Ok” y se visualiza el formulario en el dashboard:

Por otro lado, con el widget de Html podemos renderizar un formulario con la información que deseemos cargar, donde podremos agregar los datos que deseemos mostrar en el widget.

Para esto, también necesitamos crear un formulario en Apps- Forms. El formulario debe contener etiquetas de texto y a las mismas, agregarle un nombre de modelos de las variables.

Luego de tener el formulario creado, tenemos que crear un nuevo widget de Html Content en el Dashboard con los pasos explicados anteriormente.

Después, agregamos el formulario en Layout.

Además, debemos agregar una query para mostrar datos en el formulario.
Podremos crear una query con los datos que deseemos mostrar, como en la siguiente imagen:

Hay que tener en cuenta que al formular esta query, debe tener el mismo nombre de columna que le agregamos al “Model Variable” que agregamos cuando creamos el formulario. De esta forma, se visualizará en el dashboard el formulario Html:

➢ A continuación, se muestra en un video la configuración del widget
de Html:
https://youtu.be/tT8EG4HyVPQ

## Pdf Viewer

En este documento se detalla el funcionamiento y configuración del widget de tipo PDF Viewer.

## Descripción del Widget

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.

## Paso a Paso

Este widget se encuentra en la sección “New Widget” durante la creación o edición de un Dashboard, en la categoría “Basics”.


Widget PDF.png
(https://drive.google.com/file/d/1juhir5RONnRghviAa5qsmAmIxm97yeYM/view?usp=drive_link)

Una vez seleccionado el widget nos encontraremos con la sección de configuración básica, donde debemos colocar un nombre y también veremos un ejemplo de información que podría recibir el widget.

Widget PDF - Basic options.png
(https://drive.google.com/file/d/157izTEu4ISNOmSFmXpp12a2Q0UUgBpKD/view?usp=drive_link)

Luego nos dirigimos a la sección “Viewer options” donde encontraremos los campos “Indicate file by ID” y “Data Key”. El primero, al estar desactivado indica que el archivo se recibirá por medio de una URL(ya sea interna o externa) y al activarlo se indica que lo que se recibirá será el ID de un archivo dentro de la plataforma. En la segunda se ingresará el nombre de la variable que traera ya sea la URL o el ID.


Widget PDF - Viewer options.png
([https://drive.google.com/file/d/1U_3asuo72xT1_kI9weD108wqxXXZzojv/view?usp=drive_link](https://drive.google.com/file/d/1U_3asuo72xT1_kI9weD108wqxXXZzojv/view?usp=drive_link))

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

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.


Widget PDF - Basic options 2.png
(https://drive.google.com/file/d/1ZJ5OkU73tPUBNY7aHnf1zuf6ddjCKwiS/view?usp=drive_link)

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

select * from ds_PDF

O

$ds_PDF


Widget PDF - Query.png
(https://drive.google.com/file/d/1eV60QUbOVjsukc-DzjKYWWJIZ0TrGsCy/view?usp=drive_link)

Luego de configurar estas secciones se presiona el botón “Ok” para poder ir a configurar el Data Source. Al estar en la pantalla de edición del dashboard se selecciona el botón “Setting” y luego se ingresa a “Data Sources”.

Una vez ahí se presiona el botón “Add” y luego se elige el Data Source creado para configurarlo.


Widget PDF - Data Source.png
(https://drive.google.com/file/d/1RezrVTNZf1pIX-UHbi7PuttWCXzjh4sc/view?usp=drive_link)

Se coloca un título al Data Source, y el query para obtener la información.


Widget PDF - Data Source 2.png
(https://drive.google.com/file/d/1lQeIV5agYrYP2N0Q749HnJ0HQSpwTzgR/view?usp=drive_link)

En este caso el query de ejemplo utilizado es:

select fileId

from File

where id = dd627849-49e1-480b-839d-a6f6f309ce37

Una vez completados estos datos se presiona el botón “Apply” y podremos visualizar el archivo elegido en el widget.

Widget PDF - Ejemplo.png
(https://drive.google.com/file/d/1P21vnoDQ0zrdWDTzHSEWYzLg7iZW1jUw/view?usp=drive_link)

A continuación se adjunta el link de un pequeño video de prueba de este widget.

 [Demo Widget PDF Viewer](https://youtu.be/18SGtBmrW_g)

## Notas

- Para más información se puede 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.

## 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.

Para crear un widget QR Code, se debe acceder a la sección **Dashboard** y hacer clic en el botón **New Widget**. Luego, seleccionar la opción **Select or create a new widget** y eligir el tipo **QR Code** del listado disponible.

Widget QR Code-Dashboard.JPG

(https://drive.google.com/drive/folders/1raxR3y02GLDys_Rx9XELRC5gmU7iVF2W)

Widget QR Code-New widget.JPG

(https://drive.google.com/drive/folders/1raxR3y02GLDys_Rx9XELRC5gmU7iVF2W)

Widget QR Code-Elegir widget.JPG

(https://drive.google.com/drive/folders/1raxR3y02GLDys_Rx9XELRC5gmU7iVF2W)

## Configuración Básica (Basic options)

En esta sección se define la información general del widget.

| **Campo** |**Descripción** |

|--|--|

|**Name** | Nombre interno del widget, utilizado como identificador. |

| **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.|

Widget QR Code-Configuración-Basic options.JPG

(https://drive.google.com/drive/folders/1raxR3y02GLDys_Rx9XELRC5gmU7iVF2W)

## QR Code Options

En el campo **Value Key**, se debe ingresar 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 QR Code-Configuración-QR code options.JPG

(https://drive.google.com/drive/folders/1raxR3y02GLDys_Rx9XELRC5gmU7iVF2W)

### **Configuración general del widget QR code**

Al finalizar la configuración del widget **QR Code**, se muestra la configuración (Widget Setup) donde se pueden definir los siguientes aspectos:

- **Title**: Nombre que se mostrará en la parte superior del widget.

- **Hide Title**: Permite ocultar el título si se desea una vista más compacta.

- **Collapse Icons**: Reduce el tamaño de los íconos en la cabecera.

- **Refresh Group**: Se puede asignar un grupo de refresco para que los datos del widget se actualicen automáticamente.

- **Icon Selector**: Permite elegir un ícono representativo para el widget.

- **Use dynamic icon**: Habilita el uso de íconos dinámicos según condiciones.

- **Actions**: Aquí se definen las acciones disponibles (Link, General y Contextual).

- **Tooltip**: Texto de ayuda que aparecerá al pasar el cursor sobre el widget.

- **Action Parameters**: Lista de parámetros que se enviarán al ejecutar acciones desde el widget.

Widget QR Code-Configuración-Basic options.JPG

(https://drive.google.com/drive/folders/1raxR3y02GLDys_Rx9XELRC5gmU7iVF2W)

Finalmente, es necesario definir la fuente de datos que alimentará el widget. Esto se realiza en la sección **Query**, donde se puede:

- Escribir directamente la query deseada, o

- Referenciar un **DataSource** preconfigurado.

Widget QR Code-Query.JPG

(https://drive.google.com/drive/folders/1raxR3y02GLDys_Rx9XELRC5gmU7iVF2W)

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

## Forms

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

Apps - Dashboard - Widget Form.png

(https://drive.google.com/file/d/121lY6vmfcta4k2YMFyHhFCvqTHutzv_p/view?usp=drive_link)

## Creación de un Widget Form

Con el dashboard en modo edición se debe ingresar en "New widget" y dentro de la categoría "Basics".

Apps - Dashboard - Widget Form 2.png

(https://drive.google.com/file/d/1sW_2jhvMd2yrt0u-sAU9_dmWdkCCKFaU/view?usp=drive_link)

Una vez seleccionado el widget se abrirá la edición del widget. Primero se encuentra la sección Basic options donde se coloca un nombre al widget, de forma opcional se puede agregar una descripción al mismo.

Apps - Dashboard - Widget Form_Basic options.png

(https://drive.google.com/file/d/1mhVbbwodVDXc_oAs6O36G1bm6aYI4PDD/view?usp=drive_link)

Luego se encuentra la sección Form options donde se seleccionará el formulario que se desea visualizar, se coloca un nombre para el array de datos resultante de lo rellenado del formulario y se selecciona un evento que se ejecutará al enviar el formulario. Opcionalmente se puede activar una opción para que no borren los datos ingresados una vez enviado el formulario.

Apps - Dashboard - Widget Form_Form options.png

(https://drive.google.com/file/d/1QI2OKeIoUyXezIhMh4gMQ4WZpChOHUpG/view?usp=drive_link)

Al presionar "Ok" se mostrará la siguiente pantalla con la configuración general de widgets donde se puede colocar un título para el mismo.

Apps - Dashboard - Widget Form_Basic options 2.png

(https://drive.google.com/file/d/1uRSWE9w--vsq21wxTUVlFBGIdI9DqfOB/view?usp=drive_link)

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

<style>
.imagen-minimalista {
border: 1px solid #e0e0e0;
border-radius: 6px;
padding: 8px;
margin: 24px 0;
background-color: #ffffff;
text-align: center;
}

.imagen-minimalista img {
max-width: 100%;
height: auto;
border-radius: 4px;
}
</style>

<div class="imagen-minimalista">
<img src="https://hackmd.io/_uploads/SyYny5LUgg.png" alt="Print de pantalla">
</div>