Introdução ao App Builder - Apêndice C: A camada de UI no App Builder (Avançado)

Este é o terceiro e último apêndice da série de tutoriais Introdução ao App Builder. Esses apêndices complementam as lições da série e fornecem informações mais detalhadas sobre os conceitos introduzidos.

Nesta lição, vamos nos aprofundar na camada de UI do App Builder, a área onde controlamos diretamente o que os usuários finais veem e com o que interagem.

Painéis de azulejos

Criar páginas com painéis de azulejos nos permite mostrar informações de uma determinada regra de negócios, assim como os painéis de grade que usamos nos tutoriais. A escolha entre um ou outro se resume à preferência estética. Com os painéis de azulejos, o acesso para criar, editar ou excluir ações é feito através de uma página vinculada.

Para demonstrar, vamos converter nossa página Funcionários existente de painéis de grade para painéis de azulejos.

1. Acesse a pré-visualização da página Funcionários.

2. Clique no ícone de hambúrguer para abrir o painel de ações, em seguida, selecione Designer Ao Vivo.

3. Clique no painel Funcionários para que o designer ao vivo mostre opções para ele.

4. Na aba Painel, mude a seleção de Grade para Azulejo.

5. Note o campo Largura do Azulejo que aparece. Essa configuração, exclusiva para painéis de azulejos, controla a largura de cada azulejo individual. A altura é determinada automaticamente pelo número de controles exibidos no azulejo. Deixe-o no valor padrão por enquanto.

6. Clique em Salvar.

Isso transforma a página Funcionários, pois agora as entradas individuais no objeto de negócios Funcionários são exibidas em azulejos em vez de em uma lista. No entanto, os azulejos agora têm muitos controles. Os azulejos ficam melhores quando têm entre três e cinco controles, então edite a lista de controles, seja a partir do designer ao vivo ou do banco de trabalho do aplicativo, selecionando os que você considera mais importantes. Quando terminar, sua página Funcionários ficará semelhante a esta:

Painéis de gráfico

O App Builder oferece vários tipos de painéis de gráfico. Mostrar gráficos em suas páginas pode ser uma ferramenta visual poderosa. Para usar painéis de gráfico em suas páginas, os objetos de negócios que alimentam as páginas precisam de valores agregados. Vamos demonstrar isso criando um objeto de negócios com o propósito de usá-lo para fazer uma página que mostra os funcionários em um gráfico organizado pelo total de pedidos de cada funcionário.

1. Vá para App Workbench > Regras e clique em + Regra.

2. Dê ao nova regra o nome OrderDetail (Total por Funcionário), em seguida, selecione Gráfico no campo Propósito e OrderDetail em Alvo. Clique em Criar.

3. Quando o App Builder criar a regra, adicione a tabela Order na aba Tabelas e selecione a coluna EmployeeID. Esta é a única coluna existente que precisaremos, então, se o App Builder tiver selecionado automaticamente outras, desmarque-as.

4. Na aba Joins, faça um inner join usando Order como a coluna Esquerda e Order Detail como a coluna Direita.

5. Ainda na aba Joins, certifique-se de que o painel Join Columns está unindo as colunas OrderID de ambas as tabelas.

6. Na aba Colunas, clique em + Coluna e, no campo Coluna ou Expressão, insira esta sintaxe:

   SUM(OD.Quantity*OD.UnitPrice*(1-OD.Discount))

   Em Alias, insira SumLineTotal.

7. Clique em Salvar.

8. Ainda na aba Colunas, atribua a cada uma das duas colunas um Tipo de Uso:

   • Para EmployeeID, escolha Categoria. Isso define como os dados são agrupados (por exemplo, os rótulos no eixo X de um gráfico de barras).

   • Para a coluna SumLineTotal que criamos, escolha Valor. Isso representa os dados numéricos a serem exibidos no gráfico (por exemplo, a altura das barras no eixo Y).

9. Clique em Resultados no painel Regra para garantir que a regra está calculando o total vendido por cada funcionário, assim:

   

Agora que o objeto de negócios que precisaremos está pronto, vamos fazer nossa página de painéis de gráfico.

1. Vá para App Workbench > Pages e clique em + Page.

2. Em Enter a Page Name, insira Order Total by Employee. Clique em Next.

3. Selecione Reports como o menu. Isso colocará a nova página sob um novo menu chamado Reports que aparecerá entre Home e Configuration. Clique em Next.

4. Selecione Full Page como o layout da página. Clique em Next e Finish.

5. Assim que o App Builder criar a página, clique em + Choose Panel Type.

6. Selecione Chart como o tipo de painel. Clique em Next.

7. Escolha OrderDetail (Total by Employee) como o painel de origem. Clique em Next e Finish.

O App Builder criará a página e você poderá visitar sua prévia:

Sort chart data

Você pode aplicar ordenação aos seus gráficos para torná-los mais fáceis de interpretar e analisar. É possível ordenar um gráfico pela coluna Valor ou por um critério completamente diferente que não esteja na tabela. Para demonstrar, vamos ordenar nosso gráfico pela data de contratação dos funcionários.

1. Vá para App Workbench > Rules e encontre a página OrderDetail (Total by Employee). Este é o objeto de negócios no qual o gráfico se baseia.

2. Na aba Tables, localize a tabela Employee e selecione a coluna HireDate.

3. Em seguida, em App Workbench > Pages, abra a página Order Total by Employee e vá para sua página de controles.

4. Clique em + Control para adicionar um novo controle. Na caixa de diálogo Add a Control, selecione a coluna Hire Date. Crucialmente, no campo Control Type, selecione Sort. Complete a adição do novo controle.

5. (Opcional) Assim que o novo controle for adicionado, clique no ícone no final da linha e visite a aba Position & Width. No campo Sort Direction, você pode alternar entre ASC (crescente) e DESC (decrescente).

Se você visitar a prévia da página agora, verá que as barras estão organizadas pela data de contratação dos funcionários.

Adicionar detalhamento de gráfico

Os painéis de gráfico podem ser tornados interativos ao adicionar navegação, permitindo que os usuários "aprofundem" nos dados. No exemplo que estamos usando, podemos configurar o gráfico para que, ao clicar na barra de um funcionário específico, o usuário seja direcionado para a página de Pedidos, filtrada para mostrar apenas os pedidos daquele funcionário.

1. Retorne à lista de Controles da página Total de Pedidos por Funcionário.

2. Clique no ícone no final da linha para editar o controle Total da Linha de Soma (o controle de Valor).

3. Abra a aba Caso Limite.

4. Abra a seção Configurações de Navegação Rara.

5. No campo Link Para Página, selecione a página Pedidos.

6. Clique no ícone de vinculação para garantir que o App Builder vinculou as duas páginas corretamente. A Coluna Fonte deve ser EmployeeID (PK).

Agora, ao visualizar o gráfico, você pode clicar em qualquer barra para ser levado à página de Pedidos, que filtrará automaticamente seus dados para mostrar apenas os pedidos feitos pelos clientes do funcionário que você clicou.

Outras formas de gráficos

Os gráficos podem ser configurados com múltiplas categorias ou valores para exibir relacionamentos de dados mais complexos.

• Múltiplas categorias: Você pode agrupar dados por mais de uma categoria. Por exemplo, adicionar Região como uma categoria primária e Funcionário como uma categoria secundária agruparia primeiro as vendas por região e, em seguida, por funcionário dentro de cada região. Isso é frequentemente visualizado usando um gráfico de barras empilhadas ou agrupadas.

• Múltiplos valores: Você pode exibir múltiplos valores numéricos para cada categoria. Isso é comum em tipos de gráficos mistos, onde você pode mostrar os totais de vendas como barras (em um eixo Y) e o desconto médio como uma linha (em um segundo eixo Y) para o mesmo funcionário.

Hora da prática: Adicione uma segunda categoria

Modifique o OrderDetail (Total por Funcionário) objeto de negócios para incluir uma segunda categoria. Junte-se à tabela Employee, adicione a coluna RegionID e defina seu Tipo de Uso como Categoria. Em seguida, visualize o gráfico novamente para ver como ele muda. Pode ser necessário ajustar o tipo de gráfico (por exemplo, para um gráfico de colunas empilhadas) nas configurações do painel para visualizar melhor a nova estrutura de dados.

Visualização de dados avançada

Além dos gráficos padrão, o App Builder fornece painéis especializados para visualizar dados geograficamente, cronologicamente ou linearmente. Nesta seção, demonstraremos os outros tipos de painel que o App Builder suporta.

Painéis de calendário

Os painéis de calendário são excelentes para visualizar eventos ao longo do tempo. Vamos adicionar um calendário à página Customers que mostra quando os pedidos de um cliente específico foram enviados.

1. Crie o objeto de negócios:

   1. Vá para App Workbench > Rules e clique em + Rule.

   2. Nomeie-o como Order (Calendar).

   3. Defina o Propósito como Calendar e o Alvo como Order.

   4. Clique em Create.

   5. Na aba Tables, selecione OrderNumber, ShippedDate e CustomerID.

   6. Na aba Columns, defina o Tipo de Uso para OrderNumber como Description e ShippedDate como Start.

2. Adicione o painel:

   1. Vá para a página Customers.

   2. Adicione um novo painel do tipo Calendar e selecione Order (Calendar) como a fonte.

   3. O App Builder deve vincular automaticamente este painel ao painel principal Customers usando CustomerID.

   4. Nomeie o painel como Order Calendar.

Agora, quando você selecionar um cliente, este calendário exibirá seus envios.

Além disso, você também pode vincular o calendário à página Orders. Assim, quando um usuário selecionar um cliente e seus pedidos aparecerem no calendário, cada um deles pode ser clicado, levando o usuário aos detalhes daquele pedido. Siga estas etapas:

1. Navegue até a prévia da página Clientes.

2. Abra o Designer Ao Vivo e selecione o painel de calendário.

3. Na aba Métodos de Atualização, selecione Pedidos em Vincular à Página. O App Builder deve vincular as duas páginas automaticamente, mas você pode verificar para garantir que o critério de vinculação seja o campo OrderID.

4. Clique em Salvar.

Agora, quando você selecionar um cliente na página Clientes e seus pedidos aparecerem no calendário, você pode clicar em cada um individualmente para ser levado à página Pedidos para ver os detalhes.

Painéis de Mapa

Os painéis de mapa permitem visualizar dados em um mapa geográfico. Vamos criar um mapa que exibe o número de clientes por país.

1. Crie o objeto de negócios:

   1. Crie uma nova regra chamada Cliente (Mapa).

   2. Defina o Propósito como Mapa e o Alvo como Cliente.

   3. Na aba Colunas, adicione uma expressão de contagem: Count(1) e aponte como ContagemCliente. Defina seu Tipo de Uso como Valor.

   4. Adicione uma coluna para o país. Para corrigir a discrepância de nomenclatura, use esta expressão: REPLACE(REPLACE(Country, 'USA', 'Estados Unidos da América'), 'UK', 'Reino Unido').

   5. Aponte esta coluna como PaisNormalizado e defina seu Tipo de Uso como Categoria.

2. Adicione o painel:

   1. Adicione um novo painel à página Clientes do tipo Mapa.

   2. Selecione Cliente (Mapa) como a fonte.

   3. No campo Fonte do Mapa (encontrado nas configurações do painel), selecione custom/world.

A página Clientes agora mostra um mapa de calor de onde seus clientes estão localizados globalmente.

Painéis de Gantt

Os gráficos de Gantt são usados para agendamentos e cronogramas. Vamos usar um para visualizar a duração dos pedidos (da Data do Pedido até a Data de Envio).

1. Crie o objeto de negócios:

   1. Crie uma nova regra chamada Pedido (Gantt).

   2. Defina o Propósito como Gantt e o Alvo como Pedido.

   3. Clique em Criar.

   4. Na aba Tabelas, selecione NúmeroDoPedido, DataDoPedido, DataDeEnvio e IDDoCliente.

   5. Na aba Colunas, defina os seguintes Tipos de Uso:

      • NúmeroDoPedido: Tarefa

      • DataDoPedido: Início

      • DataDeEnvio: Fim

2. Adicione o painel:

   1. Adicione um novo painel à página Clientes do tipo Gantt.

   2. Selecione Pedido (Gantt) como a fonte.

   3. Certifique-se de que está vinculado por IDDoCliente.

Organizar com abas

Agora você tem três novos painéis na sua página Clientes, o que pode deixá-la lotada. Para manter a página organizada, vamos colocar todos esses novos painéis dentro de um grupo de painel de abas (um conceito introduzido na Aula 6). Siga estes passos:

1. Na tela de edição da página Clientes, crie um novo Grupo de Painéis.

2. Defina o Layout como Abas.

3. Adicione seus painéis Calendário de Pedidos, Mapa de Clientes e Gantt de Pedidos a este grupo.

Agora você tem um painel sofisticado que permite alternar entre uma linha do tempo, um mapa e um cronograma da atividade de seus clientes. Veja como a página Clientes se parece agora com o gráfico do calendário destacado (mas note as abas que permitem ver os outros gráficos também):

Gráficos de rede

Gráficos de rede são usados para visualizar relacionamentos entre entidades. Podemos usar isso para visualizar a estrutura de relatórios de nossos funcionários.

1. Crie o objeto de negócios:

   1. Crie uma nova regra chamada Funcionário (Rede).

   2. Defina o Propósito como Gráfico de Rede e o Alvo como Funcionário.

   3. Clique em Criar.

   4. Selecione IDDoFuncionário, IDDoFuncionárioQueReporta e Sobrenome.

   5. Defina o Tipo de Uso para EmployeeID como Node e ReportsToEmployeeID como From.

   6. Opcionalmente, defina LastName como o Rótulo do Nó para que os nomes apareçam no gráfico em vez de IDs.

2. Adicione o painel:

   1. Adicione um novo painel à página Employees do tipo Network Graph.

   2. Selecione Employee (Network) como a fonte.

   3. Adicione-o ao grupo de painéis que contém os outros três painéis para manter a página organizada.

Inicialmente, este é o aspecto do painel na página. Nas configurações do painel, você pode ajustar o layout e as cores para visualizar melhor a hierarquia.:

Painéis de Pivot

Os painéis de pivot permitem resumir grandes conjuntos de dados por meio da referência cruzada de duas categorias diferentes. Vamos criar uma tabela dinâmica que exibe o total de vendas por cliente (linha) dividido por categoria de produto (coluna).

1. Crie o objeto de negócios:

   1. Crie uma nova regra chamada Order (Pivot).

   2. Defina o Propósito como Pivot e o Alvo como Order.

   3. Na aba Tables, adicione as tabelas OrderDetail, Product, Category e Customer.

   4. Na aba Columns, adicione Customer e Category de suas respectivas tabelas, e a seguinte expressão para o preço total (lembre-se de dar um alias descritivo): Sum(OD.Quantity * OD.UnitPrice).

2. Crie uma página para adicionar o novo painel:

   1. Crie uma nova página chamada Sales Pivot. Coloque-a no menu Reports e use um layout de página inteira.

   2. Adicione um painel do tipo Pivot e selecione Order (Pivot) como a fonte.

   3. Nas configurações de Controls:

      1. Defina Customer como a Linha.

      2. Defina Category como a Coluna.

      3. Defina a expressão que você criou (usando o alias que você deu) como o Valor.

Quando você visitar a pré-visualização da página, deverá ver uma tabela dinâmica mostrando os pedidos totais por cliente, organizados por categoria.

Layouts de painel avançados

Além de grades e formulários padrão, o App Builder oferece layouts projetados para necessidades específicas de navegação e exibição.

Painéis de faixa

Os painéis de faixa permitem agrupar registros em faixas verticais ou horizontais, semelhante a um quadro Kanban. Vamos converter nossa página de Produtos para usar esse layout.

1. Converta o painel:

   1. Navegue até a página de Produtos.

   2. Abra o Designer Ao Vivo e selecione o painel de Produtos.

   3. Altere o Tipo de Painel de Grade para Faixa.

   4. Clique em Salvar.

2. Configure o agrupamento:

   1. Vá para as configurações de Controles na tela de edição da página.

   2. Clique em + Controle e adicione CategoryID como um controle, com o nome Categoria.

   3. Uma vez que o controle Categoria é adicionado, clique para editá-lo. Na aba Posição e Largura, marque a caixa de seleção Agrupar Por. Isso informa ao App Builder para criar uma faixa separada para cada categoria de produto.

3. Ajuste as configurações do painel:

   1. Retorne à tela de edição da página.

   2. Na aba Caso de Borda, abra a seção Geral e insira 100 no campo Linhas Por Solicitação. Como os painéis de faixa exibem mais dados visualmente do que as grades, aumentar esse limite garante que as categorias não pareçam vazias.

A página de Produtos agora se parece com isto:

Painéis de quadro

Os painéis de quadro atuam como contêineres que carregam outras páginas dentro deles. Este é o mecanismo por trás da barra lateral padrão do aplicativo.

• Como funciona: Sua página de Início normalmente contém um painel de Menu (a barra lateral) e um painel de Quadro (a área de conteúdo principal). Quando você clica em um link na barra lateral, a página de destino é carregada dentro do painel de Quadro, em vez de navegar por toda a janela.

• Saindo do Quadro: Às vezes, você quer que um link saia do quadro (por exemplo, um botão "Sair" ou um grande relatório). Para fazer isso, configure o comportamento de Destino do link para Popup ou use uma ação de Redirecionamento, que força a navegação a ocorrer no nível da janela principal.

Lógica avançada de formulários: Regras de visibilidade

No Lesson 4, aprendemos sobre painéis de Formulário. Podemos controlar quais campos aparecem em um formulário usando regras de visibilidade.

Visibilidade estática

Uma visualização de visibilidade estática define uma regra que é sempre verdadeira. Por exemplo, vamos garantir que o campo País seja sempre obrigatório no formulário de Funcionário.

1. Vá para a tela de edição da página Funcionários.

2. Selecione o painel Funcionários para ver suas opções de edição.

3. Clique em Mais > Visibilidades.

4. Clique em Registrar para criar uma nova regra de visibilidade.

   1. Defina o Tipo como Estático.

   2. Defina a Coluna como País.

   3. Defina o Valor como Exigir.

   4. Clique em Salvar.

Regras de visibilidade dinâmica

A visibilidade também pode mudar com base em dados. Por exemplo, o campo Estado é relevante para endereços dos EUA, mas não para endereços do Reino Unido (em nosso conjunto de dados). Vamos ocultar o campo Estado a menos que o País seja "EUA".

1. Crie a regra de lógica:

   1. Vá para App Workbench > Regras e clique em + Regra.

   2. Nomeie como Funcionário (Visibilidade).

   3. Defina Finalidade como Visibilidade e Alvo como Funcionário.

   4. Na aba Colunas, adicione uma nova expressão de coluna para definir a lógica: IIF(Country = 'USA', 'Require', 'Hide').

   5. Direcione essa expressão para a coluna Estado.

2. Aplique a regra:

   1. Retorne às configurações de Visibilidades do painel Funcionário.

   2. Clique em Registrar e defina o Tipo como Regra.

   3. Selecione Funcionário (Visibilidade) como a regra.

Agora, ao editar um funcionário, o campo Estado desaparecerá se o País não for "EUA" e se tornará obrigatório se for.

Distintivos

Um distintivo é um pequeno indicador colocado em um botão que exibe uma contagem atualizada dinamicamente. Os distintivos são úteis para mostrar informações de forma rápida aos usuários, como o número de pedidos de um cliente ou tarefas em uma fila.

Para demonstrar, adicionaremos um botão à página Clientes que navega para uma lista de pedidos desse cliente. O botão terá um distintivo mostrando o número total de pedidos feitos por esse cliente.

Primeiro, precisamos de um objeto de negócios que possa contar os pedidos para cada cliente. Uma subconsulta é perfeita para isso.

1. Em App Workbench > Regras, clique em + Regra.

2. Configure a regra com as seguintes configurações:

   • No campo Nome, insira Pedido (Contagem por Cliente).

   • No campo Finalidade, selecione Subconsulta.

   • No campo Alvo, selecione Cliente.

3. Clique em Criar.

4. Na aba Tabelas, adicione a tabela Pedido.

5. Na aba Junções, crie uma junção Esquerda Externa de Cliente (Esquerda) para Pedido (Direita) em CustomerID. Usar uma junção esquerda externa garante que clientes com zero pedidos ainda sejam incluídos em nossos resultados.

6. Na aba Colunas, adicione duas colunas:

   1. Selecione a coluna CustomerID da tabela Cliente.

   2. Clique em + Coluna para criar uma expressão:

      • Coluna ou Expressão: IsNull(Count(O.OrderID), 0)

      • Alias: ContagemPedido

      Esta expressão utiliza a função IsNull() para contar os pedidos de cada cliente. Usar essa função garante que, se um cliente não tiver pedidos, o distintivo exibirá 0.

7. Clique em Salvar.

Em seguida, devemos adicionar essa contagem ao nosso objeto de negócios principal Cliente (Fonte).

1. Em App Workbench > Regras, abra o objeto de negócios Cliente (Fonte).

2. Na aba Tabelas, clique em + Tabelas e adicione a subconsulta que acabamos de criar, Pedido (Contagem por Cliente).

3. Na aba Junções, crie uma junção Interna entre Cliente (Esquerda) e nossa subconsulta (Direita) em CustomerID.

4. Na aba Colunas, clique em + Coluna. Selecione a coluna ContagemPedido da regra da subconsulta para torná-la disponível para páginas que utilizam este objeto de negócios.

Finalmente, vamos configurar o botão e seu distintivo na página Clientes.

1. Navegue até a página Clientes e abra o designer ao vivo.

2. Clique no painel Clientes e, em seguida, clique em + Controle.

3. Configure o botão:

   • No dropdown Tipo de Controle, selecione Botão.

   • No campo Nome, insira Pedidos.

   Nota

   Deixe o campo Coluna vazio, pois atribuir uma coluna aqui faria com que o valor dessa coluna fosse usado como o texto do rótulo do botão. No nosso caso, queremos usar o texto estático "Pedidos".

4. Clique em Próximo para ir para as configurações de Navegação. No dropdown Link para Página, selecione Pedidos. O App Builder criará automaticamente a vinculação em CustomerID.

5. Clique em Próximo e Concluir.

6. Selecione o botão Pedidos recém-criado para que o designer ao vivo mostre opções para ele.

7. Na aba Botão, abra a seção Diversos (Botão).

8. No dropdown Fonte do Distintivo (Coluna), selecione ContagemDePedidos.

9. Clique em Salvar e saia do designer ao vivo.

Agora você deve ver um botão Pedidos para cada cliente, com um distintivo exibindo a contagem total de pedidos deles. Clicar no botão leva você à página Pedidos com os pedidos feitos por esse cliente já selecionados.

Aprendizado adicional

Isso conclui esta imersão nos detalhes da camada de UI do App Builder. Se você ainda não viu, consulte o Apêndice A para uma visão mais detalhada da camada de dados, ou o Apêndice B para a camada de negócios.

Para continuar aprendendo sobre o App Builder, visite a Universidade Jitterbit.