SAP Fiori Elements
O SAP Fiori elements é um framework SAPUI5 que renderiza apps SAP Fiori a partir dos metadados de serviços OData, de anotações de UI e de um app descriptor, usando floorplans predefinidos como o list report e o object page em vez de views e controllers escritos à mão. O SAP Fiori elements troca liberdade de layout por design consistente, recursos corporativos integrados e menos código de UI para manter.
Resumo
- Tipo
- Framework de UI orientado a metadados, construído sobre o SAPUI5
- Camada
- Aplicações de UI
- Entradas
- Serviço OData V2 ou V4, anotações de UI (CDS ou XML), configurações do manifest.json
- Floorplans
- List report, object page, worklist, analytical list page, overview page
- Back-ends típicos
- Serviços RAP em ABAP, serviços CAP no SAP BTP
- Quem trabalha com ele
- Desenvolvedores SAP Fiori, desenvolvedores ABAP e CAP, designers de UX
- Aplica-se a
- SAP S/4HANA (todas as edições), SAP BTP
Camada: Aplicações de UIOnde se encaixa ▾
Camada: Aplicações de UI
Abrir o mapa de arquitetura →Como o SAP Fiori elements funciona?
O SAP Fiori elements transfere decisões de UI do código para os metadados:
- Um serviço OData expõe as entidades de negócio, por exemplo pedidos de compra e seus itens.
- As anotações descrevem como a UI deve apresentá-las: UI.SelectionFields para campos de filtro, UI.LineItem para colunas de tabela, UI.HeaderInfo para títulos de objetos, UI.Facets para seções do object page.
- O app descriptor (manifest.json) seleciona um template de floorplan para cada página e define opções como o carregamento inicial ou a edição em massa.
- Em tempo de execução, o framework lê metadados, anotações e descriptor e constrói as páginas, incluindo barra de filtros, variantes, tabelas, formulários, mensagens e navegação.
- Quando a página gerada não atende, os desenvolvedores adicionam extensões em vez de reescrever a página.
O trabalho principal do desenvolvedor está, portanto, no serviço e em suas anotações, não em JavaScript. O SAP Fiori elements transforma um serviço bem anotado em um app funcional, e um serviço mal anotado em um app ruim.
Quais floorplans o SAP Fiori elements oferece?
| Floorplan | Finalidade | OData V2 | OData V4 |
|---|---|---|---|
| List report | Encontrar, filtrar e agir sobre muitos objetos | Floorplan | Floorplan |
| Object page | Exibir, editar e criar um objeto | Floorplan | Floorplan |
| Worklist | Processar um conjunto conhecido de itens sem filtragem complexa | Floorplan próprio | Configuração do list report |
| Analytical list page | Analisar com gráficos e agir sobre os itens | Floorplan próprio | Configuração do list report |
| Overview page | Cards que resumem um domínio | Floorplan | Floorplan |
O OData V4 acrescenta building blocks e custom pages, para que os desenvolvedores possam combinar elementos padrão com seu próprio código SAPUI5 dentro do mesmo app. O list report combinado com o object page é a combinação clássica, frequentemente abreviada como LROP. Escolher um floorplan no SAP Fiori elements significa escolher um padrão de interação, não um template visual.
OData V2 ou V4: qual usar com o SAP Fiori elements?
A SAP recomenda o SAP Fiori elements para OData V4 em novas aplicações e afirma que a variante OData V2 continua com suporte completo. Na prática, a escolha depende de três fatores:
- Back-end: service bindings RAP podem publicar um serviço de UI como OData V2 ou V4, e o CAP disponibiliza OData V4 por padrão. Serviços construídos na SEGW são tipicamente OData V2.
- Necessidades de extensão: building blocks e o flexible programming model estão disponíveis apenas com OData V4.
- Apps existentes: um app que funciona em V2 não precisa de migração para continuar rodando; as configurações diferem entre as duas variantes, por exemplo initialLoad no V4 versus loadDataOnAppLaunch no V2.
Para um novo app customizado sobre um back-end SAP S/4HANA ou SAP BTP atual, o OData V4 é a escolha padrão no SAP Fiori elements, e o V2 é a escolha pragmática quando o serviço já existe.
Quando usar o SAP Fiori elements em vez de SAPUI5 freestyle?
O SAP Fiori elements é adequado quando a tarefa segue um padrão: buscar em uma lista, abrir um objeto, editá-lo, executar ações. O framework entrega barras de filtro, gerenciamento de variantes, tabelas, drafts, mensagens, acessibilidade e suporte a tradução sem código customizado, e a SAP mantém esses recursos atualizados ao longo das releases do SAPUI5.
O SAPUI5 freestyle é adequado quando a própria interação é incomum: um quadro de planejamento, um fluxo guiado com leitor de código, um layout altamente visual ou dados de fontes que não são OData. O código freestyle dá controle total e responsabilidade total pela manutenção.
As próprias orientações da SAP tratam os dois como combináveis, e não excludentes: comece pelo SAP Fiori elements, use building blocks e escreva código freestyle apenas para as lacunas. Um teste de decisão útil é verificar se os stakeholders aceitam o layout do floorplan pelo menos nas telas principais. O SAP Fiori elements é a melhor escolha sempre que o requisito é um business object, e não uma interação sob medida.
Como estender um app SAP Fiori elements?
As opções de extensão dependem de quem é o dono do app:
- Seu próprio app: extension points permitem que os desenvolvedores adicionem colunas, ações, seções, header facets e filtros customizados; com OData V4, o flexible programming model acrescenta building blocks e custom pages.
- Um app entregue pela SAP: adaptation projects, criados com o SAP Fiori tools, alteram ou estendem o app sem modificar o código da SAP; a adaptação por key user permite que key users reorganizem ou ocultem campos em tempo de execução.
- O lado dos dados: um novo campo geralmente começa no serviço e em suas anotações, não na UI.
A disponibilidade varia conforme a edição: no SAP S/4HANA Cloud Public Edition, verifique quais desses caminhos a SAP suporta para o app em questão. Toda extensão de um app SAP Fiori elements se torna código ou configuração que alguém precisa manter ao longo dos upgrades.
Quais são os erros comuns com o SAP Fiori elements?
- Brigar com o floorplan. Grandes volumes de código customizado para forçar um layout fora do padrão anulam o ganho de manutenção; nesse ponto, o SAPUI5 freestyle costuma ser mais honesto.
- Tratá-lo como no-code. Anotações são código em outra forma; precisam de revisão, versionamento e testes.
- Ignorar o tratamento de draft. Cenários de edição sem um serviço habilitado para draft perdem os comportamentos de retomada, bloqueio e validação que os usuários esperam.
- Não examinar os valores padrão. Carregamento inicial, edição em massa e tipos de tabela têm valores padrão que podem carregar dados demais ou de menos; defina-os deliberadamente.
- Anotar em dois lugares. As anotações podem ficar no CDS do back-end e em arquivos de anotação locais; os arquivos locais sobrepõem os metadados do serviço, e o último arquivo listado no manifest.json prevalece, então duplicidades tornam o comportamento difícil de rastrear.
A maioria dos problemas com o SAP Fiori elements são problemas de design de serviço e de anotações que só se tornam visíveis na UI.
SAP Fiori elements vs. SAPUI5 freestyle vs. SAPUI5: qual é a diferença?
| SAP Fiori elements | App SAPUI5 freestyle | SAPUI5 | |
|---|---|---|---|
| O que é | Framework que gera páginas a partir de metadados | App com views e controllers escritos à mão | O framework de UI sobre o qual ambos são construídos |
| O que os desenvolvedores escrevem | Anotações, configurações do descriptor, extensões | JavaScript ou TypeScript, views XML | Não se aplica; é a biblioteca |
| Liberdade de layout | Limitada aos floorplans e às extensões | Total | Total |
| Manutenção | Recursos do framework atualizados pela SAP | Inteiramente a cargo da equipe do app | Biblioteca versionada mantida pela SAP |
O SAPUI5 é o toolkit; o SAP Fiori elements e o SAPUI5 freestyle são duas formas de construir apps com ele.
Perguntas frequentes
SAP Fiori elements e SAPUI5 são a mesma coisa?
Não. O SAPUI5 é o framework de UI em JavaScript. O SAP Fiori elements é construído sobre o SAPUI5 e gera páginas completas a partir de metadados e anotações OData, de modo que os desenvolvedores configuram floorplans em vez de escrever views e controllers. Ambos rodam no mesmo runtime SAPUI5.
O SAP Fiori elements exige OData?
Sim. O SAP Fiori elements lê os metadados e as anotações de um serviço OData V2 ou OData V4 para construir suas páginas. Dados de outros protocolos precisam ser expostos primeiro como OData, ou o app precisa usar SAPUI5 freestyle para essa parte.
O que eram os smart templates?
Smart templates é o nome anterior do SAP Fiori elements. A documentação da SAP de releases anteriores ainda usa o termo, e profissionais da área ocasionalmente também, mas ele se refere ao mesmo framework orientado a anotações.
Posso adicionar código customizado a um app SAP Fiori elements?
Sim. Extension points permitem colunas, ações, seções e filtros customizados, e o SAP Fiori elements para OData V4 acrescenta building blocks e custom pages. Quanto mais código customizado um app contém, mais ele se comporta como um app freestyle em termos de manutenção.
Quais ferramentas são usadas para construir apps SAP Fiori elements?
O SAP Fiori tools, um conjunto de extensões para o SAP Business Application Studio e o Visual Studio Code, gera apps SAP Fiori elements, edita anotações e o descriptor e visualiza a navegação entre páginas. O serviço de back-end é tipicamente construído com RAP ou CAP.
Fontes
- SAPUI5 SDK: Developing Apps with SAP Fiori Elements
- SAPUI5 SDK: Standard Floorplans (SAP Fiori elements for OData V4)
- SAPUI5 SDK: Using SAP Fiori Elements Floorplans (OData V2)
- SAPUI5 SDK: Developing Apps with Modern Concepts — Guidance for Developers
- SAP Help Portal: Service Binding (ABAP RESTful Application Programming Model)
- Aplica-se a
- SAP S/4HANA on-premise · SAP S/4HANA Cloud Private Edition · SAP S/4HANA Cloud Public Edition · SAP BTP
- Última revisão