Adicionando Componentes de Anexo (Assinatura, PDF, Imagem, Anexo Genérico)

1. Objetivo

Esta funcionalidade descreve o processo de integração de múltiplos componentes de anexo (assinatura, visualizador de PDF, visualizador de imagem e anexo genérico) em um relatório SAP Fiori existente na plataforma Tachyonix.io. O objetivo é permitir a visualização e gestão de diferentes tipos de mídia associados a um objeto de negócio específico, enriquecendo a interface do usuário com capacidades robustas de manipulação de anexos.

2. Pré-requisitos

• Extensão da Aula 015: Esta funcionalidade é uma extensão do relatório criado na Aula 015, "Relatório Completo - Aula015". As configurações e o modelo de dados definidos anteriormente são a base para esta implementação.
• Acesso ao Tachyonix Builder: Credenciais de acesso e permissões para modificar aplicações existentes no Tachyonix Builder.
• Dados de Exemplo: Necessário ter registros de Pedidos de Compra (PO) com anexos variados (assinaturas, PDFs, imagens e outros documentos) associados para teste.

3. Passo a Passo Detalhado

3.1. Adição e Configuração dos Componentes de Anexo

Navegar para a Tela de Detalhe

• Abra o relatório "Relatório Completo - Aula015" no Tachyonix Builder.
• Navegue para a aba Output e selecione Screen (Main List).

Adicionar Componentes de Anexo

• Utilize o botão + Attachment para adicionar os seguintes componentes à tela de detalhe:
• Signature
• PDF Viewer
• Attachment
• Image Viewer

Configurar Componente Signature

Properties

• Defina o campo Name como SIGNATURE.
• Defina o campo Process como PO_SIGNATURE.
• Defina o campo Maximum limit como 3.

Layout

• Selecione Tab para o campo Layout.
• Marque Yes para o campo New Group.
• Marque Yes para o campo Show Counter.

Behaviors

• Desabilite a opção Add (defina como No).
• Desabilite a opção Delete (defina como No).

Configurar Componente PDF Viewer

Properties

• Defina o campo Process como PDF_PO.

Layout

• Selecione Tab para o campo Layout.
• Marque No para o campo New Group para agrupar este visualizador com o componente Signature na mesma aba.

Configurar Componente Attachment

Properties

• Defina o campo Process como ATTACHMENT_PO.
• Defina o campo Maximum limit como 3.

Layout

• Selecione Tab para o campo Layout.
• Marque No para o campo New Group.

Attachment Config

• Configure as extensões de arquivo permitidas, excluindo tipos como .pdf, .jpg, .png, .gif, etc., que serão tratados pelos visualizadores dedicados.

Configurar Componente Image Viewer

Properties

• Defina o campo Process como PHOTO_PO.

Layout

• Selecione Tab para o campo Layout.
• Marque No para o campo New Group.
• Marque Yes para o campo Show Counter.

3.2. Build e Verificação

Construir a Aplicação

• Clique no botão Build para compilar as alterações na aplicação.

Executar e Verificar

• Abra a aplicação construída no navegador.
• Selecione um registro de Pedido de Compra (ex: 4500003493) que possua anexos configurados no backend.
• Verifique a presença da nova aba de anexos (IconTabBar).
• Confirme que os componentes Signature, Attachment (com arquivos .docx), e Image Viewer (com carrossel de imagens) são exibidos corretamente nas suas respectivas abas.

4. Verificação e Teste

Para verificar a correta implementação, execute a aplicação Fiori gerada. Navegue para a tela de detalhe de um Pedido de Compra que contenha diferentes tipos de anexos configurados no backend. Uma nova aba de anexos deve estar visível. Verifique cada sub-aba (Signature, PDF Viewer, Attachment, Image Viewer) para confirmar que os anexos correspondentes são carregados e exibidos corretamente. Teste a funcionalidade de navegação entre os anexos no Image Viewer e a listagem de documentos no Attachment.

5. Considerações Técnicas Adicionais

5.1. Componentização de Anexos

A plataforma Tachyonix.io oferece componentes pré-construídos como Signature, PDF Viewer, Attachment e Image Viewer. Estes componentes encapsulam a lógica de front-end necessária para renderizar e interagir com diferentes tipos de mídia. Para um desenvolvedor ABAP, isso é análogo ao uso de controles ActiveX ou componentes de UI customizados em uma tela Dynpro. A principal vantagem é que estes componentes são controles SAP Fiori/UI5 nativos, garantindo responsividade, aderência ao Fiori Design Guidelines e manutenção contínua pela plataforma, abstraindo a complexidade do desenvolvimento de front-end. O desenvolvedor ABAP foca na integração de dados e lógica de negócio, enquanto a plataforma gerencia a apresentação.

5.2. O Campo "Processo" como Chave Semântica

O campo "Processo" em cada componente de anexo atua como uma chave semântica crucial para a identificação e recuperação de anexos pelo backend (ABAP). Combinado com a chave do objeto de negócio (neste caso, o número do Pedido de Compra), ele permite ao sistema ABAP distinguir e recuperar os anexos corretos para cada tipo de mídia.

Esta abordagem é diretamente análoga ao uso de OBJECT_ID no SAP Generic Object Services (GOS). No GOS, a chave para um anexo é composta por OBJTYPE (ex: BUS2012 para Pedido de Compra) e OBJKEY (o número do Pedido de Compra). O campo "Processo" na Tachyonix.io desempenha um papel similar ao OBJTYPE do GOS. Ele permite que diferentes categorias de anexos (assinaturas, fotos, documentos genéricos) sejam vinculadas ao mesmo objeto de negócio (o Pedido de Compra), mas com uma identificação semântica distinta para cada categoria. Isso facilita a organização e o acesso programático aos anexos no backend ABAP, permitindo que a lógica de negócio trate cada tipo de anexo de forma específica.

5.3. Layout em Abas com "New Group"

A propriedade "New Group" nos componentes de anexo controla a criação e o agrupamento de abas (IconTabBar) na interface do usuário.

Quando "New Group" é definido como Yes, um novo controle IconTabBar (um conjunto de abas) é criado na interface do usuário. O componente atual se torna a primeira aba desse novo IconTabBar.

Quando "New Group" é definido como No, o componente é adicionado como uma nova aba dentro do IconTabBar existente mais próximo.

Esta funcionalidade oferece ao desenvolvedor ABAP um controle granular sobre a organização visual dos componentes de anexo. É possível agrupar logicamente diferentes visualizadores de anexo sob uma única aba principal ou separá-los em grupos de abas distintos, tudo isso com um simples clique na propriedade, sem a necessidade de manipular diretamente a estrutura XML da View Fiori ou o código UI5, simplificando significativamente o design da interface.