Conteúdo

O componente Conteúdo permite construir elementos visuais personalizados utilizando HTML, CSS (Style) e JavaScript (Script). É uma ferramenta poderosa para criar dashboards dinâmicos, interfaces interativas e apresentações de dados personalizadas, tudo dentro da plataforma Gaio.Essa tarefa oferece grande flexibilidade para usuários que possuem conhecimentos em programação.

---

Como Utilizar o Editor de Conteúdo

1. Selecionar o Componente Conteúdo

No painel lateral esquerdo, na seção "Entrega", arraste a tarefa Conteúdo para o seu fluxo. Conecte-a às tarefas ou tabelas cujos dados você deseja utilizar.

---

2. Configurar a Tarefa

Rótulo: (opcional) Nome para identificar esta etapa no seu fluxo.

Aba HTML (Estrutura Visual): Utilize esta aba para construir a estrutura do seu output.

Aba Script (Lógica em JavaScript): Acesse suas tabelas de dados por meio do objeto context. É possível inserir valores dinamicamente no HTML.

Aba Style (Estilização em CSS): Personalize a aparência do seu conteúdo.

Mesmo que existam abas separadas com os nomes das linguagens, o usuário pode utilizar HTML, CSS e JavaScript combinados no mesmo código.

---

Contexto

Para utilizar dados de tabelas existentes no Gaio, elas precisam estar sinalizadas. Para isso, marque cada tabela que será utilizada para que o Gaio disponibilize seus dados nesta tarefa.

---

Opções

Define como o resultado visual do código será exibido:

• Com borda: gera um box ao redor do objeto

• Sem borda: o conteúdo se mistura ao fundo

Sem borda pode ser mais interessante ao utilizar imagens ou conteúdos visuais amplos.

---

Biblioteca

Aqui você seleciona qual biblioteca deseja utilizar.

---

Contéudo

Aqui é possível visualizar imagens, PDFs e outros arquivos enviados ao Gaio. Na tarefa Contéudo, é possível exibir imagens, PDFs, vídeos, mapas e qualquer outro recurso permitido pelo código.

---

3. Preview e Configurações de Exibição

A aba Resulto mostra uma pré-visualização em tempo real do output renderizado.

É possível:

• Combinar dados de múltiplas tabelas

• Aplicar cálculos

• Exibir resultados dinamicamente

Você pode controlar:

• Largura (%) – Quanto espaço horizontal o componente ocupará

• Altura (px) – Altura vertical do frame de resultado

Sempre que inserir códigos na área preta, é necessário clicar no botão Executar para visualizar o resultado abaixo.

---

Boas Práticas

• Mantenha seu HTML e JS organizados e modulares

• Sempre verifique se os dados não são null ou undefined antes de utilizá-los

• Utilize console.log() para depuração quando necessário