El componente Content permite crear elementos visuales personalizados utilizando HTML, CSS (Style) y JavaScript (Script). Es una herramienta poderosa para construir paneles dinámicos, interfaces interactivas y presentaciones de datos personalizadas, todo dentro de la plataforma Gaio. Esta tarea ofrece gran flexibilidad para usuarios con conocimientos de programación.
Cómo Usar el Editor Content
1. Seleccionar el Componente Content
En el panel lateral izquierdo, dentro de Entrega, arrastra la tarea Content hacia tu flujo.
Conéctala a las tareas o tablas cuyos datos deseas utilizar.
2. Configurar la Tarea
Etiqueta de la Tarea
(Opcional) Nombre para identificar este paso dentro del flujo.
Pestaña HTML (Estructura Visual)
Utiliza esta pestaña para construir la estructura del resultado visual.
Aquí defines:
Contenedores
Títulos
Tablas personalizadas
Elementos interactivos
Pestaña Script (Lógica JavaScript)
Permite agregar lógica dinámica.
Accede a las tablas mediante el objeto context.
Inserta valores dinámicamente dentro del HTML.
Aplica cálculos personalizados.
Pestaña Style (Estilos CSS)
Permite personalizar la apariencia:
Colores
Tipografía
Espaciado
Bordes
Animaciones
Aunque las pestañas estén separadas por lenguaje, puedes combinar HTML, CSS y JavaScript dentro del mismo código.
Contexto de Datos
Para utilizar datos de tablas existentes en Gaio:
Debes marcarlas como disponibles.
Activa cada tabla que será utilizada.
Gaio pondrá sus datos a disposición en esta tarea.
Opciones
Borde: Define si el resultado visual tendrá un contenedor con borde.
Con borde: genera un cuadro visual.
Sin borde: el contenido se integra con el fondo.
Recomendación: usar sin borde cuando se muestran imágenes o diseños más limpios.
Biblioteca: Permite seleccionar bibliotecas externas compatibles.
Contenido: Permite acceder a imágenes, PDFs y otros archivos cargados en Gaio.
Desde esta tarea es posible mostrar:
Imágenes
PDFs
Videos
Mapas
Cualquier elemento que el código permita renderizar
3. Vista Previa y Configuración de Visualización
Pestaña Resultado
Muestra una vista previa en tiempo real del contenido renderizado.
Puedes:
Combinar datos de múltiples tablas
Aplicar cálculos
Mostrar resultados dinámicos en tiempo real
Configuración de Tamaño
Ancho (%) – Define cuánto espacio horizontal ocupa el componente.
Altura (px) – Define el tamaño vertical del marco de resultado.
Siempre que agregues o modifiques código, debes hacer clic en Ejecutar para visualizar el resultado.
Buenas Prácticas
Mantén el HTML y JavaScript modular y limpio.
Verifica siempre valores null o undefined antes de utilizarlos.
Utiliza console.log() para depuración cuando sea necesario.
El componente Content permite transformar Gaio en una plataforma altamente personalizada, combinando datos, diseño y lógica en una única experiencia interactiva.
