Você está na página 1de 141

SAP Fiori

Objetivos

✓ Explicar a estratégia experiência de usuário e tecnologia SAP

✓ Descrever o SAP Fiori e a funcionalidade central que fornece

✓ Descrever a Arquitetura do SAP Fiori

✓ Descrever a arquitetura dos Apps

✓ Explicar os tipos de Apps

✓ Descrever as opções de implantação SAP Gateway

✓ Descrever o papel do SAP SAPUI5

✓ Explicar a criação das Roles


O Mundo está Mudando

Experiência de usuário do consumidor é o novo padrão para


aplicações empresariais ...
Experiência do usuário
7 Princípios para Interfaces Digitais

Utilizar conceitos e elementos já habitual


para os usuários

Fornecer ao usuário todas as Mantenha a padronização de


funcionalidades e apoio interface e navegação para reduzir
necessários para alcançar seus Limpo a carga cognitivos do usuário e
objetivos. aumentar a intuição na aplicação

Utilidade Intuitivo

O usuário deve concluir as Simplicidade


tarefas com o número mínimo
de ações
Atratividade Concisão

Fornecer menos
Procure por satisfação Acessibilidade informações para obter mais
subjetiva aplicado no uso produtividade e foco na
do aplicativo execução

A interface deve ser acessível aos


utilizadores com quaisquer limitações
Design Thinking

http://www.sebrae.com.br/sites/PortalSebrae/artigos/entenda-o-design-thinking,369d9cb730905410VgnVCM1000003b74010aRCRD
Interface
O que é SAP Fiori?

✓ Mais do que apenas uma coleção de aplicativos que representa uma parte do novo
paradigma Experience SAP User.

✓ SAP Fiori oferece várias funções de negócio simples, de fácil acesso a experiência dos
novos softwares SAP, e funciona perfeitamente no desktop, tablet, ou smartphone
SAP Fiori: Principais Benefícios

✓ Melhoria da experiência do cliente.

✓ Implementação rápida.

✓ Arquitetura permitindo escalabilidade de serviços e aplicativos.

✓ Os usuários não exigem conhecimento profundo do negócio para executar essas funções.

SAP Fiori é:
• Customizável (cores, ocultar /
mostrar campos, telas ...) e
• Extensivo (novos campos, novas
telas, nova lógica ...). Isto é feito no
back-end e seguindo
procedimentos padrão de
desenvolvimento e de transporte.
Transactions vs. Apps

Transações Apps
SAP Fiori Paradigma

Projetado para Suporta como Concentra-se Prover uma Constrói uma


você, suas e onde você no que é navegação conexão
necessidades trabalha e em importante única e sem emocional
e como você qualquer interrupção
trabalha momento
Princípios de Design
Baseada em função: interface de usuário dependendo da
tarefa a ser feita
Princípios de Design
Coerente: um único ponto de acesso em todas as áreas funcionais
e em tecnologias

Fornece apenas
as tarefas e
atividades
relevantes para
um usuário final
Ferramentas e Tecnologias

SAP Web IDE

UI theme designer

SAP Screen personas

SAP Fiori Launchpad

SAP Fiori apps reference


library
Os principais benefícios do SAP Fiori

Melhorar a experiência do usuário ao cliente

Aumentar a produtividade Melhorar o tempo a Menor risco Reduzir o custo


✓ Os usuários são capazes valorizar ✓ Implementação alinhada ✓ Reduzir a personalização e
de fazer o trabalho a ✓ Implementação mais ao valor e viabilidade de a complexidade de
qualquer hora e em rápida. negócios. integração via SAP Fiori
qualquer lugar. ✓ Cronograma ✓ Suporte pela SAP. Web IDE.
✓ Os gerentes podem Implementação mais ✓ Validado e testado pela ✓ Menores custos de
agilizar processos de previsível. SAP. manutenção.
análise de impacto no ✓ Garantia de uma melhor ✓ Investimento à prova do ✓ Reutilização de conjuntos
negócio. qualidade/confiabilidade. futuro. de habilidades.
✓ Aplicativos coerentes e ✓ Baseada em padrões, ✓ Inovação contínua. ✓ Utilização intuitiva, assim
fáceis de usar. estrutura de software reduzindo
✓ As características flexível. significativamente o
adicionais (exemplo: esforço e custo de
aprovações em massa) aprendizagem.
para acelerar a
manipulação.
SAP Fiori Launchpad
Características e Funções
Resumo dos principais recursos e capacidades

Launchpad projetado para melhorar a experiência do


usuário. Exemplos:

✓ Grande variedade de tiles pronto para usar.


✓ Ponto de entrada único para aplicativos Fiori
✓ Serviços de personalização e navegação
✓ Adicionar novos tiles do catálogo

Personalização melhoria fornecida através do Business User


Framework

Recurso de Pesquisa para visualizar a lista de aplicativos


usados recentemente

Design Responsive para fornecer experiência perfeita em


todos os dispositivos

Fiori Launchpad Designer para configurar e criar grupos e


catálogos

Sessão de Gerenciamento de login / logout de uma sessão

Theming para se adaptar melhor a experiência de usuário


conforme desejado.
Tipos de Apps

Transactional Analytical Factsheets


Acesso baseado em tarefas Indicadores Pesquisar e Explorar

Esses aplicativos permitem Estas aplicações permitem-lhe Esses aplicativos exibem


executar tarefas transacionais, obter uma visão baseada em informações contextuais e fatos
tais como a criação de um funções para operações em importantes sobre objetos
pedido de licença para um tempo real através da coleta e centrais utilizados em suas
empregado. exibição de figuras-chave. operações de negócios
Tipos de Apps

Transactional (1104) Analytical (486) Factsheets (192)


• Acesso baseado em tarefa • Insights • Search & Explore
• Alta produtividade e • Relatórios incorporados • Close Monitoring of KPIs
precisão em operações • A informação contextual e • Role based insight into real
• Visão simplificada. fatos importantes sobre time operations
objetos centrais

Sustainability; 113 Asset Management; 222


Supply Chain;
451
Studio Design Commerce; 70
(107) Sourcing and
Procurement;
487 Finance; 870
Web Dynpro
(587)
Reuse Component
Human
(84) Resources;
Service; 70
326
SAP GUI
Industry
(7820) Specific; 24

Sales; 422
Manufacturing; 395

R&D/Engineering; 223 Marketing; 111


SAP Fiori Visão Geral da Arquitetura
Landscape padrão

Firewall

Firewall
Arquitetura - Overview Logical
Apps Transacional
Arquitetura - Overview Logical
Apps Factsheets
Arquitetura - Overview Logical
Apps Analiticos
Implantação do servidor SAP Fiori FrontEnd

✓ O servidor SAP Fiori frontend é um produto adicional para o SAP NetWeaver Application Server for ABAP e
fornece os componentes de software de tecnologia para o servidor que são necessários para executar
aplicativos SAP Fiori.

✓ Antes de implementar o servidor SAP Fiori front-end, você deve decidir como os principais componentes
deste produto serão implantados no landscape. O servidor SAP Fiori permite várias opções de
implantação, que resultam em diferentes arquiteturas de paisagem do sistema.
Portal Catálogo de Serviços - Gateway

✓ O SAP Gateway, parte integrante do SAP NetWeaver, permite conectar dispositivos, ambientes e
plataformas aos sistemas SAP. Ele usa o Open Data Protocol (OData) para que você possa usar
qualquer linguagem de programação ou modelo para se conectar a aplicativos SAP e não SAP.
O que é Open Data Protocol (OData)?

✓ OData é um padrão aberto desenvolvido originalmente


pela Microsoft, mas agora gerido pela Oasis
Organisation. SAP Annotations

✓ Baseia-se no Atom de publising e padrões Atom de


distribuição, que por sua vez, são baseados em XML e OData
HTTP (s).

✓ O objetivo do protocolo OData é prover, uma API Atom


baseada em Web que cumpre plenamente com os Publishing
princípios de Representational State Transfer (REST).
JSON Atom Syndication
✓ OData também é extensível. Isso permite que a SAP
possa complementar os tipos de dados utilizados pelos
OData com informações extra do Dicionário de Dados XML
ABAP.

SAP Annotations
SAPUI5 Theming

✓ Baseado em Cascading Style Sheets (CSS) e paramêtro de CSS.

✓ UI5 suporta criações e uso de diferentes designs visuais - chamados Temas - que pode ser usado como
alternativa e transferido em tempo real, permitindo, assim, para a mesma aplicação ter uma aparência muito
diferente.

✓ Com a utilização do CSS, UI5 oferece uma variedade de recursos opcionais que agregam valor a respeito da
modularização, modificação, compatibily e performance.
SAPUI5 and Web IDE
Visão

✓ Criação baseado em ferramentas de desenvolvimento com suporte end-to-end com


desenvolvimento de aplicações SAPUI5.

✓ Criação de aplicações SAPUI5/HTML5 ou SAP Fiori like

✓ Extensão de aplicações SAPUI5 existentes.

Desenvol
Protótipo Teste Deploying Extensão
vimento
SAP Build

É um conjunto abrangente de ferramentas que permite às organizações desenhar e prototipar


aplicativos que tornam os usuários finais felizes. Essas ferramentas permitem aos usuários:

✓ Crie protótipos de forma colaborativa:


• Faça upload de esboços de suas idéias para criar facilmente protótipos interativos de
baixa fidelidade que podem ser usados para obter feedback dos seus usuários finais.
• Crie protótipos de alta fidelidade com controles de arrastar e soltar, like SAP Fiori e
dados de amostra reais.

✓ Inicie o desenvolvimento com código UI5 gerado que pode ser importado para SAP WebIDE.

✓ Personalize a galeria de protótipos: use exemplos reais inspirados em Fiori da SAP e da


comunidade como ponto de partida para criar o seu próprio.

✓ Obtenha feedback dos usuários finais: obtenha facilmente comentários dos usuários finais
através de estudos de usuários remotos e não modificados distribuídos através de um
hiperlink.

https://www.build.me
SAP Cloud Platform Trial

https://account.hanatrial.ondemand.com
SAP Fiori Demo

https://www.sapfioritrial.com/sites?helpset=trial&sap-client=001
SAP Fiori Client
Configurar o SAP Fiori Launchpad

✓ O Fiori Launchpad é o ponto de entrada para os


aplicativos e é consistente em seu UX a partir de
dispositivos de desktop e celulares

✓ Você precisa configurar o SAP Fiori Launchpad para


que os usuários possam ter acesso essas aplicações
que foram atribuídos a seu papel.
➢ Estabelecer targets de navegação para aplicações
➢ Criar catálogos e tiles
➢ Atribuir catálogos para roles
➢ Fornecer aos usuários acesso ao Launchpad
Configuração da infraestrutura
Setup do SAP Fiori Launchpad

# Tarefa

1 Ativar os serviços OData

2 Ativar os serviços SICF

3 Atribuir funções de administrador do SAP Fiori Launchpad para usuário do


administrador
4 Atribuir função com a autorização de acesso ao Launchpad para os usuários finais

5 Configurar a tela de logout para o Launchpad – Opcional

6 Criar RFC Connection para as operações de back-end


1. Configuração da infraestrutura
Ativar os serviços OData para SAP Fiori Launchpad

✓ Transação: /IWFND/MAINT_SERVICE

Serviço Descrição

/UI2/PAGE_BUILDER_CONF Catálogo, página e serviço dispositivo; camada de


configuração (todo o sistema)
/UI2/PAGE_BUILDER_CUST Catálogo, página e serviço dispositivo; camada de
configuração (específico do cliente)
/UI2/PAGE_BUILDER_PERS Catálogo, página e serviço dispositivo; camada de
configuração (específico do usuário)
/UI2/INTEROP Usado pela barra de lançamento Fiori para a navegação

/UI2/TRANSPORT Usado pela barra de lançamento designer Fiori para ler e


atribuir pedido de transporte
1. Configuração da infraestrutura
Verifique se os serviços OData foram ativadas corretamente

✓ Selecione o serviço OData.

✓ Escolha a opção Call Browser.

✓ Após a chama com sucesso, um documento XML será


exibido no navegador sem erros.
1. Configuração a infraestrutura
Transporte do system alias - OData

✓ Após criado e testado o serviço de Odata, clique no botão Customization


✓ Selecione a linha criada e clique me Table View > Transport
✓ Adicione a uma request relacionado ao serviço.
2. Configuração a infraestrutura
Ativar os serviços SICF para SAP Fiori launchpad

✓/default_host/sap/bc/ui2/nwbc
✓/default_host/sap/bc/ui2/start_up
✓/default_host/sap/bc/ui5_ui5/sap/ar_srvc_launch
✓/default_host/sap/bc/ui5_ui5/sap/ar_srvc_news
✓/default_host/sap/bc/ui5_ui5/sap/arsrv_upb_admn
✓/default_host/sap/bc/ui5_ui5/ui2/ushell
✓/default_host/sap/public/bc/ui2
✓/default_host/sap/public/bc/ui5_ui5
2. Configuração a infraestrutura
Acessando o SAP Fiori Launchpad

✓ Na URL abaixo, trocar as informações em vermelho pelo do cliente.

http://vhcalhdbdb.dummy.nodomain:50000/sap/bc/ui5_ui5/ui2/ushell/s
hells/abap/fiorilaunchpad.html?sap-client=100&sap-language=EN
3. Configuração a infraestrutura
Atribuir funções de administrador do Launchpad para usuário administrador

✓ Copie papel SAP_UI2_ADMIN_700 para o


namespace do cliente

✓ Tab Menu - Autorização Padrão - TADIR Serviço


➢ ID do Programa: R3TR
➢ Tipo de objeto: IWSG

✓ Escolha propor nome do perfil - dados de


autorização de mudança – gerar

✓ Atribuir o novo papel para o administrador


4. Configuração a infraestrutura
Atribuir função com a autorização de acesso ao Launchpad - usuários finais

✓ Copie papel SAP_UI2_USER_700 para o


namespace do cliente

✓ Tab Menu - Autorização Padrão - TADIR Serviço


➢ ID do Programa: R3TR
➢ Tipo de objeto: IWSG

✓ Escolha propor nome do perfil - dados de


autorização de mudança – gerar

✓ Atribuir a nova função para o usuário


5. Configuração a infraestrutura
Configurar a tela de logout para o Launchpad – Opcional

✓ Executar a transação SICF no front-end

✓ Acessar o serviço: /sap/public/bc/icf/logoff

✓ Navegue por: Error Pages > Logoff Page > Redirect to URL.

✓ Edite e coloque a url:


/sap/bc/ui5_ui5/ui2/ushell/shells/abap/Fiorilaunchpad.html
6. Configuração a infraestrutura
Criar RFC Connection para as operações de backend

✓ Identificar o alias do sistema para as


operações de back-end para o qual você
precisa estabelecer um RFC:
➢ Na biblioteca
➢ Target Mapping

✓ Transação SM59:
➢ Tipo de conexão: H
➢ RFC Destino: entre com o sistema do
passo anterior
➢ Insira o host de destino
Configuração o Gateway
Conectando o SAP NW Gateway para SAP Backend

✓ Configurar o servidor Gateway como o sistema "confiável",


criando um destino RFC no Gateway para o Back-end:

✓ Ir para SPRO > SAP Reference IMG. Open SAP Customizing


Implementation Guide > SAP NetWeaver > Gateway >
Configuration > Connection Settings > SAP NetWeaver
Gateway to SAP System > Manage RFC Destinations.

✓ Clique em Criar. Digite o seguinte informações e pressione


Enter:
➢ RFC Destino: <SID de Back-end> CLNT <Cliente> (ex .:
FSELFSCLNT500)
➢ Tipo de conexão: 3

✓ Na guia Configurações Técnicas, entre com as informações do


back-end para o campo de host de destino e seu número de
instância para o campo Número do sistema.

✓ Clique na guia Logon e Segurança. Insira o número de cliente


do back-end. Clique na caixa de usuário atual e selecione Sim
para a relação de confiança.

✓ Salve as configurações.
Configurando Gateway
Criar Sistema Alias para Aplicações

Importante!

✓ Você deve definir 2 alias do sistema.

✓ ECC é para backend.

✓ ECC_PGW é para o fluxo de trabalho de backend com local APP + / IWPGW / BWF
Configuração do APP
Setup

# Tarefa

1 Ativação do serviço OData

2 Ativação do serviço SICF

3 Configuração Objeto Semântico

4 Busca do ID do Componente
Configuração do APP
Passo 1: Biblioteca de Referência

✓ Abrir biblioteca de aplicações de referência SAP Fiori

✓ Escolher o App

✓ Selecionar Informações de implementação


Configuração do APP
Passo 2: Atribuir funções de backend para o usuário

✓ Na transação PFCG no backend (por exemplo ERP) sistema

✓ Atribuir as funções agregadas para o usuário


Configuração do APP
Passo 3: Ativar o serviço ICF Nodes

✓ Na transação SICF, pesquisar o nome do serviço do app

✓ Ativar o serviço
Configuração do APP
Ativação do serviço SICF

1) Executar a transação: SICF no front-end.


2) Pesquise o serviço pelo nome do APP.
3) Para ativar, clique com o botão direito e ativar.
Configuração do APP
Passo 4: Ativar o serviço OData

✓ Na transação /iwfnd/maint_service

✓ Escolha o system alias do sistema de backend para a ativação

✓ Escolha o serviço definidos para a ativação


Configuração do APP
Ativação do serviço OData

1) Executar a transação /IWFND/MAINT_SERVICE


2) Clique em Add Service
3) Preencher o System Alias e o Technical Service Name.
4) Após encontrá-lo, selecionar e clicar em Add Selected Services.
5) Teste o serviço usando a opção Call Browser. Selecione o nó OData, e não o nó SDATA.
6) Você chamou um serviço com êxito quando um documento XML é exibido sem quaisquer
mensagens de erro.

Observação:
Caso ocorra algum erro no teste, acesse a transação: /IWFND/ERROR_LOG.
Configuração do APP
Passo 5: Atribuir role para o usuário

✓ Na transação PFCG no frontend (por exemplo ERP) sistema

✓ Atribuir as funções agregadas para o usuário


Configuração do APP
Atribuir role ao usuário

1) Executar a transação PFCG.


2) Informar a role encontrada na biblioteca.
3) Realizar a cópia da role standard (renomear caso regra do cliente).
4) Selecionar a aba autorização e clicar em editar
5) Gerar as autorizações necessárias (avaliar se as autorizações estão de acordo).
6) Selecionar a aba usuário e informar o login do usuário.
SAP Fiori Launchpad –
Características e Funções
Visão geral do conceito – Cenário Principal

Sequência de passos para criação de um Catálogo:

1) Criar um novo catálogo no Launchpad designer


2) Adicione os tiles para o catálogo: dois tipos são
necessários:
➢ Mapeamento Alvo (obrigatório)
➢ Estático, Dinâmico ou Notícias Tile Estático
Mapeamento
Tile Estático
alvo
Tile
3) Criar um grupo e adicionar tiles para ele, tendo já 2 Dinâmico
criados, tiles estático, dinâmico ou notícias de Tile Dinâmico Tile Notícias
catálogos definidos. Tile Notícias
4) Criar uma nova role na transação PFCG e atribuir o
catálogo e / ou grupo criado para ele. Em seguida, Catalogos 1 Grupos 3
atribuir a role para os usuários.
Launchpad Designer

4 PFCG
SAP Fiori Launchpad –
Características e Funções
Visão geral do conceito – Cenário Alternativo

Sequência de passos para aplicações de transação:


1 LPD_CUST
1) Registrar um novo LPD usando a transação
LPD_CUST na SAP NW Gateway e adicione os
aplicativos BSP desejados para ele.
2) Criar um novo catálogo no Launchpad designer
3) Adicione os tiles para o catálogo: dois tipos são Tile Estático
Mapeamento
Tile Estático
necessários alvo
Tile
➢ Mapeamento Alvo (obrigatório)
3 Dinâmico
Tile Dinâmico Tile Notícias
➢ Estático, Dinâmico ou Notícias Tile Notícias
4) Criar um grupo e adicionar tiles para ele, tendo
já criados, tiles estático, dinâmico ou notícias de Catalogos 2 Grupos 4
catálogos definidos.
5) Criar uma nova role na transação PFCG e atribuir Launchpad Designer
o catálogo e / ou grupo criado para ele. Em
seguida, atribuir a role para os usuários.

5 PFCG
SAP Fiori Launchpad –
Características e Funções
Ativar serviço de Launchpad Designer

1) Executar a transação: SICF no front-end.


2) Pesquise o serviço pelo nome do arsrvc_upb_admn.
3) Para ativar, clique com o botão direito e ativar.

http://vhcalhdbdb.dummy.nodomain:50000/sap/bc/ui5_ui5/sap/arsrvc_
upb_admn/main.html?sap-client=100&sap-language=EN
Configuração do Catálogo
Criar Catálogo

1) Acessar o link:

2) Clicar em:

3) Preencher os campos:
− Escolher a opção Standard
− Título
− ID: Z_XXX_CATALOGO
Configuração do Catálogo
Criação do Bloco (Tile) – Dinâmico e Estático

1) Clicar em: e em:

2) Escolha o tipo: App launcher – dinâmico

3) Preencher os campos:
− Título: Nome que será exibido no lauchpad
− URL de serviço: url do serviço de Contador
− Intervalo *: tempo de atualização
− Objeto Semântico: nome do objeto criado para o APP
− Ação: approve
Configuração do Catálogo
Criação do Grupo

1) Clicar em: e em:

2) Selecionar o catálogo criado

3) Selecione o APP que deseja incluir em clique em:


Transport request (1/3)
Camadas CONF / CUST

✓ O Fiori Launchpad permite a adaptação de conteúdo em camadas diferentes.

✓ Todo o conteúdo que você deseja entregar a um cliente deve ser criada na camada CONF
(configuração). Para testes ou outras razões podem ser usados a camada CUST
(Personalização).
Transport request (2/3)
Camadas CONF / CUST

Você tem que criar uma request de transporte,


antes de qualquer configuração Launchpad:

✓ Abrir SE01

✓ Manter o parâmetro de destino nos detalhes da


solicitação usando o destino correspondente para
o seu transporte

✓ Abra o Launchpad designer, adicionando o


"scope = CONF" parâmetro para a cadeia de URL

✓ Selecione a request de workbench no dropdown


list
Roles, Usuário e Autorizações
Front-end

Z_R_XXX_LPD (Role Launchpad ).


1) Criar a role
2) Adicionar o objeto Fiori Launchpad Catalogo
3) Adicionar o objeto Fiori Launchpad Grupo
Roles, Usuário e Autorizações

Servidor Frontend Servidor Backend

Usuário Usuário

App User App User


App User App User
Roles S_RFCACL

O mesmo usuário em ambos os sistemas


Relacionamento –
Launchpad Catálogo Objects

ABAP Estático/Dinâmico Launcher


Sequência de passos:
Título= Leave Requests
PFCG Launchpad Designer
Descrição= Shows all leav...
✓ LPD_CUST Chamada OData = /xyz/OData/LR$count
Role XYZ Group XYZ Catálogo ABC Nav Target = <objeto semântico>
- Grupo XYZ <ação>
✓ Designer Launchpad - Catálogo ABC

− Adicionar um
catálogo Mapeamento alvo
...
− Adicionar um Objeto Semântico = <objeto semântico>
Ação = <ação>
grupo
Dynamic AppLauncher Tile Purchase Order LPD_CUST Role/Inst = <Role> /
Employee <Instance>
✓ Mapeamento alvo Static AppLauncher Tile Contact AppAlias/ID = <Alias/ID>
...
− Objeto semântico News Tile Semantic
Chip Objects
− Ação XYZ Tile
Repository
<Role>/<Instance>
✓ Tile estático / AppAlias/Id > AppURL

dinâmico

✓ PFCG Fiori Apps LPD_CUST


− Catálogo
/sap/bc/ui5_ui5/ui2/ushell/test/sap/ushell/demoapps/AppNavSample
− Grupo
Explorando SAP Fiori Theme Designer
UI Designer Theme (pré-requisitos)

✓ Para ser capaz de usar o Designer tema UI, alguns pré-requisitos devem ser atendidos:

1) Ativar os seguintes nós de serviço ICF:


− /sap/public/bc/themes
− /sap/bc/theming

2) Para o acesso de escrita para o Theme designer (criar, alterar, excluir temas), você deve ser
atribuído o objeto de autorização:
− Objeto de autorização: / UI5 / TEMA
− ACTVT (atividade): 02 (Change)
− /UI5/THMID (id tema): * (todos os temas)
Explorando SAP Fiori Theme Designer
Conceito theming SAPUI5

✓ Com base em CSS

✓ Arquivos CSS são separados por controle em tempo de desenvolvimento


✓ Além disso: global.css, shared.css

✓ Cada tema usa, CSS tema base mais arquivos CSS relacionados específicas no topo

✓ Gerador une arquivos e acrescenta temas específicos para o tema base:


✓ Substitui usos de parâmetros CSS
✓ Compressão opcional / otimização
✓ Geração automática direita para esquerda (Para RTL línguas como o hebraico)
✓ Um arquivo CSS por biblioteca de controle (library.css)
Explorando SAP Fiori Theme Designer
Ajuste de estilos

Em alguns casos, é necessário ajustar as partes do tema usando CSS:

✓ Pode-se adicionar <style> ou <link> tag <head> tags no HTML para novos estilos inclusivas
− Esses estilos são sempre processados após a CSS UI5 dos temas
− Como o último CSS processados vence em caso de várias regras, o CSS personalizado sempre substitui o CSS
UI5 padrão
− As peças a serem substituídas podem ser determinados utilizando ferramentas como Firebug
− Também é importante saber que o id dado a um controle é também a id que o elemento HTML de nível
superior desse controle fica. Assim, este ID pode ser usado como uma referência em CSS

✓ Usando o método addStyleClass que cada controle UI5 tem


− Pode-se adicionar uma classe CSS para o elemento de nível HTML parte superior do controle UI5
Explorando SAP Fiori Theme Designer
UI Theme Designer

✓ Transação: /UI5/THEME_DESIGNER
Explorando SAP Fiori Theme Designer
UI Theme Designer

✓ O tema do Launchpad é definido através da transação /UI2/NWBC_CFG_SAP

✓ Para definir um tema custom para o Launchpad utilizar, acesse a transação


/UI2/NWBC_CFG_CUST
Explorando SAP Fiori Theme Designer
UI Theme Designer

Os seguintes parâmetros devem ser configurados:

✓ Filtro Caminho: SAP_FLP

✓ Nome do parâmetro: THEME

✓ Valor: ID do tema criado pelo usuário


Explorando SAP Fiori Theme Designer
/UI5/THEME_TOOL

A UI5/THEME_TOOL é usada para executar o seguinte:

✓ Transporte

✓ Exportação

✓ Importação

✓ Deleção

✓ Invalidação do cache no servidor

Os temas também pode ser definido utilizando o URL

✓ sap-theme = <theme-id>@<tema root>


Terminologia Workflow - SAP
Terminologia Workflow - SAP

As cinco perguntas-chave para todos os processos de negócios são:

✓Em que ordem?

✓O que?

✓Com o qual objeto?

✓Quem?

✓Quando?
Terminologia Workflow - SAP
Em que ordem?

Definição de fluxo de trabalho


Controla o processo de negócio

Consiste em etapas
pode ser desencadeado por eventos
Terminologia Workflow - SAP
Workflow Builder

Evento Inicial

Passos

Símbolo para
início do fluxo de
trabalho e fim
Terminologia Workflow - SAP
O que é realiza?

Um passo de um fluxo de trabalho pode ser dos seguintes tipos:

✓ Atividade

✓ Atividades que aponte para tarefas que podem:


− Executar uma transação
− Executar um relatório
− Executar um módulo de função
− Executar uma rotina em um sistema externa
− Atualize uma planilha

✓ Geração de documentos

✓ Decisão do usuário
Terminologia Workflow - SAP
Com qual objeto?

✓ Exemplo de tipo de objetos:


− Invoice
− Purchase Requisition
− Material
− Archived Messages
− Documents from PC office applications
− Customer
− Employee
− Notification of Absence

✓ Exemplo de métodos:
− Post (Invoice)
− Approve (Requisition)
− Change (Material)
− Display (Image)
Terminologia Workflow - SAP
Quem?

Processo Organização Business Workplace


Definição de Workflow
Unidade
Organizacional

Job
Prior. Tarefas Data
1 Approve form 1 de Março
Posição
2 Post invoice 25 de Março
Agente 3 Post invoice 5 de Abril
Matrícula
responsável
Role
Superior do
<usuário>
Lista de trabalho dinâmico com itens
de trabalho, a apresentação de
Expressão tempo de execução de tarefas
agente
anterior
Terminologia Workflow - SAP
Quando?

Evento

Informa o sistema que algo aconteceu


Um fluxo de trabalho pode ser iniciado
(Fato gerador)
Um item de trabalho pode ser concluído
Caixa de (Evento que encerra)
Saída Mostra os vários resultados de uma etapa

Aprovado Rejeitado Aguardando


Terminologia Workflow - SAP
Transações Úteis

✓ PFTC - Workflow Task

✓ SWDM - Business Workflow Explorer

✓ SWDD - Workflow Builder

✓ SWO1 - Business Object Builder

✓ SWETPYV - Display anda maintain event type linkage

✓ SBWP - Business Workplace

✓ SWI1 - Selction report for work items

✓ SWEL - Display Event Trace

✓ PPOMW - Maintain organization plan


Big Picture –
Quais são os processos de back-end?

ERP

Application Caixa
Event de
Correio
Business Object

Basis - Workflow
Portal
Inbox UWL
Workflow Step Task Agent
WorkItem

SAP NW
RFC <-> REST
Gateway Fiori
Approve
Request
Estendendo Approve Requests / My Inbox
My Inbox - Principais Características

✓ Definir opções de decisão personalizado

✓ Executar todas as ações de fluxo de trabalho padrão sem customização


necessária

✓ Realizar ações em massa

✓ Visualizar e adicionar comentários

✓ Estender o aplicativo para visualizar atributos personalizados

✓ Trabalho com anexos

✓ Criar e gerenciar regras de substituição

✓ Pré-configurado todos os itens do tile com aplicativo estendido


Estendendo Approve Requests / My Inbox
Passo 1 - Obter definições de workflow (ERP)

✓ Antes de iniciar configurações, seguintes detalhes de fluxo de trabalho são necessários.

Transação: PFTC

ID Fluxo de Trabalho: WS30000015

Passo ID: 48

Tarefa ID: TS30000016

Tipo de Tarefa: Dialog

Resultados: Aprovado = A

Rejeitado = R

BOR: FORMABSENC
Estendendo Approve Requests / My Inbox
Passo 2 - Definir os cenários (Gateway)

✓ Adicionar tarefas de aprovação de fluxo de trabalho na personalização cenário

✓ O cenário agrega uma ou mais tarefas de workflow no workflow engine, e é representado


por uma única entrada no pedido do consumidor

✓ O serviço /IWPGW/TASKPROCESSING é fornecida como standard

✓ Os tipos de consumidores podem ser: celular, tablet e desktop.

✓ Acessar atráves: SPRO > SAP IMG > SAP NetWeaver > SAP Gateway Service Enablement >
Content > Task Gateway > Task Gateway Service > Scenario Definition
Estendendo Approve Requests / My Inbox
Passo 3 - Adicionar uma telha para Launchpad (Gateway)

✓ Acesse o Launchpad Designer

✓ Adicione tile de app do tipo dinâmico


− URL do serviço:
/sap/opu/odata/IWPGW/TASKPROCESSING;mo/ScenarioColletion?$filter=key eq
'Z_CENARIO'
− Objeto semântica: WorkflowTask
− Ação: approveRequests
− Parâmetros: scenarioId=Z_CENARIO
Estendendo Approve Requests / My Inbox
Passo 4 - Definir opções de decisão (ERP)

✓ Como estamos habilitando uma atividade do tipo de workflow, será necessário especificar a
lista de decisões disponíveis no objeto da tarefa

✓ Isso seria feito através da declaração do workflow ID e task ID, e as decisões disponíveis
para isso.

✓ Acessar atráves: SPRO > SAP IMG > SAP NetWeaver > SAP Gateway Service Enablement >
Content > Workflow Settings > Maintain Task Names and Decision Options.
Estendendo Approve Requests / My Inbox
Passo 5 - Implementar o BADI para a Atualização de decisão (ERP)

✓ BADI: /IWWRK/ES_WF_WI_BEFORE_UPD_IB

✓ Implementar a implementação BADI que mapeia a chave decisão de valor do resultado


recipiente resultado

CASE iv_decision_key
WHEN 0001. "Aprovado
ls_container_line-value = 'A'
ls_formabs-procstate = 'A'
WHEN 0002. "Rejeitado
ls_container_line-value = 'R'
ls_formabs-procstate = 'R'
ENDCASE.
Estendendo Approve Requests / My Inbox
Passo 5 - Implementar o BADI para a Atualização de decisão (ERP)

✓ Após criar a sua implementação da BADI: /IWWRK/ES_WF_WI_BEFORE_UPD_IB, adicione um


filtro para a sua implementação:

− Clique no botão Combination e adicione os dois filtros: WORKFLOW_ID e STEP_ID.

− No item STEP_ID, você irá informar o número do passo: 48 e o sinal de “=”.

− No item WORKFLOW_ID, o número do workflow: WS3000015 e o sinal de “=”.


Estendendo Approve Requests / My Inbox
Passo 5 - Implementar o BADI para a Atualização de decisão (ERP)

✓ Dentro da implementação da BADI, você irá adicionar o código contido dentro do document
work.
Estendendo Approve Requests / My Inbox
Passo 6 - Exibição de dados de aplicativos (ERP)

✓ Existem três formas para a exibição de dados de aplicativo:


6a) Ao definir descrição workitem
6b) Com a implementação BADI que construir descrição workitem em formato HTML
6c) por anexo de PDF

✓ Isso é tratado pelo lado do workflow.


Estendendo Approve Requests / My Inbox
Passo 6a - Exibição de dados de aplicativos (ERP)

✓ Você pode incluir dados de negócios na descrição do item de trabalho

✓ Transação: PFTC
Estendendo Approve Requests / My Inbox
Passo 6b - Exibição de dados por BADI (Gateway)

✓ BADI disponíveis na tarefa Service Gateway:


− IWPGW/ES_TGW_TASK_QUERY – Alterando o campo assunto com o resultado da query
− IWPGW/ES_TGW_TASK_DATA – Alterando o título da tarefa e/ou descrição da tarefa.
Incluindo HTML na área de descrição.
− IWPGW/ES_TGW_USER_DETAIL – Alterando os detalhes do usuário

Você pode incluir dados de aplicação


em formato HTML através da
implantação da BADI
SAP Smart Business
Principais benefícios

✓ SAP Smart Business é a nova experiência do usuário para SAP Business Suite powered by SAP
HANA, combinando modelos de trabalho modernos com uma usabilidade. Isso permite que os
usuários chaves aptos de seu negócio possam tomar decisões melhores e mais rápidas,
permitindo que usuário final em apenas um toque possa: analisar, compartilhar e agir em tempo
real.

✓ Combinando conhecimentos em tempo real com análises e atividades de acompanhamento


transacionais para permitir decisões melhores e mais rápidas.
Arquitetura –
Apps Analíticos e Smart Business
SAP HANA Live

✓ HANA Live (anteriormente conhecido como


SAP HANA Fundação Analytics) oferece
qualidade para análise em todas as
aplicações de Business Suite reforçada,
permitindo o acesso standard aos dados do
SAP por meio de modelos de dados
compreensíveis

✓ Os modelos de dados são otimizados para


fins analíticos utilizando visualizações no
banco de dados HANA.
Arquitetura –
Apps Analíticos e Smart Business
Modelos virtuais de dados (VDMs): Views

View Private Reuse View Query View

Encapsular certas Eles expõem os dados de Projetado para consumo


transformações SQL em uma negócios de uma forma bem direto por uma aplicação
ou várias tabelas de banco de estruturada, consistente e analítica (baseado em
dados ou até mesmo em compreensível, cobrindo HTML5, por exemplo) ou
outra views. Eles não são todos os dados relevantes ferramenta analítica
classificadas como views de do negócio em SAP Business genérico.
reutilização, mas destinam-se Suite systems.
mais a ser reutilizado em
outras views. Por exemplo,
em tabelas de banco de
dados, outros views privada
ou view de reutilização.
SAP Smart Business –
KPI Ferramentas Framework
KPI Modeler

✓ Uma ferramenta que permite modelar tiles de KPI e relatórios que permitem direcionados
monitorização dados-chave de negócios usando o Fiori Launchpad.

✓ Pode-se definir KPIs e relatórios no qual você pode aplicar inúmeras avaliações diferentes, assim
possibilitando responder ao cenário de negócios em constante mudança

✓ Pode configurar drill downs views.


Visão Geral - OData
Explicando REST

✓ REST é um conjunto de princípios que definem como Web Standards como HTTP e URIs devem ser
usados. A promessa é que se você aderir a princípios REST enquanto estiver desenhando sua
aplicação, você terá um sistema que explora a arquitetura da Web em seu benefício. Em resumo,
os cinco princípios fundamentais são os seguintes:
− Dê a todas as coisas um Identificador
− Vincule as coisas
− Utilize métodos padronizados
− Recursos com múltiplas representações
− Comunique sem estado
Create a Gateway Alias
Visão Geral - OData
Explicando OData

Desktop / HTML5 / Mobile or Web App UI


Application/UI
OData SDK

Connector
Client
OData
HTTP, uniform protocols

Web Infrastructure OData Services


OData
HTTP, uniform protocols

Server SAP Gateway


Connector

Business
Business Logic BW
Suite
Visão Geral - OData
URIs básicas

✓ Protocolo com Opção de query:


− &sap-ds-debug=true
− $format=xml
− $format=json
Visão Geral - OData
URIs básicas

✓ Protocolo com opção de query:


− Obtém o documento de serviço, adicionando a URL parâmetro? $format=xml para o URI raiz
serviço.
URL: http://<server>:<port>/sap/opu/odata/UI2/LAUNCHPAD/?$format=xml
− Obtém o documento de metadados, adicionando $metadata a URI raiz serviço.
URL: http://<server>:<port>/sap/opu/odata/UI2/LAUNCHPAD/$metadata
− Adicionando o parâmetro URL &sap-ds-debug=true, os hrefs no documento são exibidos como
links. Isto permite-lhe navegar facilmente na estrutura do documento.
URL: http://<server>:<port>/sap/opu/odata/UI2/LAUNCHPAD/?$format=xml&sap-ds-debug=true
Visão Geral - OData
Estrutura de um serviço OData

✓ Um serviço de OData é um modelo lógico de dados; ele descreve entidades usando associações e
operações.

✓ As entidades em nosso exemplo são: business partners, sales orders, sales order line items,
products, and the contacts of business partners.
Visão Geral - OData
Estrutura de um serviço OData

✓ O documento de serviço na figura. Serviço OData Exemplo documento, contém cinco recursos:
− BusinessPartnerSet
− ProductSet
− SalesOrderSet
− SalesOrderLineItemSet
− ContactSet
Expondo o modelo de entidade de dados
usando o procotolo OData
Modelo de Entidade de Dados - Visão Geral

✓ Um Modelo de Dados de Entidade (EDM) é o ponto de partida na concepção de um serviço


OData. A EDM descreve a organização e relação dos recursos dentro de um cenário de
negócio em particular:
Usando o OData
Recuperando dados de um serviço OData

✓ Para começar, vamos cobrir as mais simples, duas operações que podem ser realizadas simples de
OData: ReadEntitySet e ReadEntity (também referida como consultar e READ):

✓ ReadEntitySet (QUERY) : retorna 0..n entradas de uma coleção

✓ ReadEntity (READ) : retorna 0..1 entradas de uma coleção

✓ Ambas as operações são somente leitura e, portanto, usar o método HTTP GET.

Operação REST Metodo HTTP

Criação de um recurso POST

Recuperar um ou mais recursos GET

Atualizar um recurso PUT

Excluir um recurso DELETE


Recuperando uma Coleção
Construindo a URL

✓ O URL pode ser construído com a ajuda de o documento de serviço:

Com esta URL iremos receber o conteúdo da coleção "Gêneros"


Recuperando uma entrada única

✓ Especifique o nome da coleção seguido por todas as chaves e seus respectivos valores que
identificam o entity em questão.

✓ Você também vai precisar esta sintaxe especial caminho de recurso ao navegar entre as
entidades associadas. No entanto, a sintaxe apropriada já é aplicada em uma <entry> 's <link>
elementos:

/sap/opu/odata/IWBEP/GWSAMPLE_BASIC/ProductSet('HT-1000')
Realizando Queries em OData
$select

✓ É usado para limitar o conjunto de resultados para uma aplicação do consumidor.

✓ Limitando o número de colunas que são recuperados pelo consumidor.

✓ Aqui nós só queremos recuperar o ID parceiro de negócios e o nome do parceiro de negócios.

/sap/opu/odata/IWBEP/GWSAMPLE_BASIC/BusinessPartnerSet?$select=Category,Name
Realizando Queries em OData
$filter

✓ Você pode filtrar os <feed> conteúdo usando o parâmetro de cadeia de consulta $filter.

✓ O parâmetro $filter pode conter uma estrutura de filtro complexo composto por lógica,
aritmética e operadores de agrupamento. Também estão disponíveis string, date, math, e tipo
relacionados as funções.

/sap/opu/odata/IWBEP/GWSAMPLE_BASIC/ProductSet?$filter=Category eq 'Notebooks'
Realizando Queries em OData
$top

✓ Paginação é informada pela configuração $top para o número de entradas por página, e em
seguida incrementando $skip o número de próximas páginas são necessárias.

✓ $top especifica o número máximo de entradas que devem ser devolvidos

/sap/opu/odata/IWBEP/GWSAMPLE_BASIC/ProductSet?$top=5
Realizando Queries em OData
$skip

✓ $skip especifica quantas entradas devem ser ignorados quando selecionar os resultados

/sap/opu/odata/IWBEP/GWSAMPLE_BASIC/ProductSet?$skip=10&$top=5
Realizando Queries em OData
$inlinecount

✓ No caso de paginação do lado do cliente, você também precisa determinar o número total de
valores. este valor é recuperado pela opção de filtro $inlinecount=allpages.

✓ Juntamente com o conjunto de resultados, o número de todos os valores que se encaixa com os
critérios de filtro de corrente é fornecida ao cliente.

/sap/opu/odata/IWBEP/GWSAMPLE_BASIC/ProductSet?$inlinecount=allpages
Realizando Queries em OData
$expand

✓ $expand é uma opção de consulta que é semelhante ao propriedades de navegação.

✓ $expand é usado para recuperar várias entidades que estão conectados via propriedades de
navegação em uma solicitação ou ciclo de resposta.

/sap/opu/odata/IWBEP/GWSAMPLE_BASIC/BusinessPartnerSet?$expand=ToProducts
Visão Geral - OData
Realizando Querys em OData

✓ As opções abaixo mostra como reduzir o volume de dados transferido do servidor para o cliente,
filtrando os conjuntos de dados e por selecionar apenas as propriedades de dados relevantes.

− $count (/sap/opu/odata/IWBEP/GWSAMPLE_BASIC/BusinessPartnerSet/$count)

− $value (/sap/opu/odata/IWBEP/GWSAMPLE_BASIC/ProductSet('HT-1000')/Name/$value)

− $orderby (/sap/opu/odata/IWBEP/GWSAMPLE_BASIC/ProductSet?$orderby=Category desc)


Implementando o serviço Gateway
Construir o modelo OData

Reutilizando estruturas de dados existentes

Criando manualmente os componentes do modelo


Implementando o serviço Gateway
Construir o modelo OData

✓ O construtor de serviço permite que você navegue facilmente entre os métodos ABAP que
precisam ser implementadas para apoiar as diferentes operações OData de um conjunto de
entidades.

Navegação direta com os métodos CRUD da classe DPC EXT:


- Create -> <Entity_Set>_CREATE_ENTITY
- Read -> <Entity_Set>_GET_ENTITY
- Query -> <Entity_Set>_GET_ENTITYSET
- Update -> <Entity_Set>_UPDATE_ENTITY
- Delete -> <Entity_Set>_DELETE_ENTITY
SAP Fiori Extensibilidade
Visão Geral

✓ Um uso bem documentado de ferramentas para clientes e parceiros:


− Extensibilidade UI: Clientes / Parceiros utilizar apenas SAP Web IDE
− OData extensibilidade: usar a ferramenta SEGW proposto pela SAP NW Portal

✓ Assim:
− Permite que os clientes protejam seus investimentos
− Manter o custo de suporte para SAP o mais baixo possível.
SAP Fiori Extensibilidade
Skills

✓ O desenvolver precisa de ter as seguintes capacidades , dependendo do tipo de


aplicação/extensão.
SAP Fiori Extensibilidade
Ferramentas

✓ O desenvolver precisa de ter as seguintes capacidades , dependendo do tipo de


aplicação/extensão.
SAP
ABAP Object ABAP ABAP Gateway SAP Smart
Camada de HANA
Navigator Dictionary Customizing Service Web Business
conteúdo studio
(SE80) (SE11) (SPRO) Builder IDE Modeler
(SEGW)
Business Suite X X

Gateway X X X

HANA X

Transactional Apps X

Smart Business X
Apps
Other Analytical X
Apps
Fact Sheet Apps X X

Search Model X
SAP Fiori Extensibilidade
Taskflow

✓ Para criar a extensibilidade livre para modificação, usamos o conceito de "redefinir" que
está disponível como parte do SAP NW Portal

✓ Esta abordagem permite atingir uma extensão livre de modificação de aplicações Fiori

Adicionar campos na extensão


SE11 - ABAP Dictionary Maintenance incluem a estrutura

Criar um novo projeto OData


SEGW - Gateway Service Builder redefinindo o projeto OData out-
of-the-box

SE80 - Object Navigator Código em tempo de execução


estendido e classes modelo
SAP Fiori Extensibilidade
UI extensibilidade

✓ O conceito permite que um desenvolver possa fazer extensões modificáveis livre para
alguns dos casos de uso de extensibilidade.

✓ Deve-se olhar para lugares específicos, onde SAP permitiu que os pontos de extensão. Um
deles tem de verificar se os requisitos de extensão podem ser satisfeitas utilizando uma das
seguintes opções:
− i18n Resource Extension
− View Extension
− View Modification

✓ Apenas em casos, onde as opções acima mencionadas não podem ser utilizados para atingir
um determinado requisito, as seguintes opções pode ser utilizada
− View Replacement
− Controller Extension
− Custom View
Principais características – SAP Web IDE

Recursos de desenvolvimento

✓ editor de código-fonte com autocomplete


de código específico SAPUI5

✓ editor Layout

✓ instantânea navegador pré-visualização


do app

✓ suporte de dados fictícios para teste

✓ mecanismos de extensão de aplicativo


interativo de fácil utilização

✓ possibilidades de extensão através de


plug-ins
Principais características – SAP Web IDE
Modelo e exemplo aplicativos

Modelos de projeto

✓ Projeto SAPUI5 Básico


− Projeto SAPUI5 Aplicação

✓ SAP Fiori Aplicação


− SAP Fiori Aplicação Master Detail
− SAP Detalhe Fiori Master

✓ Aplicações móveis SAPUI5

✓ Extensibilidade de aplicações SAPUI5

✓ Crie seu próprio

✓ Aplicativos de exemplo

✓ Acelerar o desenvolvimento SAP Fiori com


pronto para executar aplicativos
Principais características – SAP Web IDE
Projeto SAP Web IDE Extensão

✓ Em SAP Web IDE, crie um novo Projeto de


Extensão escolhendo Arquivo> Novo> Projeto de
Extensão

✓ Escolha o "Remote ..." opção e selecione o seu


sistema e aplicação desejada

✓ O nome do projeto de extensão será definido e


se desejar pode ser mudado.

✓ Escolha a opção "aplicativo pai import" se


desejado

✓ Escolha Next e Finish para concluir o assistente


Principais características – SAP Web IDE
Importação da Estrutura do Projeto

1) i18n: os arquivos de propriedades de linguagem

2) util: classes auxiliares, tais como formatters.js

3) view: view e controllers de aplicação

4) Component.js: contém metadados do projeto, de recursos e


de navegação de caminhos, este arquivo será estendido

5) Configuration.js: propriedades do serviço OData

6) Main.controllers.js: realiza o carregamento inicial

7) Main.view.js: a principal view container

8) Preload Files: aplicativo minimizado, chamado por param


URL padrão para desativar - sap-ui-preload=%20

9) Neo-app.json: Local do destination/resource requerido pela


SAP Web IDE

10) Index.html: permite o teste autônomo, ou seja, fora do


sandbox
Principais características – SAP Web IDE
Projeto de Extensão Component.js

✓ JQuery.sap.declare – Declaração de um módulo como existente - Observe o namespace


"Z_EXT_SD_MYQUOTES"

✓ Sap.ui.component.load - carrega as aplicações para ser estendida por referenciar o nome e url.

✓ cus.sd.myquotations.Component.extend - o arquivo a ser estendido.

✓ Metadata - conterá as declarações de extensão.


Configuração do APP
Configuração Objeto Semântico

1) Acessar a transação SPRO no front-end e navegar na seguinte estrutura:


SAP NetWeaver > UI Technologies > SAP NetWeaver User Interface Services > Define Semantic
Objects.
2) Preencher os campos:
– Semantic Object: z_sem_empresa_nome_app
– Semantic Object Name: z_sem_empresa_nome_app
Configuração do APP
Busca do ID do Componente

1) Acessar a transação SE80


2) Buscar por: BSP Application e nome do app.
3) Selecione a página Component.js
Troubleshooting
Chrome developer tools

Use através do F12


Troubleshooting
Chrome developer tools

Use através do F12, selecione o serviço “start_up”.

Resultado
Troubleshooting
Caches

SAP Fiori content affected by multiple caches:

✓ Cache do browser
✓ Cache Web Dispatcher (opt.)
✓ Cache ICM
✓ Cache UI2
✓ UI5 index
✓ SAP Gateway OData caches
− IWFND
− IWBEP

Notas que ajudam:


2319491 – How to clean up the cache after applying changes that affect SAP Fiori apps
2116090 – UI Addon, SAP UI: Information for customers for efficient incident analysis
Troubleshooting
Error Log

Transação: /iwfnd/error_log
Translation
✓ Serviço: /sap/bc/ui2/
✓ RFC de comunicação com backend
Translation
Objetos SAP Fiori

As traduções são definidas através da transação SE63 no SAP Gateway.


1) Abrir a transação SE63
2) Escolha a opção: Translation > ABAP Objects > Shorts Texts
3) Expanda o nó Meta Objects (00) e selecione TABL Tabelas (Meta)
4) Digite o nome do objeto: *WDY_CONF_USERT2*
5) Defina a origem e o destino (tradução)
6) Idiomas e escolha Editar
7) Selecione ID de configuração para o catálogo desejado e execute
8) Digite as traduções para textos relevantes e salve.
9) Repita para a outra ID de configuração para o catálogo desejado e para o grupo
10) Pode ser necessário executar o relatório /UI2 /INVALIDATE_GLOBAL_CACHES
Translation
Objetos SAP Fiori
Translation
Label de aplicação

Traduzido através de arquivos i18n


✓ Editável através do SE80
✓ Os aplicativos padrão podem ser estendido para incluir outros arquivos do i18n da Web IDE
Observação: Invalidar o caches após tradução
/UI2/INVALIDATE_GLOBAL_CACHES
Global ICM cache (SMICM → Invalidate Globally)
Cache browser
Translation
Mensagens das aplicações

Traduzido através de arquivos i18n


✓ Editável através do SE80
✓ Os aplicativos padrão podem ser estendido para incluir outros arquivos do i18n da Web IDE
Observação: Invalidar o caches após tradução
/UI2/INVALIDATE_GLOBAL_CACHES
Global ICM cache (SMICM → Invalidate Globally)
Cache browser
Replicação de Catálogos
UI2 system alias

Os system alias são armazenados na tabela /UI2/SYSTEMALIAS. Pode ser atualizada usando a
SM30 (/UI2/V_SYSALIAS).
O sistema frontend precisa se conectar ao servidor backend durante:
✓ Tempo de design da plataforma de lançamento SAP Fiori, ao replicar catálogos de backend
para o servidor de frontend: aqui precisamos de uma conexão de RFC. Convenção de nomes:
<sysalias> _RFC, e. FIORI_BE_RFC

✓ Tempo de execução do SAPFORI launchpad, ao navegar para o aplicativo: aqui precisamos


de uma conexão HTTP ou HTTPS. Convenção de nomeação:
<sysalias> _HTTP ou <sysalias> _HTTPS, e. FIORI_BE_HTTP
Replicação de Catálogos
Mapeamento dos catálogos e system alias

Catálogo de backend personalizado do mapa para o alias do sistema de frontend, modificando


as entradas na tabela /UI2 /V_ALIASCAT usando a transação SM30.
Replicação de Catálogos
Mapeamento dos catálogos e system alias

No próximo passo, cada cliente deve preencher view /UI2/V_ALIASMAP

✓ Nesta view, você mapeia o alias do sistema com seus próprios alias de sistema
✓ Alternativamente, você pode criar diretamente o destino SM59 chamado NW_RFC,
S4CMD_RFC etc e ignorar este passo.
Replicação de Catálogos
Transação: /UI2/APPDESC_GET

Para replicação de conteúdo SAP via catálogo de negócios, é altamente recomendável a


transação /UI2/APPDESC_GET, que tentará replicar todos os catálogos contidos em / UI2 /
V_ALIASCAT
✓ Selecione o alias do sistema e a identificação do catálogo que você definiu no passo anterior
✓ O relatório deve ser executado no modo de teste antes de importar os catálogos
✓ Para executar a replicação do catálogo, siga o procedimento explicado na nota SAP
2269272
Transações Úteis

✓ /UI2/FLP – Acesso ao launchpad

✓ /UI2/FLPD_CONF – Acesso ao launchpad designer

✓ /IWFND/MAINT_SERVICE – Activate and Maintain Services

✓ /IWFND/ERROR_LOG – SAP Gateway error log

✓ /IWBEP/ERROR_LOG – SAP Backend error log

✓ /IWFND/APPS_LOG – SAP Gateway application logs

✓ SU53 – Display Authorization Data for User

✓ PFCG – Role Maintenance

✓ /UI5/THEME_TOOL – Manutenção dos temas

✓ /UI5/THEME_DESIGNER – Ferramenta para desenvolvimento de Tema

✓ SEGW – Gateway OData Builder

✓ SICF – Ativação de serviços

Você também pode gostar