Contenido

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

1. En el panel lateral izquierdo, dentro de Entrega, arrastra la tarea Content hacia tu flujo.

2. 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:

1. Debes marcarlas como disponibles.

2. Activa cada tabla que será utilizada.

3. 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.