Widgets

Os Widgets são os elementos visuais pré-construídos disponíveis na Paleta de Widgets do Page Builder. São os blocos base (micro) que arrastas para o canvas para construir Páginas e Componentes (os blocos macro que crias no Page Manager).

Cada widget é gerado como um componente do Design System — por exemplo, o widget Table passa a IGRPDataTable e o Input Text a IGRPInputText. Esta página explica como configurá-los no Studio; o Design System documenta as props e o uso em código.

Arquitetura

O FrontEnd do iGRP segue uma arquitetura modular e escalável, com foco em:

Componentização

Uso extensivo de componentes reutilizáveis

Renderização Híbrida

SSR (Server-Side Rendering) e SSG (Static Site Generation)

Otimização de Performance

Code-splitting, lazy loading e otimização de imagens

Tipagem Forte

Suporte completo a TypeScript

Temas e Estilização

Suporte a múltiplos temas e sistemas de design

Categorias de Widgets

Na Paleta de Widgets do Page Builder, os widgets estão agrupados por categoria:

Pesquisa rápida

Usa o campo Search (⌘F / Ctrl+F) no topo da paleta para encontrar um widget pelo nome.

O widget Table (gera um IGRPDataTable) mostra dados em linhas e colunas, com colunas tipadas, filtros, ações por linha e binding aos dados.

Colunas

Arrasta o widget Table para o canvas.

Clica em Manage Columns — abre a Gestão de Componentes das colunas.

Em Adicionar Componente, escolhe o tipo de coluna: Text, Amount, Date, Badge, Link, Tooltip, Check, Expandable, Actions ou Hidden Column.

Em Edit, dá à coluna o nome do campo (por exemplo requerente) e o Header Title que aparece no cabeçalho.

Gestão de Componentes da tabela com colunas Requerente, Tipo de pedido, Data, Estado e a coluna de Ações

Ao passar o rato sobre a tabela aparece a barra de ferramentas do widget, com Add Comp (colunas, filtros ou um Row Subcomponent) e Binding Config.

Barra de ferramentas da tabela e o diálogo Adicionar Componente com Table Column, Table Filter e Row Subcomponent

Binding

Binding Config gera o tipo dos dados da tabela a partir das colunas. Dá-lhe um Nome (por exemplo Pedido) e confirma o Nome e o Tipo de dado de cada campo — têm de coincidir com o que a API devolve.

Carregar os dados

Abre as configurações da página (engrenagem no canto superior direito do canvas).

No separador Interações, edita o gatilho On load.

Em Custom Code, carrega os dados e passa-os ao estado da tabela (setContentTabletable1). O painel Function Settings lista os estados, funções e snippets disponíveis — Name insere a variável, Set insere o setter.

Save changes e guarda a página.

Separador Interações da página com o gatilho On load

Edit Interaction do On load com código que carrega os pedidos e Function Settings com os estados

O código gerado fica assim:

const { data, isLoading } = useGetTodos();

useEffect(() => {
  if (!data || isLoading) return;
  setContentTabletable1(data || []);
}, [isLoading, data]);

Coluna de ações

Em Manage Columns, junta uma Actions Column.

Na linha da coluna de ações, Adicionar Componente junta as ações: Link Action, Modal Action, Alert Action ou Dropdown Column.

Em Edit, configura cada ação: Label Trigger (texto), e as props próprias — destino do link, título e botões do modal, título e mensagem do alerta.

Cada ação recebe rowData — os dados da linha em que foi clicada (rowData.id, rowData.estado…), para usar nos handlers.

Ações com dados dinâmicos

Numa Link Action, escolhe Href → Page para navegar para uma página do projeto. Se a página tiver segmentos dinâmicos (/pedidos/[id]), mapeia cada Route Segment ao Data Field da linha (id → id). Em Navigation Parameters podes juntar parâmetros de query.

Link Action com Href em modo Page e o segmento id mapeado para o campo id

O widget Form (gera um IGRPForm com um esquema Zod) agrupa os campos, valida-os e trata a submissão.

Configuração do formulário

Arrasta o widget Form para o canvas — já traz um Headline e uma Grid.

Arrasta os campos para dentro da grelha (Input Text, Select, Date Picker Single, Textarea…).

Ajusta as props de cada campo na sidebar de edição — Label, Placeholder, Required…

Junta um Button ao formulário para a submissão.

Formulário Novo pedido com os campos Requerente, Tipo de pedido, Data do pedido e Observações e a barra de ferramentas do Form

Binding

Binding Config na barra do Form gera o esquema de validação a partir dos campos.

Nome do campo

É a chave enviada à API (requerente, tipo, data…). Por defeito é o nome técnico do componente (inputText1) — muda-o para o nome que a API espera.

Tipo de dado

string, number, date… define a validação gerada.

Required, Nullable, IsList, Valor Padrão

Regras de cada campo no esquema.

Binding Configuration do formulário com os campos requerente, tipo, data e observacoes

Submissão

Seleciona o botão e abre o separador Interações — o gatilho Mouse click (tap) já existe.

Edita-o e, em Action Type, escolhe Form Submit.

Em Target Form, escolhe o formulário a submeter.

Separador Interações do botão Submeter pedido com o gatilho Mouse click (tap)

Edit Interaction com Action Type Form Submit e o formulário de destino

Para tratar o resultado (chamar a API, mostrar um toast de sucesso ou de erro), usa Action Type → Function com uma função do Custom Code.

Edit Interaction com Action Type Function, a escolha de função e a função inline

O widget Modal Dialog (gera um IGRPModalDialog) traz cabeçalho (título e descrição), rodapé com botão de fechar, uma zona de conteúdo e um trigger — um botão que o abre e fecha sem configuração adicional.

Widget Modal Dialog no canvas com título, descrição, fecho, zona de conteúdo e o botão trigger

Arrasta para a zona de conteúdo os widgets do modal — por exemplo um Textarea para o motivo do cancelamento.

Modal Dialog com um Textarea na zona de conteúdo

Controlo por estado

Para abrir o modal a partir de outro elemento (um botão noutra zona da página, uma ação da tabela), controla-o com um estado:

No Custom Code, cria um estado Boolean (por exemplo modalCancelarAberto) e uma função que o põe a true.

Nas propriedades do Modal Dialog, passa o rato sobre Open, clica em ⋮ e escolhe o estado em State.

No separador Interações do modal, junta o gatilho On open com a função inline (open) => setModalCancelarAberto(open) — mantém o estado certo quando o modal é fechado.

No botão que abre o modal, em Interações → Mouse click (tap), escolhe Action Type → Function e a função criada.

Prop Open do Modal Dialog ligada ao estado modalCancelarAberto

Gatilho On open do modal com a função inline que atualiza o estado

Separador Interações do botão Cancelar pedido com o gatilho Mouse click (tap)

Edit Interaction do botão com a função abrirCancelamento selecionada

A partir da tabela

Numa coluna de ações, a Modal Action abre um modal próprio por linha: configura o Modal Title e os botões Cancel/Confirm em Edit.

Widgets

Arquitetura

Categorias de Widgets