Widgets personalizados

Construye tus propios widgets en Tulip usando HTML, CSS y JavaScript

Widgets personalizados

Construye tus propias funciones en Tulip usando HTML, CSS y JavaScript. Widgets de biblioteca disponibles aquí: https://tulip.co/library/?query=Widgets

Introducción

Los elementos que arrastras y sueltas en tu aplicación se llaman "Widgets". Pueden ser botones, imágenes, cuadros de entrada y cualquier otra cosa disponible en la barra de herramientas.

Los widgets personalizados te permiten escribir tu propio código y crear tus propios widgets que puedes arrastrar y soltar en tu aplicación e interactuar con ellos. Esta capacidad permite a los usuarios de Tulip ampliar los límites de lo que es posible en Tulip.

En este artículo, te daremos una visión general de cómo funcionan los widgets personalizados.

Conceptos básicos de los widgets personalizados

La pantalla de gestión de widgets personalizados se encuentra en la página de configuración de tu cuenta. Aquí es donde puedes crear y eliminar widgets. El editor de widgets personalizados te permite escribir el código de tu widget, crear accesorios y eventos, y previsualizar tu widget. A continuación se muestra un diagrama que describe qué son los accesorios y los eventos:

Props: Los props son datos que se comparten entre los widgets personalizados y las aplicaciones Tulip. Los props se expondrán en el editor de aplicaciones y permitirán a los editores de aplicaciones seleccionar qué variables, registros de tabla u otra información asociar con el prop.

Eventos: Los eventos son señales que tu Widget puede enviar a tu aplicación. Los eventos permiten a tu aplicación responder con un disparador y pueden llevar información junto con ellos.

Los widgets personalizados son accesibles a través del selector desplegable Personalizado en el Editor de Aplicaciones.

Creación de un widget

:::(Warning) (Advertencia) Sólo los usuarios con acceso a la configuración de la cuenta (Propietarios de cuenta) pueden acceder a la interfaz de usuario de edición de widgets personalizados. :::

La pantalla del editor de Widgets se divide en cuatro secciones. El código que escriba en la sección inferior izquierda aparecerá en la sección de vista previa una vez que haga clic en la sección de vista previa. Los valores de Prop pueden cambiarse directamente en la sección de vista previa para propósitos de prueba.

Funciones especiales para interactuar con Props y Eventos.

Obtener el Valor de los Objetos de Atrezzo

:::(Warning) (Advertencia) No está garantizado que el prop utilizado por un widget se cargue antes de que se cargue dicho widget, por lo que todos los props asociados con campos de registro de Tabla, Agregaciones o cualquier otro valor dinámico deberían incluir lógica para soportar casos en los que sean nulos en el punto en el que se carga el widget. Consulte esta sección para obtener más información sobre la activación de la lógica cuando cambia una proposición.
:::

//Obtener el valor de una proposición getValue('``Mi proposición``');``//Almacenar la proposición en una variable let myVariable = getValue('Mi proposición');

Hacer algo cuando cambia una proposición

//Hacer algo cada vez que cambia el valor de una proposición getValue('Mi Proposición', (variableinterna) => { doSomething(variableinterna); });

Establecer el valor de una proposición

//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 carga fireEvent('Mi Evento');


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


## Vídeo de ejemplo de creación de widgets


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




---


## **Importar/Exportar aplicaciones**


**Exportar**


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


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


1. Selecciona "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, selecciona 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. Selecciona "Importar".


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


1. Busca 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 Librería 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.


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


Aquí tienes una descripción básica de lo que hace cada una de ellas, muchas de ellas destacan 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.
* **javaascript-Ip-solver** - Ip solver es una librería externa que puede manejar cálculos complejos para resolver ecuaciones.
* **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.