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

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

Nesta lição, vamos 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 tiles

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

Para demonstrar, vamos converter nossa página Employees existente de painéis de grade para painéis de tiles.

1. Acesse a visualização da página Employees.

2. Clique no ícone de hambúrguer para abrir a gaveta de ações e selecione Live Designer.

3. Clique no painel Employees para que o live designer mostre as opções para ele.

4. Na aba Panel, altere a seleção de Grid para Tile.

5. Observe o campo Tile Width que aparece. Esta configuração, exclusiva dos painéis de tiles, controla a largura de cada tile individual. A altura é determinada automaticamente pelo número de controles exibidos no tile. Deixe no valor padrão por enquanto.

6. Clique em Save.

Isso transforma a página Employees, pois as entradas individuais no objeto de negócio Employees agora são mostradas em tiles em vez de em uma lista. No entanto, os tiles agora têm muitos controles. Tiles ficam melhores quando têm entre três e cinco controles, então edite a lista de controles, seja do live designer ou do workbench do app, selecionando os que você considera mais importantes. Quando terminar, sua página Employees será semelhante a esta:

Painéis de gráficos

O App Builder oferece vários tipos de painéis de gráficos. Mostrar gráficos em suas páginas pode ser uma ferramenta visual poderosa. Para usar painéis de gráficos em suas páginas, os objetos de negócio que alimentam as páginas precisam de valores agregados. Vamos demonstrar isso criando um objeto de negócio 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 > Rules e clique em + Rule.

2. Dê à nova regra o nome OrderDetail (Total by Employee), selecione Chart no campo Purpose e OrderDetail em Target. Clique em Create.

3. Quando o App Builder cria a regra, adicione a tabela Order na aba Tables e selecione a coluna EmployeeID. Esta é a única coluna existente que precisaremos, então se o App Builder selecionou automaticamente outras, desselecione-as.

4. Na aba Joins, faça uma junção interna usando Order como a coluna Left e Order Detail como a Right.

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 Columns, clique em + Column e, no campo Column or Expression, digite esta sintaxe:

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

   Em Alias, digite SumLineTotal.

7. Clique em Save.

8. Ainda na aba Columns, atribua a cada uma das duas colunas um Usage Type:

   • Para EmployeeID, escolha Category. 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 Value. Isso representa os dados numéricos a serem exibidos no gráfico (por exemplo, a altura das barras no eixo Y).

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

   

Agora que o objeto de negócio que precisaremos está pronto, vamos criar nossa página de painéis de gráficos.

1. Acesse App Workbench > Páginas e clique em + Página.

2. Em Insira um Nome de Página, digite Order Total by Employee. Clique em Próximo.

3. Selecione Relatórios como o menu. Isso colocará a nova página em um novo menu chamado Relatórios que aparecerá entre Início e Configuração. Clique em Próximo.

4. Selecione Página Completa como o layout da página. Clique em Próximo e Concluir.

5. Depois que o App Builder criar a página, clique em + Escolher Tipo de Painel.

6. Selecione Gráfico como o tipo de painel. Clique em Próximo.

7. Escolha OrderDetail (Total by Employee) como o painel de origem. Clique em Próximo e Concluir.

O App Builder criará a página e você pode visitar sua visualização:

Classificar dados do gráfico

É possível aplicar classificação aos gráficos para facilitar sua interpretação e análise. Você pode classificar um gráfico pela coluna Valor ou por um critério completamente diferente que não está na tabela. Para demonstrar, vamos classificar nosso gráfico pela data de contratação dos funcionários.

1. Acesse App Workbench > Regras e localize a página OrderDetail (Total by Employee). Este é o objeto de negócio no qual o gráfico se baseia.

2. Na guia Tabelas, localize a tabela Employee e selecione a coluna HireDate.

3. Em seguida, em App Workbench > Páginas, abra a página Order Total by Employee e acesse sua página de controles.

4. Clique em + Controle para adicionar um novo controle. Na caixa de diálogo Adicionar um Controle, selecione a coluna Hire Date. Crucialmente, no campo Tipo de Controle, selecione Classificar. Conclua a adição do novo controle.

5. (Opcional) Depois que o novo controle for adicionado, clique no ícone ao final da linha e visite a guia Posição e Largura. No campo Direção de Classificação, você pode alternar entre a ordem ASC (crescente) e DESC (decrescente).

Se você revisitar a visualização da página agora, verá que as barras estão organizadas pela data de contratação do funcionário.

Adicionar drill-down do gráfico

Painéis de gráfico podem se tornar interativos ao adicionar navegação, permitindo que os usuários "façam drill-down" nos dados. No exemplo que estamos usando, é possível configurar o gráfico para que clicar na barra de um funcionário específico navegue o usuário até a página Pedidos, filtrada para mostrar apenas os pedidos desse funcionário.

1. Retorne à lista de Controles da página Order Total by Employee.

2. Clique no ícone ao final da linha para editar o controle Sum Line Total (o controle Valor).

3. Abra a guia Caso Extremo.

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 de Origem deve ser EmployeeID (PK).

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

Outros formulários de gráfico

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

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

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

Hora de praticar: Adicione uma segunda categoria

Modifique o objeto de negócio OrderDetail (Total by Employee) para incluir uma segunda categoria. Faça uma junção com a 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. Você pode precisar 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 oferece 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. Adicionaremos um calendário à página Customers que mostra quando os pedidos de um cliente específico foram enviados.

1. Crie o objeto de negócio:

   1. Acesse App Workbench > Rules e clique em + Rule.

   2. Nomeie-o como Order (Calendar).

   3. Defina o Purpose como Calendar e o Target 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. Acesse 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. Dessa forma, quando um usuário seleciona um cliente e seus pedidos aparecem no calendário, cada um deles pode ser clicado, levando o usuário aos detalhes desse pedido. Siga estas etapas:

1. Navegue até a visualização da página Customers.

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

3. Na aba Update Methods, selecione Orders em Link To Page. 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 Save.

Agora, quando você selecionar um cliente na página Customers e seus pedidos aparecerem no calendário, você pode clicar em cada um para ir até a página Orders e ver os detalhes.

Painéis de mapa

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

1. Crie o objeto de negócio:

   1. Crie uma nova regra chamada Customer (Map).

   2. Defina o Purpose como Map e Target como Customer.

   3. Na aba Columns, adicione uma expressão de contagem: Count(1) e crie um alias como CustomerCount. Defina seu Tipo de Uso como Value.

   4. Adicione uma coluna para o país. Para corrigir a incompatibilidade de nomenclatura, use esta expressão: REPLACE(REPLACE(Country, 'USA', 'United States of America'), 'UK', 'United Kingdom').

   5. Crie um alias para esta coluna como NormalizedCountry e defina seu Tipo de Uso como Category.

2. Adicione o painel:

   1. Adicione um novo painel à página Customers do tipo Map.

   2. Selecione Customer (Map) como a fonte.

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

A página Customers agora exibe 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 agendamento e cronogramas. Usaremos um para visualizar a duração dos pedidos (da Data do Pedido até a Data de Envio).

1. Criar o objeto de negócio:

   1. Criar uma nova regra chamada Order (Gantt).

   2. Definir o Purpose como Gantt e Target como Order.

   3. Clicar em Create.

   4. Na aba Tables, selecionar OrderNumber, OrderDate, ShippedDate e CustomerID.

   5. Na aba Columns, definir os seguintes Usage Types:

      • OrderNumber: Task

      • OrderDate: Start

      • ShippedDate: End

2. Adicionar o painel:

   1. Adicionar um novo painel à página Customers do tipo Gantt.

   2. Selecionar Order (Gantt) como a fonte.

   3. Garantir que esteja vinculado por CustomerID.

Organizar com abas

Agora você tem três novos painéis na página Customers, o que pode deixá-la congestionada. Para manter a página organizada, colocaremos todos esses novos painéis dentro de um grupo de painel com abas (um conceito introduzido na Lição 6). Siga estas etapas:

1. Na tela de edição da página Customers, criar um novo Panel Group.

2. Definir o Layout como Tabbed.

3. Adicionar os painéis Order Calendar, Customer Map e Order Gantt a este grupo.

Agora você tem um painel sofisticado que permite alternar entre uma linha do tempo, um mapa e um cronograma da atividade do cliente. Veja como a página Customers fica agora com o gráfico de calendário destacado (mas observe 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 hierárquica de nossos funcionários.

1. Criar o objeto de negócio:

   1. Criar uma nova regra chamada Employee (Network).

   2. Definir o Purpose como Network Graph e Target como Employee.

   3. Clicar em Create.

   4. Selecionar EmployeeID, ReportsToEmployeeID e LastName.

   5. Definir o Usage Type para EmployeeID como Node e ReportsToEmployeeID como From.

   6. Opcionalmente, definir LastName como o Node Label para que os nomes apareçam no gráfico em vez de IDs.

2. Adicionar o painel:

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

   2. Selecionar Employee (Network) como a fonte.

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

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

Painéis dinâmicos

Painéis dinâmicos permitem resumir grandes conjuntos de dados fazendo referência cruzada entre duas categorias diferentes. Criaremos uma tabela dinâmica que exibe o valor total de vendas por cliente (linha) dividido por categoria de produto (coluna).

1. Criar o objeto de negócio:

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

   2. Definir o Purpose como Pivot e Target como Order.

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

   4. Na aba Columns, adicionar 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. Criar uma página para adicionar o novo painel:

   1. Criar uma nova página chamada Sales Pivot. Colocá-la no menu Reports e usar um layout de página inteira.

   2. Adicionar um painel do tipo Pivot e selecionar Order (Pivot) como a fonte.

   3. Nas configurações de Controls:

      1. Definir Customer como a Row.

      2. Definir Category como a Column.

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

Quando você visitar a visualização da página, deverá ver uma tabela dinâmica mostrando o total de pedidos por cliente, organizado por categoria.

Layouts avançados de painel

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 raias

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

1. Converter o painel:

   1. Navegue até a página Produtos.

   2. Abra o Live Designer e selecione o painel Produtos.

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

   4. Clique em Salvar.

2. Configurar agrupamento:

   1. Acesse 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. Após adicionar o controle Categoria, clique para editá-lo. Na guia Posição e Largura, marque a caixa de seleção Agrupar Por. Isso informa ao App Builder para criar uma raia separada para cada categoria de produto.

3. Ajustar configurações do painel:

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

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

A página Produtos agora se parece com isto:

Painéis de quadro

Os painéis de quadro funcionam como contêineres que carregam outras páginas dentro deles. Esse é o mecanismo por trás da barra lateral da aplicação padrão.

• Como funciona: Sua página Inicial normalmente contém um painel Menu (a barra lateral) e um painel Quadro (a área de conteúdo principal). Ao clicar em um link na barra lateral, a página de destino carrega dentro do painel Quadro, em vez de navegar pela janela inteira.

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

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

Em Lição 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 Funcionário.

1. Acesse 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 Obrigatório.

   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 nos EUA, mas não para endereços no Reino Unido (em nosso conjunto de dados). Vamos ocultar o campo Estado a menos que o País seja "EUA".

1. Criar a regra de lógica:

   1. Acesse Bancada do App > Regras e clique em + Regra.

   2. Nomeie como Funcionário (Visibilidade).

   3. Defina Propósito como Visibilidade e Destino como Funcionário.

   4. Na guia 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. Aplicar a regra:

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

   2. Clique em Registrar e defina 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.

Badges

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

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

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

1. Em App Workbench > Rules, clique em + Rule.

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

   • No campo Name, digite Order (Count by Customer).

   • No campo Purpose, selecione Subquery.

   • No campo Target, selecione Customer.

3. Clique em Create.

4. Na aba Tables, adicione a tabela Order.

5. Na aba Joins, crie uma junção Left Outer de Customer (Left) para Order (Right) em CustomerID. Usar uma junção left outer garante que clientes com zero pedidos ainda sejam incluídos nos resultados.

6. Na aba Columns, adicione duas colunas:

   1. Selecione a coluna CustomerID da tabela Customer.

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

      • Column or Expression: IsNull(Count(O.OrderID), 0)

      • Alias: OrderCount

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

7. Clique em Save.

Em seguida, devemos adicionar essa contagem ao nosso objeto de negócio principal Customer (Source).

1. Em App Workbench > Rules, abra o objeto de negócio Customer (Source).

2. Na aba Tables, clique em + Tables e adicione a subconsulta que acabamos de criar, Order (Count by Customer).

3. Na aba Joins, crie uma junção Inner entre Customer (Left) e nossa subconsulta (Right) em CustomerID.

4. Na aba Columns, clique em + Column. Selecione a coluna OrderCount da regra de subconsulta para disponibilizá-la às páginas que usam este objeto de negócio.

Por fim, vamos configurar o botão e seu badge na página Customers.

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

2. Clique no painel Customers e depois clique em + Control.

3. Configure o botão:

   • No dropdown Control Type, selecione Button.

   • No campo Name, digite Orders.

   Nota

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

4. Clique em Next para ir às configurações de Navigation. No dropdown Link to Page, selecione Orders. O App Builder criará automaticamente a vinculação em CustomerID.

5. Clique em Next e Finish.

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

7. Na aba Button, abra a seção Miscellaneous (Button).

8. No dropdown Badge Source (Column), selecione OrderCount.

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

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

Further learning

Isto conclui este aprofundamento nos detalhes da camada de interface do App Builder. Se ainda não o fez, consulte o Appendix A para uma análise mais detalhada da camada de dados, Appendix B para a camada de negócio ou Appendix D para a camada de segurança.

Para continuar aprendendo sobre o App Builder, visite Jitterbit University.