Widgets personalizados
- 24 Mar 2025
- 4 Minutos para leer
- Colaboradores
- Impresión
Widgets personalizados
- Actualizado en 24 Mar 2025
- 4 Minutos para leer
- Colaboradores
- Impresión
Resumen del artículo
¿Te ha resultado útil este resumen?
Gracias por sus comentarios
Construye tus propios widgets en Tulip usando HTML, CSS y JavaScript
Who can use this feature
Users on Professional plans and above.
Los elementos que puedes arrastrar y soltar en tu aplicación se llaman Widgets. Estos 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.
Mira el siguiente vídeo para una rápida inmersión en esta característica:
¡Echa un vistazo a los widgets personalizados en la biblioteca de Tulip!
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 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 Custom en el App Editor.
Crear un widget
Permission Required
Only users with access to account settings (i.e. Account Owners) or users with specific permission to access the custom widget page can use the custom widget editor.
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 prop pueden ser cambiados directamente en la sección de vista previa para propósitos de prueba.
Hay funciones especiales para interactuar con Puntales y Eventos.
Obtener el Valor de un Objeto
Warning
It is not guaranteed that the prop being used by a widget will load before that widget loads, so all props associated with Table record fields, Aggregations, or any other dynamic value should include logic to support cases where they are null at the point the widget is loaded. See this section for details on triggering logic when a prop changes.
//Obtener el Valor de un Objeto getValue('``Mi Objeto``');``//Almacenar el objeto en una variableelet myVariable = getValue('Mi Objeto');
Hacer algo cuando cambia una proposición
//Hacer algo cada vez que cambia el valor de una propgetValue('Mi Prop', (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 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.
{height="" width=""}
## Video de ejemplo de construcción de un widget
{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.
{height="" width=""}
1. Seleccione "Exportar".
{height="" width="800"}
**Importar**
1. En la pantalla general de widgets personalizados, seleccione los 3 puntos de la parte superior.
{height="" width="800"}
1. Seleccione "Importar".
{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.
{height="" width=""}
1. Selecciona "Habilitar Biblioteca Externa".
{height="" width="250"}
1. Seleccione la extensión que desea habilitar.
{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.
¿Te ha sido útil este artículo?
