Mockup Fiori: Prototipe Telas SAP Antes de Desenvolver 2026

Prototipar telas SAP antes de iniciar o desenvolvimento ABAP é uma das práticas que mais reduz retrabalho em projetos de implementação. Um mockup Fiori bem feito alinha expectativas do usuário-chave, valida regras de negócio com o funcional e serve de insumo direto para a Especificação Funcional (FSD). Apesar disso, a maioria dos projetos ainda pula essa etapa — seja por falta de ferramenta adequada, seja por pressão de cronograma. Este guia mostra como estruturar a prototipagem de telas SAP Fiori de forma prática, técnica e integrada ao ciclo SAP Activate.

O Que É um Mockup Fiori e Por Que Ele Importa

Um mockup Fiori é uma representação visual não funcional de uma tela SAP que segue as SAP Fiori Design Guidelines. Ele simula layout, componentes SAPUI5 (SmartFilterBar, SmartTable, ObjectPage, etc.) e fluxo de navegação — sem escrever uma linha de código.

No contexto de um projeto SAP, o mockup cumpre quatro papéis críticos:

1. Validação com o usuário-chave antes do desenvolvimento, evitando descobertas tardias no ciclo de testes.
2. Insumo para a FSD (Functional Specification Document): o arquiteto descreve campos, ações e validações tendo uma referência visual concreta.
3. Alinhamento entre funcional e ABAP Developer: o desenvolvedor recebe um wireframe anotado em vez de um texto descritivo ambíguo.
4. Evidência de escopo para GAP RICEFW: quando o requisito não existe no standard, o mockup documenta o que precisa ser construído.

Ignorar essa etapa tipicamente resulta em ciclos de correção no período de testes integrados (SIT/UAT) — momento em que o custo de mudança é muito mais alto.

Fiori Horizon e os Componentes que Você Precisa Conhecer

Desde o SAP S/4HANA 2023, o padrão visual adotado é o Fiori Horizon (anteriormente Belize, depois Quartz). Um mockup deve refletir esse padrão para não criar expectativas erradas no usuário.

Os componentes mais comuns em telas transacionais SAP que você vai prototipar:

Componente SAPUI5	Uso Típico	Observação
SmartFilterBar	Filtros de pesquisa em List Reports	Baseado em OData annotations
SmartTable	Grade de resultados	Suporta variantes de exibição
ObjectPage	Detalhe de entidade (Pedido, FO)	Seções e subseções colapsáveis
SmartForm	Formulário de edição	Gerado via CDS annotations
IconTabBar	Abas dentro de ObjectPage	Ex: Dados Gerais / Itens / Parceiros
MessagePopover	Exibição de erros e warnings	Padrão obrigatório em apps transacionais
OverflowToolbar	Barra de ações	Botões que colapsam em telas pequenas

Conhecer esses componentes é pré-requisito para criar um mockup que seja tecnicamente realizável — e não uma tela bonita que o desenvolvedor vai precisar desmontar.

Erros Comuns ao Prototipar Telas SAP

A maioria dos mockups Fiori que chegam para desenvolvimento têm problemas recorrentes:

• Ignorar o modelo de dados: prototipar um campo que não existe em nenhuma tabela SAP (/SCMTMS/D_TORROT, VBAK, LIKP, etc.) sem sinalizar que é um campo customizado gera surpresa na especificação técnica.
• Usar padrões visuais de outros sistemas: layouts com cards, dashboards complexos ou navegação lateral não são padrão Fiori e exigem desenvolvimento customizado significativo.
• Não anotar comportamentos: um mockup estático sem anotações de regra ("campo obrigatório quando status = Em Trânsito") é inútil para o FSD.
• Ignorar responsividade: o Fiori é responsivo por definição. Um mockup que só considera desktop não reflete o comportamento real em tablets.
• Não validar com o arquiteto ABAP: campos de lookup (F4 Help) e ações que disparam BAdIs precisam estar sinalizados para que o técnico estime corretamente.

Fugir desses erros já coloca seu projeto na frente de boa parte das implementações que chegam ao go-live com débito técnico acumulado.

Passo a Passo: Como Criar um Mockup Fiori Eficiente

Seguir um processo estruturado garante que o mockup entregue valor real ao projeto, não apenas uma figura bonita em PowerPoint.

1. Defina o Padrão de App Fiori

Antes de desenhar qualquer tela, classifique o app no catálogo Fiori:

• List Report + Object Page: padrão para entidades transacionais (ordens, documentos, cadastros).
• Overview Page: padrão para visões gerenciais com múltiplos KPIs.
• Worklist: padrão para filas de trabalho (aprovações, itens pendentes).
• Analytical List Page (ALP): padrão para análise com filtros dinâmicos.

Essa decisão define a estrutura do mockup inteiro. Escolher errado aqui força retrabalho desde a camada de anotações CDS.

2. Mapeie os Campos e Suas Origens

Liste cada campo que aparecerá na tela com:

• Nome do campo
• Tabela/CDS View de origem (ex: /SCMTMS/D_TORROT-TORROT_GUID)
• Tipo (string, quantidade, data, código)
• Obrigatório / editável / somente leitura
• Se precisa de F4 Help e qual o domínio de valores

Esse mapeamento vira a seção de "Campos" da FSD e é o que permite ao desenvolvedor criar as annotations CDS corretas (@UI.lineItem, @UI.selectionField, @UI.facet).

3. Anote Regras de Negócio Diretamente no Mockup

Use balões, setas ou uma legenda numerada para mapear:

• Validações de campo
• Comportamento condicional (campo X fica visível quando Y = valor)
• Ações e seus efeitos (botão "Confirmar" → chama função Z → atualiza status)
• Mensagens de erro esperadas

Essas anotações são o que transforma um wireframe em documentação técnica utilizável.

4. Crie o Fluxo de Navegação

Mostre como o usuário navega entre as telas: de qual app ele vem, para onde vai ao clicar em um item da lista, quais ações abrem diálogos ou navegam para outra ObjectPage. Esse mapa de navegação é fundamental para o arquiteto definir o número de apps e rotas no SAP Fiori Launchpad.

5. Valide com Usuário-Chave e Arquiteto ABAP

O mockup precisa passar por duas validações obrigatórias antes de virar FSD:

• Usuário-chave: confirma que o fluxo cobre o processo operacional real.
• Arquiteto ABAP / Desenvolvedor Fiori: confirma viabilidade técnica e identifica pontos que demandam RAP (RESTful Application Programming) ou extensibilidade via BAdI.

Como a IA Acelera a Prototipagem Fiori

A etapa de prototipagem historicamente consumia dias de trabalho manual — criando componentes no Figma, Adobe XD ou mesmo PowerPoint, sem garantia de aderência ao padrão Fiori. Com IA especializada em SAP, esse ciclo muda:

• Geração automática de wireframes a partir da descrição do processo ("tela de criação de Freight Order com dados do parceiro de transporte e itens de carga").
• Sugestão de padrão de app com base no tipo de entidade e perfil do usuário.
• Mapeamento automático de campos para tabelas SAP conhecidas, sinalizando os que precisam de extensão Z.
• Geração de anotações CDS (@UI, @OData) como ponto de partida para o desenvolvedor.
• Exportação direta para FSD: o mockup anotado vira seção da Especificação Funcional sem retrabalho de formatação.

Essa integração entre prototipagem e documentação é o que a OrkestraFlow entrega no módulo de Designer Fiori — a IA entende componentes SAPUI5, padrões Horizon e gera ABAP/CDS como insumo de desenvolvimento, não como código de produção direto.

Para projetos com múltiplos GAPs RICEFW do tipo Enhancement (E) e New Development (N), essa aceleração é ainda mais relevante. Veja como o processo de GAP Analysis se conecta à prototipagem Fiori.

Mockup Fiori vs Tela Standard: Quando Prototipar

Nem todo requisito precisa de mockup. Saber quando prototipar poupa tempo do projeto:

Cenário	Precisa de Mockup?
App Fiori standard sem customização	Não — use o app direto
App standard com campos Z adicionais	Sim — documentar campos e posicionamento
New Development (GAP tipo N)	Sim — obrigatório para FSD
Extensão via Key User (in-app extensibility)	Sim — validar o que o Key User Tools suporta
Relatório analítico em BW/SAC	Sim — layout de KPIs e filtros
Transação SAPGUI legada (sem plano Fiori)	Não se aplica

A regra geral: qualquer desenvolvimento RICEFW que resulte em interface de usuário precisa de mockup validado antes da FSD ser aprovada.

Integração do Mockup ao Ciclo SAP Activate

No SAP Activate, a prototipagem Fiori se encaixa na fase Explore (equivalente ao antigo Fit-Gap do ASAP). O fluxo ideal é:

1. Fit-to-Standard Workshop → identifica processos sem cobertura no standard.
2. GAP documentado no backlog RICEFW → classificado como Enhancement ou New Development.
3. Mockup criado pelo funcional → validado com usuário-chave.
4. FSD gerada a partir do mockup → aprovada pelo cliente.
5. Desenvolvimento ABAP/RAP inicia com base na FSD e wireframe anotado.
6. Casos de teste gerados a partir dos cenários mapeados no mockup.

Seguir esse fluxo elimina o "achismo" que tipicamente aparece no SIT, quando o desenvolvedor entrega uma tela que o usuário não reconhece como o que pediu.

Para saber mais sobre como automatizar a geração de casos de teste a partir dos fluxos documentados, veja o artigo sobre Teste Automatizado SAP.

Ferramentas para Criar Mockup Fiori

O mercado oferece algumas opções, cada uma com trade-offs relevantes:

Ferramenta	Aderência ao Fiori	Integração SAP	Curva de Aprendizado
SAP Build (ex-AppGyver)	Alta	Nativa	Média
Figma com UI5 Web Components kit	Média	Nenhuma	Alta
Balsamiq / Miro	Baixa	Nenhuma	Baixa
PowerPoint / Keynote	Baixa	Nenhuma	Baixa
OrkestraFlow Designer Fiori	Alta	Nativa (CDS/ABAP)	Baixa

A diferença principal entre usar Figma ou PowerPoint e uma ferramenta com domínio SAP é que as primeiras produzem imagens — as segundas produzem documentação técnica aproveitável.

Para referência técnica sobre os padrões visuais SAP, o SAP Fiori Design Guidelines e o SAP Help Portal são as fontes oficiais que todo consultor deve consultar antes de propor qualquer desvio de padrão.

Conclusão

A prototipagem de telas Fiori não é burocracia de projeto — é a diferença entre um desenvolvimento que converge e um que volta para retrabalho no UAT. Quando o mockup está anotado, validado com o usuário-chave e conectado à FSD, o desenvolvedor ABAP tem clareza, o funcional tem rastreabilidade e o cliente tem previsibilidade.

Com IA especializada em SAP Fiori, esse ciclo que levava dias pode ser concluído em horas — sem abrir mão da aderência técnica ao padrão Horizon, às annotations CDS e ao modelo de dados SAP.

---

Começar 30 dias grátis e veja como o Designer Fiori da OrkestraFlow gera wireframes anotados, mapeia campos para tabelas SAP e exporta direto para sua FSD — tudo em um único fluxo de trabalho.