Relatório Fiori com Microcharts e Object Header

1. Objetivo

Este documento descreve o processo de criação de um relatório SAP Fiori na plataforma Tachyonix.io que incorpora microcharts para visualização de indicadores visuais em listas e um Object Header para "Quick Insights", proporcionando uma experiência de usuário aprimorada e intuitiva para o monitoramento de dados.

2. Pré-requisitos

• Autorizações SAP: Acesso de leitura às tabelas ZCADASTRO, YEKKO e YEKPO no sistema SAP.
• Configuração na Tachyonix: Acesso à plataforma Tachyonix.io com permissão para criar e configurar componentes do tipo "Report".

Dados de Exemplo

• Necessário ter uma tabela de cadastro ZCADASTRO pré-existente no sistema SAP, contendo dados sumarizados que serão utilizados como fonte principal.
• Necessário ter dados nas tabelas YEKKO (cabeçalho de pedido de compra) e YEKPO (item de pedido de compra) para a realização dos INNER JOINs.

3. Passo a Passo Detalhado

3.1. Criação e Configuração do Relatório Principal

Criar Componente "Report"

• Na plataforma Tachyonix.io, inicie a criação de um novo componente.
• Selecione o tipo de componente "Report".
• Atribua o título "Aula 013 - MiniChart e Object Header" ao novo componente.

Definir Fontes de Dados

Navegue para a aba "Data" do componente recém-criado.

Configure a tabela ZCADASTRO como a fonte de dados principal.

Crie INNER JOINs para conectar ZCADASTRO com YEKKO e YEKPO. Utilize o campo EBELN como chave de junção para ambas as conexões.

Configurar Lista Principal (Main List)

Acesse a aba "Output".

Na seção "Main List", configure a exibição dos seguintes campos:

• CODIGO
• DESCRICAO
• VALOR_BULLET
• VALOR_RADIAL

Adicionar Microcharts na Lista

Na "Main List", adicione um novo campo calculado para o microchart Bullet.

• Defina o tipo como "Reference".
• Associe-o ao campo VALOR_BULLET.
• Selecione o tipo de microchart "Bullet".
• Defina o tamanho como "XS" (Extra Small).

Adicione um novo campo calculado para o microchart Radial.

• Defina o tipo como "Reference".
• Associe-o ao campo VALOR_RADIAL.
• Selecione o tipo de microchart "Radial".
• Defina o tamanho como "XS" (Extra Small).

3.2. Configuração da Tela de Detalhe (Object Header)

Adicionar Object Header

Na navegação para a tela de detalhe ("Screen List"), adicione um componente "Header".

Configurar "Quick Insights" no Header

Dentro do componente "Header", crie três colunas distintas.

Na primeira coluna, adicione um campo calculado para o microchart Bullet.

• Associe-o ao campo VALOR_BULLET.
• Selecione o tipo de microchart "Bullet".
• Defina o tamanho como "M" (Medium).

Na segunda coluna, adicione um campo calculado para o microchart Radial.

• Associe-o ao campo VALOR_RADIAL.
• Selecione o tipo de microchart "Radial".
• Defina o tamanho como "M" (Medium).

Na terceira coluna, adicione um campo calculado para o microchart Harvey.

• Associe-o ao campo VALOR_HARVEY.
• Selecione o tipo de microchart "Harvey".
• Defina o tamanho como "M" (Medium).

Configurar Painel de Detalhes

Abaixo do "Header", renomeie a seção padrão "Detail" para "Sumarizado".

Configure esta seção para exibir os seguintes campos:

• Código
• Descrição
• Valor Bullet
• Valor Radial
• Valor Harvey

Adicionar Tabela de Pedidos

• Adicione um novo componente "Table".
• Configure este componente como uma aba ("Tab") e atribua a descrição "Pedido Compra".
• Defina a fonte de dados para esta tabela como YEKKO.

Configure a exibição dos seguintes campos na tabela:

• EBELN (Purchasing Document Number)
• BUKRS (Company Code)
• BSTYP (Purchasing Document Category)
• LIFNR (Supplier's Account Number)

3.3. Build e Verificação

Construir e Executar

• Acione o processo de "Build" para compilar a aplicação.
• Após a conclusão do "Build", execute a aplicação no navegador web.

Verificar Resultado

• Verifique se a tela principal exibe a lista de itens com os microcharts "Bullet" e "Radial" em tamanho "XS" corretamente renderizados ao lado dos valores numéricos.
• Clique em um item da lista para navegar para a tela de detalhe.
• Na tela de detalhe, verifique se o "Object Header" exibe os microcharts "Bullet", "Radial" e "Harvey" em tamanho "M" na área de "Quick Insights".
• Confirme se a seção "Sumarizado" e a aba "Pedido Compra" com os dados da tabela YEKKO são exibidas conforme configurado.

4. Verificação e Teste

Para verificar a correta implementação da funcionalidade:

• Execute o aplicativo Fiori gerado pela plataforma Tachyonix.io.
• Na tela principal (Main List), observe a coluna correspondente aos microcharts Bullet e Radial. Confirme que os gráficos são exibidos visualmente, representando os valores dos campos VALOR_BULLET e VALOR_RADIAL.
• Selecione um registro na lista para navegar para a tela de detalhes.
• No topo da tela de detalhes, verifique a presença do Object Header. Confirme que os microcharts Bullet, Radial e Harvey são exibidos na área de "Quick Insights", fornecendo uma representação visual rápida dos KPIs associados ao registro.
• Abaixo do Object Header, verifique se a seção "Sumarizado" exibe os campos Código, Descrição, Valor Bullet, Valor Radial e Valor Harvey.
• Navegue para a aba "Pedido Compra" e confirme que os dados da tabela YEKKO (EBELN, BUKRS, BSTYP, LIFNR) são apresentados corretamente, filtrados pelo item selecionado.

5. Considerações Técnicas Adicionais

Microcharts como Indicadores Visuais

Para um desenvolvedor ABAP, que está acostumado a exibir dados em formato tabular (como em relatórios ALV), os microcharts (Bullet, Radial, Harvey) representam uma evolução significativa na apresentação de KPIs (Key Performance Indicators). Esses componentes, oriundos da biblioteca sap.suite.ui.microchart do SAP Fiori, permitem a exibição de informações de forma compacta e altamente intuitiva. Diferentemente de um valor numérico puro em um ALV, um microchart transmite rapidamente o status (ex: bom, ruim, neutro), a proporção de um valor em relação a uma meta, ou o progresso de uma tarefa. Isso melhora drasticamente a usabilidade e a capacidade do usuário de tomar decisões rápidas, pois a informação é consumida visualmente, sem a necessidade de interpretar números brutos.

Object Header para "Quick Insights"

O Object Header é um componente fundamental no design do SAP Fiori, projetado para apresentar as informações mais críticas de um objeto de negócio (ex: um pedido de compra, um cliente) na parte superior de uma tela de detalhe. A inclusão de microcharts dentro do Object Header potencializa sua função, criando uma área de "Quick Insights". Isso significa que o usuário pode, com um rápido olhar, compreender o estado geral do objeto antes de se aprofundar nos detalhes tabulares ou em outras seções da tela. Essa abordagem é análoga à prática comum em Dynpros de posicionar os campos mais importantes no topo da tela de detalhes, mas com o benefício adicional da visualização de dados, que é inerente ao paradigma Fiori.

Fonte de Dados com INNER JOIN

A configuração da fonte de dados na plataforma Tachyonix.io, que envolve a união de tabelas como ZCADASTRO, YEKKO e YEKPO utilizando INNER JOIN, é uma abstração poderosa. Para um desenvolvedor ABAP, este processo é equivalente à criação manual de uma View de Banco de Dados (SE11) ou de uma CDS View (DDL Source). A plataforma simplifica essa tarefa, permitindo que o desenvolvedor defina as relações de join visualmente. Internamente, durante o processo de build da aplicação, a plataforma gera automaticamente o código DDL (Data Definition Language) de uma CDS View no backend SAP, que é então utilizada para expor os dados combinados através de um serviço OData. Isso agiliza o desenvolvimento e garante a consistência da fonte de dados sem a necessidade de codificação ABAP explícita para a criação da view.