Ir para o conteúdo

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 nessa página.

Clicar no botão + Adicionar Painel abre o diálogo Criar um Painel:

criar um painel diálogo

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
      Uma única linha 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
      Exibir um mapa para visualizar relações geográficas.

    • Gráfico de Rede
      Mostrar visualmente relações entre itens conectados.

    • Pivot
      Exibe dados em formato de tabela dinâmica.

  • Caso de Uso Especial

    • HTML Personalizado
      Permite exibir HTML personalizado.

    • 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

Ícone do painel de 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

Ícone do painel de 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

Ícone do painel de 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

Ícone do painel de calendário

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 timestamps exibidos ao lado da descrição do evento.
  • Fim do Evento: Designa em qual dia o Evento termina; pode incluir timestamps 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

Ícone do painel de Gráfico

Painéis de Gráfico exibem dados em uma representação gráfica. O App Builder suporta muitos tipos de gráficos, incluindo Barra, Coluna, Linha e Área. Os gráficos podem ser vinculados aos dados subjacentes, permitindo que um usuário clique e visualize 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

Ícone do painel de Gantt

Painéis de Gantt exibem gráficos de Gantt, que são úteis para planejar e programar 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 controle requeridos

  • Tarefa: Representa uma tarefa individual do projeto que está sendo acompanhada.
  • 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 controle 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

Ícone do painel de mapa

Os painéis de Mapa exibem um mapa onde os controles podem ser visualizados por meio de 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. Mapas diferentes 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 controle requeridos

  • Categoria: País, Estado, etc.
  • Valor: Valor associado à categoria.

Tipos de controle 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.

Network Graph

Ícone do painel Network Graph

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.

Required control types

  • From: Nó de origem para este link.
  • Node: Nó do Network Graph.
  • Node Label: Rótulo do nó do Network Graph. Necessário ao usar UUIDs para relacionamentos.

Optional control types

  • JSON Options Object: Objeto JSON que substitui as opções do gráfico.
  • Link Color: Cor do link do Network Graph.
  • Color: Valor de cor para um evento ou tarefa.

Pivot

Ícone do painel Pivot

Os painéis de Pivot exibem uma tabela dinâmica com informações de uma fonte de dados.

Required control types

  • Column: Preenche os cabeçalhos das colunas.
  • Row: Preenche os cabeçalhos das linhas.
  • Value: Exibe os dados relevantes da fonte.

Edge Case

Custom HTML

Ícone do painel Custom HTML

Os painéis de Custom HTML 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.

File Browser

Ícone do painel File Browser

Os painéis de File Browser estão vinculados a um sistema de arquivos local ou de rede e se parecem com 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.

Frame

Ícone do painel Frame

Os painéis de Frame reservam um espaço na tela onde todos os links de página clicados serão carregados. O tipo de painel Frame não possui conteúdo próprio — quando um Frame existe em uma tela, qualquer navegação de página é direcionada para o Frame 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 Frame renderiza a página de destino dentro dele.

Lane

Ícone do painel Lane

Os painéis Lane exibem informações agrupadas. Eles são semelhantes aos painéis Tile, pois apresentam dados agrupados no formato de painel de Formulário, mas podem ser configurados vertical ou horizontalmente.