Visión general de los widgets personalizados

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

Visión general de los widgets personalizados

Construye tus propias funciones en Tulip usando HTML, CSS y JavaScript.
Biblioteca de widgets disponible 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 luego 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 lo que 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 tablas u otra información asociar con el prop.

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

Los widgets personalizados son accesibles a través del selector desplegable Custom en el App Editor.

Creación de un widget

:::(Advertencia) (Advertencia)
Sólo los usuarios con acceso a la configuración de la cuenta (Propietarios de la cuenta) pueden acceder a la interfaz 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 ser cambiados directamente en la sección de vista previa para propósitos de prueba.

Funciones especiales para interactuar con Props y Eventos.

Obteniendo el Valor de los Props

//Obtener el Valor de un Objeto getValue('Mi Objeto');
/Almacenar la prop en una variable let myVariable = getValue('Mi Objeto');

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

Establecer el valor de una proposición

Establecer**el** valor de una proposición 
setValue('Mi Prop', *value\_to\_set*); 


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


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

Disparar un evento

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


//disparar un evento sin carga útil
fireEvent('Mi Evento');


//disparar un evento con carga útil
fireEvent('Mi Evento', miVariable);

Ejemplo de vídeo de construcción del widget

Importar/exportar aplicaciones

Exportar

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

1. Seleccione "Exportar".

Importar

1. En la pantalla de resumen del widget personalizado, seleccione los 3 puntos de la parte superior.

1. Seleccione "Importar".

1. Busque el archivo .json del widget personalizado.

Habilitar las 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 ser habilitadas para cada widget en el que desee utilizarlas.

1. Mientras que en su Widget, haga clic en el menú de 3 puntos en la cinta.

1. Selecciona "Habilitar biblioteca externa".

1. Seleccione la extensión que desea habilitar.

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éntase 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 biblioteca externa que puede manejar cálculos complejos para resolver ecuaciones.
• Lodash - Lodash proporciona un montón de herramientas que facilitan el trabajo con los tipos de datos de javascript.
• ChartJS - Es la biblioteca 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.