> For the complete documentation index, see [llms.txt](https://docs.gaiodataos.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.gaiodataos.com/gaio-dataos-portuguese/tools/tarefas/entrega/conteudo.md). # 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