Estendendo Relatório com Microcharts e Process Flow

1. Objetivo

Esta funcionalidade estende um relatório existente na plataforma Tachyonix.io, incorporando Microcharts para visualização rápida de indicadores-chave de desempenho (KPIs) diretamente na lista principal e implementando um Process Flow na tela de detalhe para exibir a sequência de documentos relacionados, aprimorando a contextualização e a navegabilidade.

2. Pré-requisitos

• Autorizações SAP: Acesso à transação SE38 (para o relatório original, se aplicável), objeto de autorização S_DEVELOP (para desenvolvimento ABAP).
• Configuração na Tachyonix: O relatório base criado na Aula 015 deve estar configurado e funcional.
• Dados de Exemplo: Dados consistentes para os campos Valor Bullet, Valor Radial, Valor Harvey e os documentos relacionados (EBELN_PO, EBELN_EKBE, EBELN_EKES, EBELN_EKET) devem estar disponíveis no sistema de origem para a correta exibição dos Microcharts e do Process Flow.

Esta funcionalidade é uma extensão do relatório criado na Aula 015.

3. Passo a Passo Detalhado

3.1. Adição de Microcharts na Lista Principal

Adicionar Campos de Referência

• Navegue até a aba "Output" e selecione a sub-aba "Main List".
• Adicione os campos numéricos Valor Bullet, Valor Radial e Valor Harvey da tabela de cadastro à lista.

Ocultar Campos de Referência

• Para cada um dos três campos numéricos adicionados (Valor Bullet, Valor Radial, Valor Harvey), configure a propriedade de visibilidade para "Não Visível" (utilize o ícone de olho).
• Estes campos atuarão como fontes de dados ocultas para os Microcharts.

Criar Campos Calculados para Microcharts

• Crie três novos campos do tipo "Calculated".
• Para cada campo calculado, configure as seguintes propriedades:

• Field Type: Selecione Reference.
• Structure: Selecione Main List.
• Field: Vincule o campo de referência numérico correspondente (ex: para o Microchart Bullet, vincule a VALOR_BULLET_1).
• Return (Type): Selecione o tipo de Microchart desejado (Bullet, Radial ou Harvey).
• Size: Defina como XS (extra small) para otimizar o espaço na lista.

3.2. Adição do Process Flow na Tela de Detalhe

Criar Painel Oculto para Referências

• Na tela de detalhe, adicione um novo Panel.
• Nomeie o painel como "RELAC_DOC".
• Configure o painel como "Não Visível".
• Adicione os campos de documentos relacionados (EBELN_PO, EBELN_EKBE, EBELN_EKES, EBELN_EKET) a este painel, configurando-os também como "Não Visíveis".
• Estes campos servirão como fontes de dados para os passos do Process Flow.

Adicionar Componente Process Flow

• Crie uma nova Tab na tela de detalhe.
• Adicione o componente Process Flow a esta nova Tab.
• Defina o Zoom Level como "Two".
• Defina o ícone da Tab como "process".

Configurar os Passos (Steps) do Process Flow

1º Passo (Pedido Compra)

• Nomeie o passo como "Pedido Compra".
• Defina o ícone como "order-status".
• Defina o estado como "Positive".
• Vincule a descrição ao campo EBELN_PO do painel oculto "RELAC_DOC".
• Configure a navegação para o aplicativo "Documento Compra", passando o valor de EBELN_PO como parâmetro.

2º Passo (History)

• Nomeie o passo como "History".
• Defina o ícone como "history".
• Defina o estado como "Planned".
• Defina "Pedido Compra" como o passo pai.
• Vincule a descrição ao campo EBELN_EKBE do painel oculto "RELAC_DOC".
• Configure a navegação para o aplicativo "History per Purchasing Document", passando o valor de EBELN_EKBE como parâmetro.

3º Passo (Supplier)

• Nomeie o passo como "Supplier".
• Defina o ícone como "customer-and-supplier".
• Defina o estado como "Planned Negative".
• Defina "History" como o passo pai.
• Vincule a descrição ao campo EBELN_EKES do painel oculto "RELAC_DOC".
• Configure a navegação para o aplicativo "Supplier Confirmations", passando o valor de EBELN_EKES como parâmetro.

3.3. Build e Verificação

Construir e Executar

• Execute o processo de Build para a aplicação.
• Abra a aplicação resultante no navegador web.

Verificar Resultado

• Na lista principal, observe a exibição dos Microcharts (Bullet, Radial, Harvey) em linha para cada item, fornecendo uma representação visual compacta dos KPIs.
• Na tela de detalhe, selecione a nova Tab "Process Flow".
• Verifique a correta exibição da sequência de documentos e teste a funcionalidade de navegação para os aplicativos relacionados, confirmando que os parâmetros são passados corretamente.

4. Verificação e Teste

• Execute o aplicativo Fiori gerado.
• Na lista principal, observe se os Microcharts (Bullet, Radial, Harvey) são exibidos em cada linha, refletindo os valores dos campos numéricos ocultos.
• Selecione um item da lista para navegar para a tela de detalhe.
• Na tela de detalhe, selecione a aba "Process Flow".
• Verifique se os passos "Pedido Compra", "History" e "Supplier" são exibidos corretamente, com seus respectivos ícones, estados e descrições vinculadas aos campos de documentos.
• Clique em cada passo do Process Flow para confirmar que a navegação contextual para os aplicativos externos ("Documento Compra", "History per Purchasing Document", "Supplier Confirmations") ocorre conforme o esperado, com os parâmetros de documento sendo transmitidos.

5. Considerações Técnicas Adicionais

Microcharts em Linha (In-line Microcharts)

A adição de Microcharts diretamente em uma lista ou tabela proporciona contexto visual imediato para cada item de linha. Para um desenvolvedor ABAP, esta funcionalidade é análoga a utilizar codificação de cores ou ícones em uma grade ALV (REUSE_ALV_GRID_DISPLAY) para destacar linhas específicas com base em um valor. Contudo, os Microcharts oferecem uma representação gráfica significativamente mais rica e detalhada. A plataforma Tachyonix.io abstrai a complexidade da renderização dos controles sap.suite.ui.microchart dentro das células da tabela, gerenciando automaticamente a integração e a vinculação de dados.

Campos Calculados como Ponte (Calculated Fields as a Bridge)

A técnica de empregar "Campos Calculados" com Field Type: Reference estabelece uma ponte entre os dados de um campo numérico oculto e um componente visual, como um Microchart. Esta abordagem representa uma forma low-code de vincular um controle de UI a uma fonte de dados específica. Para um desenvolvedor ABAP, este conceito é comparável a ter um campo oculto em uma tela Dynpro que armazena um valor, e, subsequentemente, no PBO (Process Before Output), ler esse valor para definir programaticamente uma propriedade de um controle personalizado. O "Campo Calculado" na plataforma Tachyonix.io abstrai essa lógica de vinculação, permitindo uma configuração declarativa da conexão entre dados e UI.

Reutilização do Padrão Process Flow

A implementação do Process Flow nesta funcionalidade demonstra a aplicação do mesmo padrão introduzido na Aula 014, reforçando o conceito de reutilização de componentes e padrões de design. Os passos fundamentais (criação de um painel oculto para campos de referência, adição do componente Process Flow, configuração das etapas com hierarquia de pais e definição da navegação contextual) são idênticos. Esta consistência exemplifica a capacidade de construir aplicações complexas através da composição de blocos pré-definidos e reutilizáveis, um princípio central do desenvolvimento de baixo código. Esta abordagem contrasta com a prática tradicional de desenvolver programas ABAP isolados para cada requisito, promovendo uma arquitetura mais modular e eficiente.