iGRPIGRP 3.0Documentation

Page Builder

O editor visual do iGRP Studio para páginas e componentes — Paleta de Widgets, arrastar e largar, barra de ações dos widgets e sidebar de edição.

O Page Builder é o editor visual do iGRP Studio — constróis a interface arrastando widgets da Paleta de Widgets para o canvas, e configuras props, estilos e interações de cada um. Abre-se a partir do Page Manager (Abrir editor), para Páginas e para Componentes.

Page Builder com a Paleta de Widgets à esquerda e a página Pedidos no canvas

No topo, o editor tem quatro vistas e o botão de gravar:

Code
O código React gerado
Design
O canvas visual, com arrastar e largar
Tree
A árvore de widgets da página, com as propriedades de cada nó
Json
A estrutura interna da página em JSON

Grava com frequência

Salvar grava a página e regenera o código. Alterações por gravar perdem-se se fechares o separador.

Barra lateral

A barra à esquerda dá acesso aos painéis do editor:

Paleta de Widgets
Os widgets disponíveis, por categoria — ver Widgets
Código Personalizado
Funções, estados e snippets da página — ver Custom Code
Explorer
Os ficheiros da aplicação gerada
Configurações
Configurações do projeto
Git
Controlo de versões do projeto
Barra lateral do Page Builder com a Paleta de Widgets selecionada

Arrastar e largar

Arrasta um widget da paleta para o canvas. As zonas que o aceitam mostram DROP HERE COMPONENTS.
Alguns widgets já trazem filhos: o Form vem com um Headline e uma Grid, o Modal Dialog com cabeçalho, rodapé, conteúdo e trigger, a Page Header com uma zona de ações.
Larga os campos e outros widgets dentro das zonas certas (por exemplo os inputs dentro da Grid do Form).
Configura o widget na sidebar de edição.

Barra de ações do widget

Ao passar o rato sobre um widget no canvas aparece a sua barra de ações, com o nome do widget:

Mover
Arrasta o widget para outra posição
Duplicar
Duplica o widget
Configurações
Abre a sidebar de edição do widget
Eliminar
Remove o widget

Os widgets com filhos acrescentam ações próprias — Add Comp (Table, Modal Dialog…) e Binding Config (Form, Table).

Barra de ações do widget Input Text no canvas

A engrenagem de um widget abre a sidebar Configurações, com o nome técnico do widget (que podes mudar), Trocar componente (troca o widget por outro compatível, mantendo as props) e quatro separadores:

1Propriedades
Props do widget — texto, label, placeholder, obrigatório, comportamento. Uma prop pode ser ligada a um estado: passa o rato sobre ela e usa o ⋮.
2Estilo
Margens, tipografia, cores, espaçamentos e responsividade.
3Interações
Trigger Element — eventos (clique, On load, On open…) e a ação de cada um. Regras — visibilidade e permissões do nó.
4Copiar
Copia as propriedades para outras páginas, componentes ou passos de processo.
Sidebar de edição do Input Text com as propriedades Label e Placeholder

Usar Client

O Usar Client da página — definido no Page Manager ao criá-la — muda-se também aqui: abre as configurações da página (engrenagem no canto superior direito do canvas).

How is this guide?

Última atualização:

On this page

Barra lateralArrastar e largarBarra de ações do widgetSidebar de edição