Dashboards
O Construtor de dashboards usa o mesmo editor de páginas do Workflow para montar painéis de dados. A diferença está no resultado: em vez de um formulário que segue de página em página, um dashboard é um conjunto de páginas viradas abas, somente leitura, alimentadas por consultas.
:::info Dois jeitos de criar A lista de dashboards segue o mesmo padrão do Workflow — busca no topo e dois botões:
- Gerar com IA — abre o assistente de IA, que gera o painel a partir de consultas SQL e de uma conversa.
- Novo dashboard — abre o editor de páginas descrito aqui.
Os dois criam o mesmo tipo de dashboard. Um dashboard gerado pela IA é uma página com uma Consulta ao banco (oculta) para cada SQL e um Bloco HTML com o painel gerado. Clicar no card abre sempre o editor de páginas; de lá, o botão ✨ abre o assistente de IA para aquele dashboard, e no assistente o botão Editor de páginas faz o caminho de volta. Dashboards criados com a IA antes desta versão são convertidos automaticamente na primeira vez que forem abertos. :::
Versões e conversa do assistente
O assistente de IA aplica cada resposta no dashboard e salva. Para isso não ser um beco sem saída, o Bloco HTML gerado pela IA tem uma linha do tempo de versões, mostrada acima do chat do assistente e também no painel do bloco dentro do editor de páginas — é a mesma linha do tempo nos dois lugares.
- Cada resposta que muda o HTML vira uma versão (uma resposta que não altera nada não cria versão); uma edição feita à mão no editor de páginas vira uma versão manual antes de ser sobrescrita.
- Restaurar uma versão é definitivo: o HTML volta para ela e as mensagens e versões posteriores são apagadas — nas duas conversas (a do assistente e a do bloco no editor de páginas) — para que a IA não repita o erro. A confirmação avisa quando uma edição manual será perdida; Desfazer restauração desfaz a restauração inteira (HTML, versões e mensagens) enquanto a tela estiver aberta.
- Limpar conversa começa uma nova sessão do chat sem tocar no dashboard, no HTML nem nas versões: as mensagens antigas continuam visíveis, esmaecidas, mas não são mais enviadas à IA.
Mantenha o assistente aberto em uma aba só. Uma aba antiga do assistente guarda a conversa em memória e, na próxima mensagem, grava de volta as mensagens que uma restauração feita em outra aba já tinha apagado.
Os dois assistentes têm papéis diferentes: o do dashboard (Gerar com IA / ✨) segue o padrão visual de painéis; o do Bloco HTML, no editor de páginas, edita o HTML atual preservando o estilo que já está lá — ele não troca para o padrão de dashboard por conta própria.
Criando um dashboard manual
- No menu lateral, abra Construtor de dashboards e clique em Novo dashboard.
- Dê um nome e uma descrição. O editor abre com a mesma tela do Workflow: o grafo mostra as páginas e o editor de página monta cada uma delas.
- Cada nó do grafo é uma página do dashboard. As ligações entre nós não têm efeito em dashboards — a navegação é feita por abas.
- Dê dois cliques em uma página para abrir o editor e arraste os componentes para a tela.
Se o dashboard tiver mais de uma página, a versão publicada mostra uma barra de abas no topo. A primeira aba é a página de entrada (ou a primeira página, se nenhuma foi marcada como entrada).
Componentes
Além dos componentes já conhecidos do editor de páginas (campos, conteúdo e layout), a seção Página ganhou três componentes pensados para dashboards:
| Componente | Para quê | Configuração |
|---|---|---|
| Texto | Títulos, legendas e indicadores. Aceita expressões no rótulo, por exemplo Total: {{ $form.total }}. | Rótulo (aba Config), tamanho, peso, alinhamento e cor (aba Estilo). |
| Imagem | Logotipos e ilustrações a partir de uma URL. | URL da imagem e o ajuste (contain, cover, fill). |
| Gráfico | Barras, linhas ou pizza a partir de uma consulta da mesma página. | Fonte de dados, tipo de gráfico, Carregar colunas, coluna de categoria (X) e colunas de valor (Y). |
| Bloco HTML | HTML/JS livre que recebe os dados de todas as consultas da página (é assim que o painel da IA funciona). | Sem configuração: o bloco recebe window.onDashboardData(datasets, theme), onde datasets[id] (e datasets[rótulo], quando o rótulo é único) é { columns, rows }; Chart (Chart.js) está disponível; expressões {{ $data.consulta.coluna }} funcionam no HTML. |
As fontes de dados são as mesmas do Workflow: Consulta ao banco, Requisição HTTP e Planilha. Um gráfico só enxerga consultas e requisições da própria página (planilhas não alimentam gráficos).
Montando um gráfico
- Adicione uma Consulta ao banco e configure a conexão e o SQL. Deixe a consulta pequena e já agregada (
GROUP BY) — o gráfico usa as linhas como vêm. - Adicione um Gráfico e, na aba Config, escolha a consulta em Fonte de dados. Clique em Carregar colunas — a consulta roda uma vez e as colunas aparecem nos seletores.
- Escolha a coluna de categoria (X) (por exemplo
mes) e marque as colunas de valor (Y) (por exemplovendasemeta). Só colunas numéricas aparecem como valor; se a lista estiver vazia, a consulta não retornou números. Sem escolha, a primeira coluna vira X e a segunda vira Y. - Use Visualizar (▶) no editor para ver o gráfico com dados reais.
:::note Filtros Campos de entrada (texto, data, seleção) continuam funcionando em dashboards. Ligue-os aos parâmetros da consulta e o gráfico atualiza. O valor digitado é mantido ao trocar de aba. :::
Publicando e embutindo
Publicar funciona como no Workflow (Publicando e compartilhando), com uma diferença: dashboards sempre exigem login. O link publicado tem o formato /d/TOKEN.
Para o dashboard aparecer na tela Dashboards (cards) do Workplayer, cadastre uma personalização dashboard-link do tipo L com o link /d/TOKEN (somente o caminho, sem domínio). O card abre o dashboard embutido, já com as abas.
Limites
- A tela de cada página tem um tamanho lógico fixo (padrão 1280×720) e é redimensionada para caber no espaço disponível. Páginas altas rolam dentro do card. O Bloco HTML gerado pela IA cresce até a altura do seu conteúdo no dashboard publicado; blocos colocados à mão mantêm o tamanho definido no editor.
- Cada consulta retorna no máximo 50.000 linhas. Para tabelas maiores, agregue no SQL.
- O assistente de IA dentro do editor não cria fontes de dados nem gráficos — configure-os manualmente.