Widgets personalizados

//Establecer el valor de una proposición de texto a '¡hola!'setValue('Mi Proposición de Texto', '¡hola!');


//Configura el valor de un elemento en un objeto setValue('Mi Objeto Prop', { 'Clave dentro del objeto': 'nuevo valor' });```


### **Dispara un Evento**


Dispara**un evento** fireEvent('evento', *payload*);


//dispara un evento sin payloadfireEvent('Mi Evento');


//dispara un evento con carga útilfireEvent('Mi Evento', miVariable);```


El siguiente diagrama ilustra el flujo de información a través de un widget personalizado en una app. Los datos de la variable de entrada se almacenan en la prop. El cambio de valor señala un evento donde un disparador almacena los datos en la variable de salida.


![Custom Widget App Setup Diagram](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Custom%20Widget%20App%20Setup%20Diagram.jpg){height="" width=""}


## Video de ejemplo de construcción de un widget


![Video](https://www.youtube.com/embed/H08-W2M2Ypo?rel=0){height="576" width="1024"}




---

## **Importar/Exportar Apps**


**Exportar**


1. En la vista general de widgets personalizados, seleccione los 3 puntos situados junto al widget que desea exportar.


![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Custom%20Widgets%20Overview_477703991.png){height="" width=""}


1. Seleccione "Exportar".


![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Custom%20Widgets%20Overview_477704053.png){height="" width="800"}


**Importar**


1. En la pantalla general de widgets personalizados, seleccione los 3 puntos de la parte superior.


![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Custom%20Widgets%20Overview_477704175.png){height="" width="800"}


1. Seleccione "Importar".


![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Custom%20Widgets%20Overview_477704228.png){height="" width="350"}


1. Busque el archivo .json del widget personalizado.


## **Activar bibliotecas externas**


Las bibliotecas externas amplían aún más lo que pueden hacer los widgets personalizados. Las bibliotecas externas se encargan de gran parte del trabajo *sucio* de escribir html directamente en JavaScript. Las bibliotecas externas deben habilitarse para cada widget en el que desee utilizarlas.


1. En su widget, haga clic en el menú de 3 puntos de la cinta.


![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Custom%20Widgets%20Overview_477684182.png){height="" width=""}


1. Selecciona "Habilitar Biblioteca Externa".


![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Custom%20Widgets%20Overview_477684247.png){height="" width="250"}


1. Seleccione la extensión que desea habilitar.


![Screenshot 2025-02-06 at 9.13.14 AM](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Screenshot%202025-02-06%20at%209.13.14%20AM.png){height="" width=""}


Aquí hay una descripción básica de lo que hace cada una de ellas, muchas de ellas sobresalen en muchas áreas, así que siéntete libre de explorar.


* **jQuery** - permite una selección más ágil de elementos html, junto con la manipulación de elementos.
* **D3 -** El estándar de oro para la visualización de datos, una curva de aprendizaje empinada, pero toneladas de flexibilidad.
* **Google Visualization** - Una gran herramienta para hacer lo que su nombre indica, visualización.
* **Lodash -** Lodash proporciona un montón de herramientas que facilitan el trabajo con tipos de datos javascript.
* **ChartJS -** La librería de gráficos más simple posible con toneladas de recursos en línea.
* Moment**-** Moment proporciona toneladas de herramientas para trabajar con fechas y horas.