Guia do usuário para navegar na interface do usuário do Jitterbit App Builder

Visão geral

Este guia apresenta como navegar pela interface do usuário do App Builder, abordando os seguintes tópicos:

• Serviço de layout de painéis: Os blocos de construção que o App Builder usa para organizar uma página: painéis, layouts, slides e tamanhos de tela.
• Navegando no App Builder: Como páginas e painéis são organizados, além de uma visão geral de cada tipo de painel.
• Navegando entre páginas: Como páginas se vinculam uma à outra, incluindo menus aninhados e páginas pop-up.
• Editando painéis: Adicionando, editando e excluindo dados de painéis, além de acompanhar alterações com Audit Lite e Full Audit.
• Resolução de problemas: Problemas comuns de navegação e como resolvê-los.

Para obter ajuda sobre como instalar e configurar o App Builder pela primeira vez, consulte o Guia de instalação. Para dúvidas adicionais, entre em contato com vinylinfo@jitterbit.com.

App Builder é uma plataforma de desenvolvimento baseada em navegador que permite que vários usuários criem aplicações web contra qualquer número de fontes de dados, para casos de uso que variam desde exibição de informações de clientes e listas de inventário até automatização de atualizações de folha de pagamento e construção de portais personalizados para clientes. App Builder é independente de plataforma: funciona em qualquer navegador moderno, conecta-se a fontes de dados de praticamente todos os principais provedores de banco de dados e seu design responsivo se adapta automaticamente a qualquer tamanho de tela, incluindo dispositivos móveis.

Serviço de layout de painéis

O Serviço de Layout de Painéis é o sistema de design responsivo proprietário do App Builder: permite que você projete uma página uma vez, e o App Builder a renderiza adequadamente independentemente do tamanho da tela. Uma aplicação App Builder é construída a partir dos seguintes componentes básicos, que o serviço de layout de painéis organiza (veja também Painel, Página, Layout e Controle no glossário):

• Painel: O bloco de construção básico de uma página. App Builder sempre exibe pelo menos um painel, mesmo na tela menor. Um painel apresenta informações ao usuário, seja uma coleção de linhas de dados ou um único registro, formatado de forma estruturada (tabular horizontal ou vertical) ou não estruturada, personalizada.

• Página: Uma coleção de painéis. Uma página pode ter apenas um painel ou vários.

• Layout: Define como os painéis são exibidos quando todos estão visíveis na tela ao mesmo tempo. Por exemplo, painéis podem estar empilhados verticalmente (painel A acima do painel B) ou horizontalmente (painel A à esquerda do painel B). App Builder também suporta agrupamento de painéis, de modo que o painel A e o painel B possam estar lado a lado enquanto ambos ficam acima do painel C, com A e B formando seu próprio grupo.

• Slide: Um subconjunto de painéis renderizado na tela de uma vez. Quando nem todos os painéis cabem na tela, App Builder renderiza o subconjunto apropriado como um slide, e permite que o usuário deslize entre slides para ver o resto.

• Tamanho de tela: Medido em altura e largura de pixel, e convertido pelo App Builder em um número de painéis disponíveis. Por exemplo, uma tela que cabe um painel é 1x1 (um painel de altura, um de largura); uma tela mais larga que cabe dois painéis lado a lado, mas ainda apenas um painel de altura, é 1x2. O tamanho da tela ajuda o App Builder a determinar o melhor layout para painéis e grupos.

• Controle: O que um painel exibe: uma grade completa de dados, uma única entrada, um botão ou várias outras opções. Os controles permitem que os usuários escolham quais informações a aplicação exibe e como são usadas.

App Builder usa o layout de uma página para determinar quais painéis renderizar e onde. Dependendo do tamanho da tela, o App Builder pode reduzir o número de painéis exibidos enquanto ainda honra o layout; o Serviço de Layout de Painéis decide quais painéis omitir e como organizar os que permanecem.

Quando o serviço de layout de painéis omite painéis, cria uma coleção de slides, cada um contendo um subconjunto de painéis organizados de acordo com o layout da página. O usuário vê o primeiro slide inicialmente e pode navegar para quaisquer slides adicionais para ver o resto.

Navegação no App Builder

O layout responsivo do App Builder usa grades flexíveis baseadas em proporções (percentuais relativos em vez de unidades de pixel fixas) para oferecer às aplicações uma experiência de visualização consistente entre dispositivos. Os painéis são agrupados e exibidos de acordo com sua ordem, um valor definido pelo designer da aplicação, com números mais baixos tendo prioridade. Em um dispositivo móvel, o App Builder exibe apenas os painéis com maior prioridade na tela; os demais podem ser acessados rolando com as setas no canto superior direito ou através do Gaveta de Ação. Em geral, em telas menores, pode ser necessário rolar mais para alcançar cada painel da aplicação.

Para começar a usar o App Builder, insira seu nome de usuário e senha na tela de login (entre em contato com um administrador se não tiver credenciais). A página Menu do Site exibe então todas as aplicações às quais você tem acesso, organizadas por prioridade de menu.

Páginas

Uma aplicação do App Builder é o conjunto geral de painéis e exibições que atendem a uma necessidade específica usando os dados disponíveis. Toda aplicação contém pelo menos uma página, onde os dados são exibidos. Cada página pode ser acessada pelo menu de navegação ou como um link em outra página, e as páginas podem fazer referência cruzada uma à outra usando links de texto e páginas pop-up.

Cada página é composta por um ou mais painéis, seja um único painel grande ou vários menores agrupados. Devido ao design responsivo do App Builder, o número de painéis exibidos de uma vez varia conforme o dispositivo, com base no tamanho e na resolução da tela; se uma tela for muito pequena para exibir todos os painéis de uma vez, o App Builder dimensiona e reposiciona automaticamente os painéis da página para a melhor experiência.

Páginas do Assistente

As páginas da aplicação App Builder suportam três opções de layout:

• Lado a Lado: O App Builder exibe os painéis da esquerda para a direita, com base na ordem.
• Empilhado: O App Builder exibe os painéis de cima para baixo, com base na ordem.
• Assistente: O App Builder exibe os painéis um de cada vez, com botões para navegar entre eles.

Lado a Lado e Empilhado são diretos: afetam como os painéis são dispostos na página. Os layouts de Assistente afetam como a página inteira é apresentada, mostrando os painéis um de cada vez com botões de Anterior, Próximo e/ou Concluir.

Na maioria das páginas da aplicação, clique em um botão Editar ou no ícone de edição Lápis para editar os campos de uma tabela de dados. Nas páginas de Assistente, clique em qualquer campo para tornar todos os campos daquele painel editáveis; avance até o último painel e clique em Concluir para salvar suas alterações, ou clique no X no canto superior direito para fechar a página sem salvar.

Painéis

Todo painel é composto por controles. Um controle é um conjunto definido de dados exibido dentro de um painel, desde um subconjunto das colunas de uma tabela de banco de dados até um botão ou os valores de um gráfico. O tipo de painel usado determina como um controle é exibido.

Quando um painel contém mais controles do que cabem na tela, clique no ícone de Seta para cima no canto superior direito do painel para maximizá-lo e acessar todos os controles. Clique novamente para retornar o painel ao seu tamanho padrão.

O App Builder agrupa seus tipos de painel em três categorias mostradas na caixa de diálogo Criar um Painel: Dinâmico, Relatório e Caso Extremo. Consulte Painéis para a referência completa; as seções abaixo cobrem os mesmos tipos de painel no contexto da navegação cotidiana.

Grade

Grade é o tipo de painel básico para exibir várias linhas de dados de uma vez. Este tipo de painel mostra colunas específicas da tabela ou objeto de fonte de dados selecionado. Clique no título de uma coluna para classificar suas linhas em ordem crescente ou decrescente.

O número total de linhas em um painel Grade aparece no canto superior direito, acima dos títulos das colunas. Dependendo da contagem total de registros, o App Builder pode exibir apenas um subconjunto de linhas por vez; clique em Carregar Mais Linhas, na parte inferior do painel, para carregar mais.

Os painéis Grade suportam salvamento, pesquisa e filtragem de suas tabelas de dados, facilitando o trabalho com linhas específicas. Clique no ícone Salvar, no canto superior direito do painel, para salvar a tabela de dados; uma caixa de diálogo de salvamento permite escolher onde salvar o arquivo. O App Builder salva tabelas de dados como arquivos CSV (Comma Separated Value), um formato estruturado em tabela baseado em texto que abre em praticamente qualquer programa de planilha ou gerenciamento de banco de dados.

Clique no ícone Pesquisar para abrir uma barra de pesquisa no topo do painel e digite uma palavra-chave e pressione Enter para pesquisar.

Clique no ícone Filtro, no canto superior direito do painel, para filtrar uma tabela de dados deixando apenas as linhas que correspondem a critérios específicos. Isto abre um pop-up listando os títulos das colunas:

Digite seus critérios de filtragem na caixa de texto e clique em Executar Filtro. É possível filtrar por vários valores ou critérios ao mesmo tempo.

O App Builder então exibe um cabeçalho com os critérios de filtro aplicados e apenas as linhas que correspondem a ele. Clique em X no canto direito do cabeçalho de critérios para remover o filtro.

Formulário

Os painéis Formulário exibem uma única linha de dados da fonte de dados selecionada. Este tipo de painel é especialmente útil como uma janela pop-up ou uma página de detalhes. Quando um painel Formulário tem vários controles, cada um é exibido individualmente.

Bloco

Os painéis Bloco combinam o comportamento dos painéis Grade e Formulário: como os painéis Grade, exibem vários conjuntos de informações ao mesmo tempo, mas organizam dados das tabelas ou objetos de origem em blocos da esquerda para a direita em vez de em colunas. Como nos painéis Formulário, os controles são agrupados com outros controles na mesma posição na tabela de dados.

Navegador de Arquivos

Os painéis Navegador de Arquivos conectam-se a um sistema de arquivos local ou de rede e se parecem com um diretório de arquivos. Este tipo de painel permite que os usuários façam upload de arquivos para um servidor e os baixem para um dispositivo, além de suportar navegação em subdiretórios, indicados por um ícone de pasta.

HTML Personalizado

Os painéis HTML Personalizado usam modelos HTML/CSS para exibir dados e imagens. Eles oferecem um alto grau de controle sobre a saída de exibição e se assemelham bastante a uma página da web padrão.

Gráficos

Os painéis 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 seus dados subjacentes, permitindo que um usuário clique para visualizar os registros 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 utilizado pelo gráfico.
• Ordenação: Permite aplicar ordenação ao valor selecionado.
• Sinalizador: Utilizado para marcar um evento ou ponto de interesse.
• Objeto de Opções JSON: Objeto JSON que substitui as opções do gráfico.

As opções do tipo Gráfico incluem Barra 3D, Coluna 3D, Rosca 3D, Pizza 3D, Área, Área Empilhada, Barra, Bolha, Coluna, Funil, Linha, Marimekko, Misto, Área de Percentual, Pizza, Pirâmide, Rosca Semicircular, Spline, Barra Empilhada e Coluna Empilhada.

Para imprimir um painel Gráfico, clique no menu Gaveta de Ações no canto superior direito do painel e selecione Imprimir Gráfico. Você pode baixar o gráfico como uma imagem vetorial .PNG, .JPEG, .PDF ou .SVG.

Gantt

Gantt é um tipo de painel que exibe um gráfico de Gantt, útil para planejamento e agendamento de projetos: ajuda a avaliar quanto tempo um projeto deve levar, determinar os recursos necessários e planejar a ordem em que você completará suas tarefas. Os gráficos de Gantt também são úteis para gerenciar dependências entre tarefas.

Para usar um gráfico de Gantt em um painel Gantt, você precisa de um objeto de negócios contendo informações para os controles que ele requer. Os 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 obrigatórios

• Tarefa: Representa uma tarefa individual do projeto sendo rastreada.
• Data de Início: Representa a data de início da tarefa.

Tipos de controle opcionais

• Data de Término: Representa a data de término da tarefa.
• Cor: Valor de cor para a tarefa no gráfico.
• Dependência: Determina a relação da tarefa com outras tarefas das quais ela depende.
• Tarefa Principal: Uma referência a outra tarefa do objeto de negócios, utilizada para organização hierárquica.
• Ordenação: Permite aplicar ordenação ao valor selecionado.
• Grupo de Tarefas: Utilizado para agrupar ou colocar várias tarefas na mesma linha.

Frame

Os painéis Frame reservam um espaço na tela no qual todos os links de página clicados são carregados. O tipo de painel Frame não tem conteúdo próprio — quando um painel Frame existe em uma tela, a navegação de página é direcionada para dentro dele em vez de substituir toda a tela. Este tipo de painel é mais frequentemente usado para manter um menu lateral persistente visível, com o contêiner do painel Frame renderizando a página dentro dele. Para mais detalhes, incluindo como vincular para fora de um painel Frame, consulte painel Frame.

Calendário

Os painéis Calendário preenchem um calendário com informações da fonte de dados selecionada. Como os painéis Gráfico, os painéis 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 aparece no calendário; geralmente 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.
• Término 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 utilizado pelo calendário para indicar eventos.
• Ordenação: Permite aplicar ordenação aos valores selecionados.

Para alterar a data e hora de um evento:

1. Selecione o evento.
2. No painel que exibe as informações do evento, clique no ícone de Lápis.
3. Ajuste a data e a hora conforme necessário e clique no ícone de Marca de Seleção para salvar.

Para adicionar um novo evento ao calendário:

1. Selecione qualquer evento pré-existente e clique no botão Adicionar.
2. Digite um título para o evento e selecione uma data no menu suspenso do calendário.
3. Para controles com hora e data habilitadas, clique no ícone Hora para abrir um relógio.
4. Clique no ícone Marca de seleção para salvar.
5. Atualize a página para ver suas alterações refletidas.

Dinâmica

Painéis de Dinâmica 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.

Gráfico de Rede

Painéis de Gráfico de Rede exibem interconexões entre um conjunto de entidades. Cada entidade é representada por um nó, e as conexões entre nós são representadas por links.

Tipos de controle obrigatórios

• De: O nó do qual este link se origina.
• Nó: O nó de Gráfico de Rede em si.
• Rótulo do Nó: O rótulo do nó de Gráfico de Rede.

Tipos de controle opcionais

• Objeto JSON de Opções: Objeto JSON que substitui as opções do gráfico.
• Cor do Link: A cor do link do Gráfico de Rede.
• Cor: Valor de cor para um evento ou tarefa.

Faixa

Painéis de Faixa exibem informações agrupadas. Eles são semelhantes aos painéis de Bloco na medida em que exibem dados agrupados no formato de painel de Formulário, mas podem ser configurados de forma vertical ou horizontal.

Mapa

Painéis de Mapa exibem um mapa no qual controles podem ser visualizados por localização geográfica. Diferentes mapas, fornecidos pela API Highmaps, podem ser escolhidos com base nos dados que deseja exibir.

Tipos de controle obrigatórios

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

Tipos de controle opcionais

• Objeto JSON de Opções: Objeto JSON que substitui as opções do gráfico.
• Cor: Valor de cor para um evento ou tarefa.

Para obter informações adicionais sobre painéis de Mapa, consulte o artigo Painel Mapa. Para documentação sobre os mapas de origem fornecidos no painel de Mapa, consulte Highcharts Maps.

Navegando entre páginas

Há duas formas principais de navegar entre páginas em aplicações. Em um dispositivo de tela grande, as páginas aparecem como links de texto no canto superior direito da tela, com o número exibido dependendo da largura de tela disponível. Embora esta seja a forma mais rápida e fácil de alternar entre páginas, não é viável em dispositivos menores, como smartphones ou tablets.

No entanto, todas as páginas podem ser acessadas a qualquer momento abrindo a Gaveta de Ação. Quando clicada, o ícone da Gaveta de Ação se transforma em um X, que pode ser clicado para fechá-la. Um cabeçalho com a aplicação aberta no momento é listado, assim como todas as páginas contidas na aplicação. Simplesmente clique na página desejada para ir até ela.

As páginas podem ser configuradas para se vincularem diretamente umas às outras. Esse link pode ser adicionado como um botão, uma imagem ou um link de texto, um ícone de chevron () no lado direito da página ou um painel. Quando um painel é usado para vincular a outra página, suas configurações de Link Target e Replace Page In History controlam como esse link se comporta; consulte Configurar como as páginas vinculadas são abertas abaixo.

Configurar como as páginas vinculadas são abertas

Um painel usado para vincular a outra página tem duas configurações relacionadas na seção Navigation da guia Edge Case:

• Link Target: Controla onde a página vinculada é aberta, como na janela atual ou em uma nova aba do navegador.
• Replace Page In History: Controla para onde o botão < Back retorna após a página vinculada carregar. Normalmente, navegar para uma nova página adiciona uma nova parada ao histórico de páginas, portanto clicar em < Back retorna para a página de onde o usuário acabou de sair. Habilitar Replace Page In History pula essa etapa: em vez de adicionar uma nova parada, a página vinculada reutiliza o destino de < Back da parada anterior, portanto clicar em < Back ignora a página que o usuário acabou de deixar e volta uma página a mais. Por exemplo, se uma página pop-up se vincular a outra página com essa configuração habilitada, < Back leva o usuário para a página de onde o pop-up foi aberto, em vez de voltar para o pop-up. Isso mantém < Back apontando para uma página consistente para a página vinculada, independentemente de qual página um usuário navegou para alcançá-la.

Nem todo tipo de painel suporta Link To Page e Link Target.

Se o destino de um link mudar para um que não suporte Replace Page In History (por exemplo, mudar Link Target para abrir em uma nova aba do navegador em vez da atual), o App Builder desativa automaticamente Replace Page In History em vez de deixá-lo habilitado sem efeito.

Link Target também aparece no nível de controle, nas configurações de External Link do controle em vez de ser próprio; consulte Configurar links externos em um controle. Para vincular o valor de um controle diretamente a uma página, consulte Configurar um controle como link de navegação. Para vincular de um painel de Frame especificamente, consulte Sair do painel Frame.

Nested menus

Links de texto de navegação no topo de uma página podem conter menus aninhados. Esses menus aninhados são uma lista expandida de links armazenados sob um cabeçalho e podem ser acessados clicando na seta suspensa próxima ao cabeçalho.

Popup pages

Às vezes, uma página não exigirá um redirecionamento completo (como a página de exibição de edição ou detalhes), mas pode ser exibida em um pop-up que aparece sobre uma página base. Essas páginas geralmente são acessadas clicando em um link ou clicando no ícone Popup. Elas podem ter várias páginas ou painéis em si, que podem ser percorridas de forma semelhante a uma página padrão. Para retornar à tela principal, clique no X no canto superior direito.

Editing panels

Adicionar, editar e excluir dados do painel

Os desenvolvedores do App Builder têm controle total sobre se as opções Insert, Edit e Delete estão disponíveis em um painel, dependendo do caso de uso comercial. Se uma mensagem de validação aparecer enquanto você está editando um painel, clique em Proceed para continuar ou Cancel para parar.

Para adicionar informações a um painel, clique no botão Create no canto superior esquerdo do painel. Uma caixa de texto aparece para cada coluna, na parte superior ou inferior do painel dependendo de como está configurado; preencha-as e clique no ícone Checkmark para salvar ou clique no X para cancelar.

Para excluir informações de um painel, clique no ícone Lata de Lixo ou no botão Excluir, depois clique em Prosseguir se uma mensagem de validação aparecer.

Para editar informações em um painel, clique no ícone Lápis ou no botão Editar; uma caixa de texto aparece em cada coluna editável. Preencha-as e clique no ícone Marca de Seleção para salvar ou clique no X para cancelar. Um painel também pode ser configurado para ser sempre editável, caso em que você pode clicar diretamente em um campo, fazer sua alteração e clicar fora do campo para salvá-la.

Audit Lite

O App Builder oferece duas maneiras de rastrear informações de auditoria dentro de um aplicativo: Audit Lite, descrito nesta seção, e Auditoria Completa, descrita em Auditoria completa abaixo, que requer configuração adicional para ser ativada.

Painéis que precisam de rastreamento de alterações, especialmente para um projeto ou atualização sensível ao tempo, podem incluir um botão Audit Lite, que rastreia as seguintes informações de uma tabela:

• AddedBy: O nome de usuário da pessoa que adicionou o registro.
• AddedOn: A data em que o registro foi adicionado.
• ChangedBy: O nome de usuário da pessoa que modificou o registro pela última vez.
• ChangedOn: A data em que o registro foi modificado.

Quando Audit Lite está ativado, os painéis Grade e Formulário em um aplicativo exibem esses dados de rastreamento. Usuários com permissão para ler as informações de auditoria de uma tabela podem visualizá-las clicando no botão Auditoria no aplicativo em execução.

Auditoria completa

A Auditoria Completa é ativada por padrão para fontes de dados e tabelas recém-criadas. Esse recurso de auditoria complementa o Audit Lite, registrando alterações no nível de negócios dos seus dados para que você possa revisá-las posteriormente. Quando você ativa a Auditoria Completa, o App Builder cria uma tabela de log de auditoria especial, denominada App BuilderAuditLog, na sua fonte de dados e captura as alterações nela para cada tabela com Auditoria Completa ativada.

Por padrão, o App Builder não limpa ou remove automaticamente os registros armazenados na tabela Auditoria Completa. Para alterar esse comportamento, consulte o recurso Audit Config, que permite a um administrador configurar um período de retenção após o qual o App Builder remove os registros de auditoria mais antigos. Para obter mais informações, consulte Auditoria completa.

Resolução de problemas

Uma seleção de menu, página do aplicativo ou painel não pode ser encontrado, mesmo tendo sido adicionado ao local correto

Ao navegar em um aplicativo, tenha em mente o tamanho da tela. Devido ao design responsivo do App Builder, o formato de uma página pode mudar ligeiramente em telas menores: painéis empilhados podem aparecer em um menu navegável, ou uma coluna pode ser ocultada para manter os dados mais importantes visíveis. A navegação da página também pode mudar da barra superior para a Gaveta de Ações.

Um novo aplicativo está faltando na lista de Aplicativos, ou as alterações em itens de menu, páginas, painéis ou controles não aparecem ao testar um aplicativo

Atualize o navegador (F5, na maioria dos navegadores) para ver as alterações feitas nas páginas, painéis ou controles de um aplicativo atualizado. Se a atualização não mostrar as alterações, faça a edição novamente e certifique-se de clicar em Salvar ou Prosseguir.

Um aplicativo está aberto e em execução, mas não há como editá-lo

A capacidade de editar os dados de um aplicativo varia por usuário, com base nas permissões que um administrador concedeu. Alguns usuários podem não ter permissão para editar páginas; entre em contato com um administrador para verificar se a permissão de edição foi concedida.