Page Builder
1. Geral
O Page Builder é a funcionalidade central para construção de telas, aplicável para interfaces desktop e mobile. Ele oferece uma experiência intuitiva de drag-and-drop, permitindo que usuários construam aplicações de maneira rápida e eficiente. O Page Builder está dividido nas seguintes seções principais:
Componentes: Área onde se encontram todos os elementos necessários para construir a interface, como botões, gráficos, labels, tabelas, entre outros.
Configuração: Seção para ajustes gerais que afetam toda a tela, incluindo filtros e outras configurações globais.
Database: Área para interação com dados, permitindo arrastar dados do banco de dados para a tela e configurar tabelas, gráficos, entre outros.
Tela: Área principal onde os componentes são posicionados e configurados, com visualização em tempo real das alterações feitas.
2. Componentes
A área de componentes é onde você encontra todos os elementos disponíveis para construir sua interface, como botões, gráficos, labels, tabelas, entre outros. Esses componentes são organizados em categorias como Análise de Dados, Design, Processos, Navegação, Funcionalidades, e Inputs.
Cada componente segue três passos principais:
VIEW: Defina os dados do componente, que podem vir das VIEWs do Mitra (uma maneira de fazer consultas através de no-code) ou diretamente de consultas SQL.
Personalização: Customize o layout, o design e as funcionalidades específicas de cada componente.
Interações: Configure as interações do componente, como formulários, ações de banco de dados, ações no-code, etc.
Esses três passos formam a base da construção no Mitra. Ao dominá-los, você será capaz de configurar qualquer componente disponível na plataforma.
3. Configuração
A seção "Configuração", localizada à direita da tela, permite ajustes aplicados a toda a interface. As opções incluem:
Filtros: Configura seleções que impactam toda a tela e não podem ser alteradas pelo usuário final.
Barra de Filtros: Adiciona uma barra para seleções temporárias, feitas após as seleções principais.
Configurações da Tela: Permite publicar ou despublicar uma tela, mudar o seu tipo (Web, Mobile, Dashboard), cor de fundo e altura da tela.
View da Tela: Uma view centralizada cujos valores podem ser acessados por outros componentes, como labels e botões.
4. Database
A seção de "Database", localizada à direita da tela, permite a interação com os dados. Você pode arrastar tabelas com chave simples para gerar automaticamente uma VIEW de cadastro no Mitra. Além disso, ao arrastar atributos numéricos, é possível criar gráficos personalizados utilizando a VIEW de Análise no-code do Mitra.
5. Tela
A Tela é a área principal onde os componentes são posicionados e configurados. Este é o espaço onde você monta a interface final e visualiza em tempo real as mudanças que está fazendo.
Após arrastar um componente para a tela, você pode ajustá-lo de duas maneiras: usando os três ícones (View, Personalizar e Interações) que aparecem ao passar o mouse sobre o componente (hover), ou através do menu de contexto, acessado ao clicar com o botão direito sobre o componente. As principais opções disponíveis incluem:
Configurações (VIEW, Personalizar, Interações): Gerencie a origem de dados, o layout e as interações.
Para Frente e Para Trás: Ajusta a camada de profundidade do componente.
Deletar, Duplicar e Copiar: Ferramentas para manipular componentes de acordo com suas necessidades. Para mais informações, acesse a documentação de layouts de componentes.
Agrupar, Desagrupar, Alinhar, Padronizar, Bloquear e Congelar: Ferramentas de layouts dos componentes.
Além disso, é possível redimensionar componentes arrastando os quadrados cinzas ao redor deles.