Passo a passo-Estendendo Campos no fiori ECC

Prévia do material em texto

Ao longo do guia, você irá
aprenda a baixar, alterar, recarregar e testar um aplicativo SAP Fiori.
O exemplo usado neste guia é o cenário de aprovação de compra. Ao longo deste guia, disse
cenário será estendido para que o usuário final também possa ver o "Grupo de compra" ao visualizar o
detalhes de um pedido de compra
Pre-requisitos:
· Você deve ter uma instalação do Eclipse que tem a versão mais recente do SAPUI5 Recurso de desenvolvimento de aplicativo instalado. Este pode ser o seu próprio Eclipse (personalizado) instalação ou SAPUI5 Eclipse prontamente disponível.
· Você deve estar ciente da arquitetura do sistema SAP Fiori atual. Isso inclui saber quais sistemas estão envolvidos, ou seja, o SAP ERP de destino e o componente NetWeaver Gateway.
· O guia prático adicionar campos personalizados a aplicativos SAP Fiori em 3 etapas / extensibilidade de campos oData foi concluído para o seu sistema SAP Fiori.
Baixando o código-fonte do aplicativo Fiori
A primeira etapa que você precisa realizar para modificar um SAP Fiori App é fazer o download do Web App original.
Para esta etapa, você precisará saber em qual sistema os SAP Fiori Web Apps estão hospedados. Nisso
presente guia, assumiremos que os aplicativos da Web em questão estão hospedados no sistema SAP que
também hospeda SAP NetWeaver Gateway.
Por conveniência, o NetWeaver UI Add-On (UI_INFRA) inclui o programa executável
UI5 / UI5_REPOSITORY_LOAD que pode ser usado para baixar, fazer upload e excluir SAPUI5
formulários.
Quando um aplicativo SAPUI5 é hospedado em um sistema SAP, normalmente é
carregado como uma página do servidor de negócios. Como consequência, você também pode acessar
os arquivos do aplicativo SAPUI5 usando WebDav. Além disso, você pode editar arquivos
diretamente no ABAP Workbench (transação SE80) ou qualquer ABAP habilitado
Instalação do Eclipse. No entanto, nenhuma dessas opções será coberta mais
neste guia prático.
1. Faça logon no sistema SAP apropriado e vá para a transação SE38.
2. Digite / UI5 / UI5_REPOSITORY_LOAD no campo Programa
e clique em Executar (F8) para executar o programa de sincronização do repositório SAPUI5.
3. Em seguida, especifique o aplicativo SAPUI5 que deseja baixar.
Para baixar o SAP Fiori Web App para aprovação do pedido de compra, use
ui5_mm_po_apv como Nome do aplicativo SAPUI5. Certifique-se de que o download
opção é selecionada. Clique em Executar (F8).
4. Você será solicitado a selecionar o diretório local no qual o Web App
os arquivos de origem devem ser salvos. Certifique-se de que o diretório que você escolheu é vazio. Todos os arquivos contidos na pasta podem ser excluídos antes do download o processo começa. Escolha e confirme um diretório de destino.
5. Dependendo da configuração do sistema, você pode ver um prompt de segurança. Conceder acesso permanente ao sistema de arquivos marcando lembrar minha decisão e clicando em Permitir.
6. A seguir, você verá um resumo das ações que estão prestes a ser tomadas. Rolar para baixo e clique
7. Você será solicitado a especificar uma página de código externa. Deixe o campo vazio e confirme clicando no botão da marca de seleção. O processo de download será iniciado. 
8. Dependendo da configuração do seu sistema, você pode ver outra segurança pronto. Conceda acesso permanente ao sistema de arquivos para o downloader verificando Lembre-se de minha decisão e clique em Permitir.
9. O processo de download pode demorar alguns minutos. Quando o processo tem concluído, a barra de status do SAP Frontend exibirá uma mensagem de sucesso.
Importando o código-fonte do aplicativo Fiori para o Eclipse
Para modificar um cenário SAP Fiori, é recomendado fazer isso com uma instalação do Eclipse
que possui o recurso SAPUI5 Application Development instalado. Isso simplifica o desenvolvimento
processo porque você pode contar com ferramentas úteis, como autocompletar código e visualização de aplicativos.
Agora, criaremos um novo projeto Eclipse contendo o código-fonte do cenário SAP Fiori.
10. Start Eclipse and select File → New → Project…
11. Choose SAPUI5 Application Development → Application Project and click Next
12. A seguir, configure o novo projeto como o seguinte:
13. Você deve ver o projeto recém-criado no Project Explorer. Eclipse criou a estrutura de pasta padrão SAPUI5 básica. Agora vamos importar o Código fonte do SAP Fiori. Expanda o projeto recém-criado, clique com o botão direito na pasta WebContent e clique em Importar….
14. escolha General → File System e click OK
15. Selecione o diretório de importação no qual você baixou o aplicativo SAP Fiori
código-fonte (consulte a Tarefa 4). Marque a caixa de seleção ao lado da pasta superior na tela de seleção para garantir que todos os arquivos e subpastas sejam importados. Clique Finish para iniciar o processo de importação.
16. A estrutura de pasta padrão SAPUI5 pode conter alguns arquivos que também podem existem no diretório de origem do aplicativo SAP Fiori, por exemplo, index.html. Por favor clique Yes to All quando perguntado se você gostaria de substituir esses arquivos.
Modificando o código-fonte de um aplicativo SAP Fiori
Tendo concluído as etapas anteriores, agora você pode navegar e editar o código-fonte do SAP
Fiori App que você baixou. Neste ponto, você precisa saber quais arquivos editar para alcançar a mudança antecipada
Dicas: 
Pode levar algum esforço para encontrar os arquivos apropriados para editar. Considere o Seguinte:
Consulte o Apêndice B, pois ilustra a estruturação interna do SAP Fiori
Apps adicionais.
· Você precisa mudar o comportamento do aplicativo? Se sim, você precisará fazer alterações em um controlador.
· Você precisa alterar a aparência do aplicativo? Se sim, você vai precisar para fazer alterações em uma vista.
· Em qual segmento da tela você está fazendo alterações? Isso pode te ajudar descobrir a visão / controlador correto.
· Você também pode usar o recurso de pesquisa de código do Eclipse para encontrar os arquivos apropriados para editar. Primeiro, considerando a área do usuário do aplicativo Interface na qual você gostaria de fazer alterações, encontre um trecho de texto que atenda aos seguintes requisitos:
* O snippet de texto parece ser estático, ou seja, não vem de um
fonte de dados. Os exemplos são textos de botões, textos explicativos, campos
rótulos.
* O snippet de texto é o mais único possível
* O trecho de texto está perto da área que você gostaria de fazer
as alterações possíveis.
Em seguida, certifique-se de que seu projeto seja selecionado no Eclipse Project Explorer e pressione Ctrl-H para abrir o Code Search. Mude para a guia Pesquisa de arquivo, digite sua string de pesquisa e inicie a pesquisa.
Caso o trecho de texto que você escolheu para pesquisar faça parte de um
string traduzível, você encontrará o nome técnico do traduzível
corda. Repita a pesquisa; desta vez usando o nome técnico do
string traduzível para ver onde ela é usada.
Neste guia prático, queremos adicionar outro campo à exibição de detalhes de um pedido de compra. Adicionando um campo requer apenas fazer alterações em uma visão, não em um controlador. A visão apropriada é chamada
sap.mm.purchaseorder.approve.uilib.component.poa.toggleArea.view.PurchaseOrderInformation
Portanto, a visualização em questão pode ser encontrada no seguinte local, em relação ao WebContent pasta do seu projeto Eclipse:
./resources/sap/mm/purchaseorder/approve/uilib/component/poa/toggleArea/view
Para adicionar um campo à UI, você deve fazer alterações para PurchaseOrderInformation.view.html.
17. Abra PurchaseOrderInformation.view.html no Eclipse. Marcado na Figura 1 está a profundidade da visualização PurchaseOrderInformation, ou seja, todos os campos mencionados na visualização. O campo “Purchasing Group” que gostaríamos de adicionar será colocado acima do "ID do pedido de compra" e é semelhante ao último. Na visualização PurchaseOrderInformation, copie o código-fonte que produz o campo “ID do pedido de compra” e insere o referido código para que produza outro campo. A partir de agora,você tem o campo “ID do pedido de compra” duas vezes.
18.