Fiori elements ou freestyle: como escolher, e os conceitos do front end SAP

Em projeto SAP, "fazer em Fiori" pode querer dizer coisas bem diferentes: um app gerado a partir de anotações em poucas horas, um app escrito do zero em JavaScript ao longo de semanas, ou só uma transação antiga aberta num tile do launchpad. Saber a diferença ajuda a orçar, a escolher o caminho e a não criar, sem perceber, uma modificação num app da SAP.

Fiori é o design, SAPUI5 é a tecnologia

SAP Fiori é o sistema de design da SAP: diretrizes, padrões de página, componentes visuais e temas. O tema atual se chama Horizon. Fiori não é linguagem nem framework.

SAPUI5 é o framework JavaScript que a SAP usa para construir os apps Fiori. Ele vem dentro dos produtos SAP: no S/4HANA, como o componente SAP_UI do servidor de front end, e no SAP BTP. Existe também o OpenUI5, a versão de código aberto (licença Apache 2.0). Os dois têm o mesmo núcleo, mas o OpenUI5 não traz as bibliotecas proprietárias, e entre elas está o Fiori elements inteiro.

Cada release do S/4HANA tem a sua versão de SAPUI5 com manutenção longa: 1.108 no 2022, 1.120 no 2023 e 1.136 no 2025. Um app precisa rodar na versão do sistema do cliente, e não na versão mais nova publicada na internet.

Fiori elements: a tela que nasce das anotações

No Fiori elements, o time não escreve as telas. Ele descreve o que quer mostrar em anotações no serviço OData (que campos aparecem na lista, quais viram filtro, como a página de detalhe se divide), e o framework monta a tela na hora de abrir o app, seguindo um floorplan, um modelo de página pronto:

A vantagem é que o comportamento padrão vem pronto: filtros, variantes salvas, rascunho (draft), exportação para planilha, layout responsivo e acessibilidade. As melhorias de design chegam com o upgrade do SAPUI5, sem retrabalho no app. A manutenção fica, nas palavras da SAP, "more on SAP side".

O Fiori elements existe em duas gerações: a de OData V2, ainda suportada e presente em muitos apps standard, e a de OData V4, que a SAP recomenda para tudo que for novo.

Freestyle: tudo escrito pelo time

No freestyle, o time escreve as telas (views em XML) e a lógica (controllers em JavaScript ou TypeScript) com os controles do SAPUI5. O controle é total: qualquer layout, qualquer fonte de dados, inclusive fora do OData. Em troca, cada comportamento que o Fiori elements daria pronto precisa ser escrito, testado e mantido, e a manutenção fica do lado do cliente ou do parceiro.

O meio-termo: o Flexible Programming Model

Desde o SAPUI5 1.94, o Fiori elements para OData V4 ganhou o Flexible Programming Model, que dá ao app padrão as liberdades do freestyle nos pontos onde ele precisa. São três recursos:

• pontos de extensão: colunas, ações, seções ou páginas inteiras próprias, declaradas no manifest.json;
• building blocks: os pedaços do Fiori elements (tabela, barra de filtros, campo, formulário, gráfico) usados dentro de uma página própria, ainda configurados pelas anotações;
• controller extensions: código próprio que reage aos eventos do framework.

Com uma custom page, dá para montar uma página fora dos floorplans usando building blocks e continuar dentro do Fiori elements, com rascunho, filtros e personalização prontos. Os building blocks são os sucessores dos antigos smart controls, que só funcionam com OData V2.

Como escolher

A SAP resume a recomendação numa frase: "as much SAP Fiori elements as possible and as much freestyle SAPUI5 as needed".

O erro mais comum, segundo o próprio time da SAP, é descartar o floorplan cedo demais: requisitos que caberiam num List Report com pequenas concessões viram freestyle, e a economia de desenvolvimento e de manutenção se perde. O contrário também acontece: forçar no Fiori elements um app que foge muito do padrão custa mais que escrevê-lo em freestyle.

De onde vêm os dados: OData, RAP e anotações

Os apps Fiori leem e gravam dados por serviços OData. No S/4HANA, o caminho atual para criar esses serviços é o RAP (ABAP RESTful Application Programming Model):

• as CDS views definem os dados;
• a service definition diz quais entidades o serviço expõe;
• o service binding publica o serviço num protocolo, OData V2 ou V4, para uso por uma tela ou como API.

Os caminhos anteriores ainda existem em muito sistema e são legado para desenvolvimento novo:

As anotações que o Fiori elements lê podem ficar em dois lugares:

• no backend, na própria CDS ou numa metadata extension (um arquivo de anotações separado da view). Valem para todo app que usa o serviço;
• no app, como anotação local. Valem só para aquele app e se sobrepõem às do backend, o que é útil quando o serviço não é seu.

Onde o app aparece: o launchpad

No S/4HANA, os apps são abertos pelo SAP Fiori launchpad. Cada app aparece como um tile; os tiles ficam em catálogos, que são atribuídos aos perfis dos usuários. O layout atual organiza a tela inicial em espaços e páginas; a home page antiga, em grupos, está descontinuada. No SAP BTP, o papel de ponto de entrada é do SAP Build Work Zone, que pode reunir apps do S/4HANA, apps próprios e de terceiros.

O launchpad abre também transações do SAP GUI (pelo SAP GUI for HTML) e aplicações Web Dynpro, com o tema visual do Fiori. Elas aparecem como tiles, mas não são apps Fiori: por baixo, continuam sendo a tecnologia clássica. O Fiori Apps Reference Library da SAP mostra, para cada app, o tipo de tecnologia, o ID e tudo o que precisa ser ativado para usá-lo.

Estender um app standard sem modificação

Um app Fiori da SAP é um objeto da SAP no sistema. Alterar o código dele diretamente é modificação, com o mesmo risco de upgrade de qualquer outra modificação. Os caminhos sem modificação são:

As duas primeiras usam o SAPUI5 flexibility, que a SAP descreve como "modification-free": o app original não muda, e os ajustes são aplicados por cima dele quando a tela abre. Desde o S/4HANA 1909, a SAP indica o adaptation project como a forma de estender os seus apps; o antigo extension project ficou só por compatibilidade.

Mesmo sem modificação, a extensão tem regras para sobreviver ao upgrade: usar só controles com ID estável, não chamar métodos privados do app da SAP e acompanhar as versões novas do app base. Existe um check de ATC (UI5_BASE_APP_VERS) que avisa quando o app base de um adaptation project foi atualizado e a variante precisa ser revista.

Fiori e Clean Core

Na classificação de tecnologias que a SAP publica para o Clean Core (nota 3578329), desenvolvimento Fiori com RAP e service binding é nível A. Os serviços criados no Gateway Service Builder e as aplicações Web Dynpro são nível B, e o SAP Screen Personas sobre Web Dynpro e SAP GUI é nível D. Os níveis estão explicados em O que é Clean Core, e por que ele virou prioridade.

Um cuidado com a sigla: na mesma nota, "FPM" aparece ao lado de Web Dynpro e se refere ao Floorplan Manager, uma tecnologia clássica de Web Dynpro. Não tem relação com o Flexible Programming Model do Fiori elements.

Um app Fiori em RAP sobre CDS liberadas é o caminho natural para tirar uma tela clássica do nível B: o motivo de um programa com tela não passar do B está em Por que um programa com tela clássica para no nível B, e o que muda no ABAP do lado do servidor, em ABAP Cloud: o que muda em relação ao ABAP clássico.

Confusões comuns

Fontes

• SAPUI5 Demo Kit (ui5.sap.com): SAPUI5 vs. OpenUI5, Developing Apps with SAP Fiori Elements, Developing Apps with Modern Concepts: Guidance for Developers, Standard Floorplans, Building Blocks, OData V4 Model, SAPUI5 Flexibility: Adapting UIs Made Easy, Extending Delivered Apps Using Adaptation Projects e Extending Apps.
• SAP, SAP Design System (SAP Fiori for Web).
• SAP Help: ABAP RESTful Application Programming Model, Service Binding, ABAP CDS – Metadata Extensions e o guia do SAP Fiori Launchpad.
• SAP Fiori tools (documentação no GitHub SAP-docs/btp-fiori-tools): Capabilities Overview, Supported Floorplans, Upgrade Safe Compatibility Rules e Check Whether Your Adaptation Project Is Up-To-Date with Base App Upgrades.
• Stefanie Hager (SAP), Leverage the flexible programming model to extend your SAP Fiori elements apps for OData V4, SAP Community, 2021.
• Peter Spielvogel (SAP), How to create an SAP Fiori app using SAP Fiori elements, SAPUI5 freestyle, or a mix of both, SAP Community, 2022.
• SAP Fiori Apps Reference Library, seção de extensibilidade das fichas dos apps.
• SAP Note 3578329 (classificação de tecnologias para Clean Core).