Pular para o conteúdo principal

Conteúdo e layout

Além dos campos, há componentes para estruturar a página e mostrar conteúdo livre.

Bloco HTML​

Um espaço para HTML livre — útil para textos formatados, avisos ou trechos personalizados. Ele também tem um assistente de IA em forma de chat, que cria o bloco ou edita o HTML atual a partir de uma conversa (veja abaixo).

O bloco roda num iframe isolado e recebe, sem configuração:

  • Expressões {{ }} com $form, $data, $args e $user (veja Expressões e variáveis).
  • Os dados das consultas da página em JavaScript: defina window.onDashboardData = function (datasets, theme) { ... }; datasets[id] (ou datasets[rótulo], quando o rótulo é único) é { columns, rows }. A função roda de novo quando os dados são recarregados.
  • Chart.js (Chart) quando o HTML o menciona, e as variáveis de tema (--color-* em R, G, B e --bg, --surface, --text, --accent… em hexadecimal).
  • O objeto workflow (workflow.submit(), workflow.navigate('pg_x'), workflow.trigger('au_x')).

Com uma consulta na página, peça ao assistente "um gráfico de barras de total por mês": ele já conhece os ids e as colunas das consultas.

Assistente de IA e versões​

O painel Gerar com IA do bloco é um chat. A cada mensagem, a IA recebe o HTML atual do bloco, os campos e as consultas da página e as mensagens anteriores da conversa — por isso um pedido como "troque o título para Vendas 2026" muda só o título, e não refaz o bloco.

  • Ela responde o que fez. Cada resposta traz uma frase curta do próprio assistente ("troquei o título para Vendas 2026"). Se o pedido não for uma instrução de mudança — uma pergunta, um texto solto, ou algo que o bloco já faz — a IA devolve o HTML intocado, diz isso no chat e não cria versão.
  • Edita, não refaz. Com HTML existente, a IA devolve o bloco completo com apenas a mudança pedida e preserva o estilo que já está lá. Ela não troca para o padrão de dashboard por conta própria: blocos e elementos novos seguem as convenções de bloco do Workplayer, e o HTML existente é preservado como está. Para recomeçar do zero, peça explicitamente ("refaça", "do zero").
  • Versões. Acima do chat há uma faixa de versões do bloco: cada resposta da IA vira uma versão (✨) e uma edição feita à mão na caixa de HTML vira uma versão manual (✎) assim que a IA — ou uma restauração — for sobrescrevê-la. A versão atual aparece destacada.
  • Restaurar é definitivo. Clicar em uma versão anterior volta o HTML para ela e apaga as mensagens e as versões posteriores, para que a IA não repita o mesmo erro na próxima mensagem. A confirmação avisa quando uma edição manual será perdida. Logo depois de restaurar, o link Desfazer restauração desfaz a restauração inteira — HTML, versões e mensagens voltam a como estavam — enquanto o editor estiver aberto.
  • Limpar conversa inicia uma nova sessão: as mensagens antigas ficam visíveis, esmaecidas, mas deixam de ser enviadas à IA. O HTML, as consultas e as versões não mudam. Use quando a conversa ficou longa e as respostas começaram a piorar.
  • Desfazer do editor (↶). O desfazer do editor de páginas reverte o HTML de uma resposta da IA, mas não mexe na faixa de versões — por um momento o HTML atual pode não corresponder a nenhuma versão; a próxima resposta da IA captura esse estado como versão manual.

Nada disso vai para a página publicada: a conversa e as versões ficam só no editor.

Área de rolagem​

Um container com rolagem que segura outros componentes dentro dele. Bom para listas longas. Você define a direção, a altura máxima e o tamanho padrão dos itens.

Grupo​

Junta vários componentes em um grupo, para tratá-los como um conjunto. Cria-se pelo painel de camadas, com a opção Agrupar selecionados.

Agrupamento em versão inicial

O agrupamento de componentes ainda está em uma versão inicial e pode não funcionar como esperado. Use com cautela e salve seu trabalho com frequência.

Divisor​

Uma linha para separar visualmente as seções da página (horizontal ou vertical).

E os componentes de dados?

A paleta também traz Banco de dados, Requisição HTTP e Planilha. Como são recursos mais avançados, eles ganham páginas próprias em Recursos avançados.