Painéis no Jitterbit App Builder
Introdução
Painéis no App Builder são os contêineres nas páginas de suas aplicações que abrigam as informações exibidas na interface do usuário, como dados, imagens e todo tipo de controles.
Todas as páginas nas aplicações do App Builder são organizadas com o uso de painéis. Existem vários tipos de painéis, descritos nesta página.
Tipos de Painéis
Na aba Páginas do App Workbench, você pode selecionar qualquer uma das páginas da sua aplicação ou clicar para criar uma nova. Quando você faz isso, é levado à tela de edição daquela página, onde o painel Layout do Painel da Página permite configurar todos os painéis naquela página.
Clicar no botão + Adicionar Painel abre o diálogo Criar um Painel:

O diálogo lista todos os tipos de painel disponíveis, também descritos nas seções abaixo:
-
Dinâmico
-
Grade
Múltiplas linhas de dados com campos aparecendo horizontalmente. -
Tile
Dados exibidos como blocos, descendo pela página. -
Formulário
Linha única de dados com controles aparecendo verticalmente.
-
-
Relatório
-
Calendário
Dados exibidos como um calendário, por diferentes visualizações. -
Gráfico
Exibir visualmente dados em uma variedade de tipos de gráficos. -
Gantt
Exibe dados como um gráfico de Gantt, para planejamento e agendamento. -
Mapa
Exibe um mapa para visualizar relações geográficas. -
Gráfico de Rede
Mostra visualmente as relações entre itens conectados. -
Pivot
Exibe dados em um formato de tabela dinâmica.
-
-
Caso de Bordo
-
Chat do Agente
Uma interface de chat para interagir com seus Agentes configurados. -
HTML Personalizado
Permite exibir HTML personalizado. -
Painel de Diagrama de Evento
Exibe um fluxo de trabalho visual em um painel na sua página. -
Navegador de Arquivos
Adiciona um controle de navegador de arquivos ao seu painel. -
Quadro
Reserva espaço na página para carregar outros conteúdos. -
Faixa
Dados exibidos como blocos em uma série de faixas.
-
Dinâmico
Grade
![]()
Grade é o tipo básico de painel para exibir várias linhas de dados ao mesmo tempo. Este tipo de painel exibe colunas específicas da tabela ou objeto da fonte de dados selecionada. Clicar no título de uma coluna permite que as linhas sejam ordenadas em ordem crescente ou decrescente. O número total de linhas em um painel de Grade é exibido no canto superior direito, acima dos títulos das colunas. O número de linhas carregadas de cada vez (dependendo do total de registros) para fins de exibição pode ser menor que o total ou pode ser um subconjunto de todos os registros. Para visualizar mais linhas, clique no botão Carregar Mais Linhas na parte inferior do painel.
Bloco
![]()
Bloco combina o comportamento dos painéis de Grade e dos painéis de Formulário. Assim como os painéis de Grade, os painéis de Bloco exibem múltiplos conjuntos de informações ao mesmo tempo. No entanto, as informações das tabelas ou objetos da fonte de dados são apresentadas em blocos dispostos da esquerda para a direita, em vez de em colunas. Assim como nos painéis de Formulário, os controles são agrupados com outros controles na mesma posição na tabela de dados.
Formulário
![]()
Formulário é projetado para exibir uma única linha de dados da fonte de dados selecionada. Este tipo de painel é especialmente útil como uma janela pop-up ou página de detalhes em um aplicativo. Quando os painéis de Formulário são atribuídos a múltiplos controles, cada controle é exibido individualmente.
Relatório
Calendário
![]()
Os painéis de Calendário preenchem um calendário com informações da fonte de dados selecionada. Assim como os painéis de Gráfico, os painéis de Calendário podem ser vinculados a outro painel para exibir mais detalhes sobre um Evento no calendário.
Tipos de controle obrigatórios
- Descrição: Designa o que aparecerá no calendário; tipicamente o Nome de um Evento.
- Início do Evento: Designa em qual dia o Evento começa; pode incluir carimbos de data e hora exibidos ao lado da descrição do evento.
- Fim do Evento: Designa em qual dia o Evento termina; pode incluir carimbos de data e hora exibidos ao lado da descrição do evento.
Tipos de controle opcionais
- Cor: Valor de cor usado pelo calendário para indicar Eventos.
- Ordenar: Permite aplicar ordenação ao valor selecionado.
Gráfico
![]()
Os painéis de Gráfico exibem dados em uma representação gráfica. O App Builder suporta muitos tipos de gráfico, incluindo Barras, Colunas, Linhas e Área. Os gráficos podem ser vinculados aos dados subjacentes para que um usuário possa clicar e visualizar os dados de suporte.
Tipos de controle obrigatórios
- Categoria: Representa o eixo X (horizontal) no gráfico.
- Valor: Representa o eixo Y (vertical) no gráfico.
Tipos de controle opcionais
- Cor: Valor de cor usado pelo gráfico.
- Ordenar: Permite aplicar ordenação ao valor selecionado.
- Sinalizador: Usado para marcar um evento ou ponto de interesse.
- Objeto de Opções JSON: Objeto JSON que substitui as opções do gráfico.
Gantt
![]()
Os painéis de Gantt exibem gráficos de Gantt, que são úteis para planejar e agendar projetos. Eles ajudam a avaliar quanto tempo um projeto deve levar, determinar os recursos necessários e planejar a ordem em que as tarefas serão concluídas. Os gráficos de Gantt também são uma ferramenta útil para gerenciar dependências entre tarefas.
Para usar um gráfico de Gantt em um painel de Gantt, é necessário um objeto de negócios que contenha informações para os controles requeridos. Gráficos de Gantt também podem representar Dependências de Tarefas e Grupos de Tarefas, desde que essas informações estejam configuradas no objeto de negócios.
Tipos de controles obrigatórios
- Tarefa: Representa uma tarefa individual do projeto que está sendo monitorada.
- Data de Início: Representa a data de início da tarefa.
- Data de Término: Representa a data de término da tarefa.
Tipos de controles opcionais
- Cor: Valor da cor para a tarefa no gráfico.
- Dependência: Determina a relação da tarefa com outras tarefas das quais depende.
- Tarefa Pai: Referência a outra tarefa do objeto de negócios, usada para arranjo hierárquico.
- Ordenar: Permite aplicar ordenação ao valor selecionado.
- Grupo de Tarefas: Usado para agrupar ou colocar várias tarefas na mesma linha.
Mapa
![]()
Os painéis de Mapa exibem um mapa onde os controles podem ser visualizados por meio da localização geográfica. Os nomes das regiões do mapa no seu objeto de negócios subjacente devem corresponder aos identificadores dos mapas de origem do Highmaps; isso pode exigir atenção extra para garantir que a chave do seu objeto de negócios possa ser reconhecida pelo mapa de origem. Por exemplo, se você tiver um objeto de negócios com nomes de condados dos EUA, os nomes dos condados podem não ser únicos — nesse caso, você deve ter uma coluna que corresponda à chave do Highmaps. Diferentes mapas fornecidos através da API do Highmaps podem ser escolhidos com base nos dados que você deseja exibir.
Para informações adicionais sobre painéis de Mapa, consulte Painel de Mapa. Para informações sobre mapas de origem fornecidos no painel de Mapa, consulte a documentação do Highmaps.
Tipos de controles obrigatórios
- Categoria: País, Estado, etc.
- Valor: Valor associado à categoria.
Tipos de controles opcionais
- Objeto de Opções JSON: Objeto JSON que substitui as opções do gráfico.
- Cor: Valor da cor para um evento ou tarefa.
Gráfico de Rede
![]()
Os painéis de Network Graph exibem interconexões entre um conjunto de entidades. Cada entidade é representada por um nó, e as conexões entre os nós são representadas por meio de links.
Tipos de controle obrigatórios
- De: Nó de origem para este link.
- Nó: Nó do Gráfico de Rede.
- Rótulo do Nó: Rótulo do nó do Gráfico de Rede. Necessário ao usar UUIDs para relacionamentos.
Tipos de controle opcionais
- Objeto de Opções JSON: Objeto JSON que substitui as opções do gráfico.
- Cor do Link: Cor do link do Gráfico de Rede.
- Cor: Valor da cor para um evento ou tarefa.
Tabela Dinâmica
![]()
Os painéis de Pivot exibem uma tabela dinâmica com informações de uma fonte de dados.
Tipos de controle obrigatórios
- Coluna: Preenche os cabeçalhos das colunas.
- Linha: Preenche os cabeçalhos das linhas.
- Valor: Exibe os dados relevantes da fonte.
Caso Limite
Chat do Agente
![]()
Os painéis de Chat do Agente fornecem a interface pela qual você conversa com seus agentes de IA configurados. Nesses painéis, os usuários podem digitar mensagens e receber respostas do agente sem sair da aplicação.
HTML Personalizado
![]()
Os painéis de HTML Personalizado utilizam templates HTML/CSS para exibir dados e imagens. Eles oferecem um alto grau de controle sobre a saída de exibição e se assemelham a uma página da web padrão.
Painel de Diagrama de Evento
![]()
Painel de Diagrama de Evento os painéis incorporam um fluxo de trabalho visual interativo em uma página, exibindo os eventos configurados em uma tabela ou objeto de negócios como um diagrama de fluxo de processo BPMN.
Navegador de Arquivos
![]()
Painéis de Navegador de Arquivos estão vinculados a um sistema de arquivos local ou de rede e se assemelham a um diretório de arquivos. Eles permitem que os usuários façam upload de arquivos para um servidor e os baixem para um dispositivo. A navegação dentro de subdiretórios também é possível, com subdiretórios indicados por um ícone de pasta.
Quadro
![]()
Frame reservam um espaço na tela onde todos os links de página clicados serão carregados. O tipo de painel Quadro não possui conteúdo próprio — quando um Quadro existe em uma tela, qualquer navegação de página é direcionada para o Quadro em vez de substituir toda a tela. Este tipo de painel é mais frequentemente usado para manter um menu lateral persistente visível enquanto o contêiner Quadro renderiza a página de destino dentro dele.
Faixa
![]()
Lane exibem informações agrupadas. Eles são semelhantes aos painéis de Tile na medida em que exibem dados agrupados no formato de painel de Formulário, mas podem ser configurados vertical ou horizontalmente.