SAP Fiori Elements e floorplans

UI Integration Cards

UI integration cards são cards SAPUI5 definidos de forma declarativa em um arquivo manifest.json que descreve o cabeçalho, o conteúdo, a fonte de dados e as ações, para que um host como o SAP Build Work Zone ou o My Home possa renderizá-los sem um app completo. Os UI integration cards mostram conteúdo conciso e acionável e levam ao app por trás deles.

Resumo

Tipo: Widget de UI definido por manifest (sap.ui.integration.widgets.Card)
Camada: Ponto de entrada e experiência, construído como conteúdo de UI
Tipos de card: List, Table, Object, Analytical, Timeline, Calendar; Component; WebPage; Adaptive
Hosts: SAP Build Work Zone, My Home, Joule, SAP Mobile Start
Construído com: SAP Business Application Studio (template UI Integration Card), Card Explorer
Quem trabalha com ele: Desenvolvedores SAP Fiori e SAP BTP, administradores de sites
Aplica-se a: SAP BTP; SAP S/4HANA via My Home (todas as opções de implantação)

Camada: Ponto de entrada e experiênciaOnde se encaixa ▾

Camada: Ponto de entrada e experiência

Também envolve: Aplicações de UI

Abrir o mapa de arquitetura →

Como funciona um UI integration card?

Um UI integration card separa o que o card mostra de onde ele é mostrado:

O desenvolvedor do card escreve um manifest.json com uma seção sap.card que define o tipo de card, o cabeçalho (título, subtítulo, ícone, status ou um KPI numérico), o conteúdo, a requisição de dados e as ações, como a navegação para um app.
O host, por exemplo um site do SAP Build Work Zone, incorpora o card, decide seu tamanho e posição e resolve a conectividade, normalmente por meio de destinations configuradas no lado do host.
Em tempo de execução, o controle de card do SAPUI5 lê o manifest, carrega os dados e renderiza um contêiner com uma área de cabeçalho e uma área de conteúdo.

Como a definição é declarativa, o mesmo card pode ser reutilizado em vários hosts. O site de compras da Alder Manufacturing poderia mostrar um list card de entregas atrasadas da Bright Freight que abre o app completo. Um UI integration card é, portanto, uma peça de conteúdo portátil, e não um app por si só.

Quais tipos de UI integration card existem?

Tipo de card	O que é	Uso típico
Declarativos: List, Table, Object, Analytical, Timeline, Calendar	Configurados inteiramente no manifest	A maioria dos cards de negócio: listas, KPIs, gráficos, um objeto
Component card	Incorpora um pequeno componente SAPUI5 com código próprio	Interações que os tipos declarativos não conseguem expressar
WebPage card	Mostra uma página web externa	Incorporar conteúdo que não é SAPUI5
Adaptive card	Renderiza o formato aberto Adaptive Card	Reutilização de Adaptive Cards existentes; a SAP recomenda os tipos declarativos em vez deste

Cards declarativos ainda podem executar lógica customizada por meio de extensões JavaScript. A comparação da SAP também ressalta que esses cards diferem do controle freestyle sap.f.Card e dos cards de overview page, que pertencem ao SAP Fiori elements. Escolher primeiro um UI integration card declarativo mantém o card portátil entre hosts e edições.

Onde os UI integration cards podem ser usados?

SAP Build Work Zone: as duas edições executam cards em páginas de site. Cards declarativos têm suporte completo nas edições standard e advanced; alguns recursos de component card funcionam apenas na advanced edition. Na standard edition, um card chega aos usuários por meio de um content package.
My Home no SAP S/4HANA: os usuários podem criar cards de insights a partir de tabelas de list report e gráficos de analytical list page em apps SAP Fiori elements, depois que um administrador ativa o My Home; a SAP documenta os cards criados a partir de uma tabela de list report como integration cards. Isso se aplica ao SAP S/4HANA Cloud Public Edition e ao SAP S/4HANA, em que o My Home está disponível a partir da release 2023 FPS01.
Joule e mobile: o Joule pode retornar manifests de card em suas respostas, e a SAP lista o SAP Mobile Start entre os consumidores de cards. O app mobile Joule Work filtra os component cards.
Outras soluções SAP: por exemplo, o SAP SuccessFactors suporta UI integration cards customizados em algumas áreas do perfil.

Onde um UI integration card pode aparecer depende do host, da edição dele e do tipo de card, e não apenas do card.

Por que um UI integration card não é renderizado?

Recursos de component card na standard edition. A SAP documenta que um card que usa um recurso reservado ao SAP Build Work Zone, advanced edition aparece na galeria de conteúdo e no editor de páginas, mas falha em tempo de execução na standard edition. Verifique a tabela de recursos suportados da edição de destino.
Filtragem no mobile. Component cards não são exibidos no app mobile Joule Work. Use um card declarativo se o mobile for importante.
Destination ausente. As requisições de dados são resolvidas pelo host. Uma destination ausente na subaccount deixa o card vazio ou com erro.
Fora de um content package. Na standard edition, a SAP exige que um card implantado seja adicionado a um content package antes de poder ser usado em um site.
Limites do editor. A SAP observa que o editor de UI cards do Work Zone suporta recursos de card apenas até uma versão específica do SAPUI5; consulte a documentação do Work Zone para saber a versão atual.

A maioria das falhas de UI integration cards são problemas de configuração do host, e não erros no manifest do card.

UI integration card vs. card de overview page vs. tile: qual é a diferença?

	UI integration card	Card de overview page	Tile
O que é	Card definido por manifest, independente do host	Card dentro de um overview page do SAP Fiori elements	Entrada do launchpad que inicia um app
Definido por	manifest.json do card (sap.card)	App descriptor do overview page e anotações OData	Catálogo técnico, com um target mapping
Onde aparece	SAP Build Work Zone, My Home, Joule e outros hosts	Apenas no seu app de overview page	Pages do SAP Fiori Launchpad e sites do Work Zone
Conteúdo	Listas, tabelas, gráficos, detalhes de objeto, ações	Listas, tabelas e gráficos de serviços OData	Título, ícone e, opcionalmente, um número

Um UI integration card é conteúdo portátil para vários hosts, um card de overview page vive dentro de um app SAP Fiori elements, e um tile apenas inicia um app.

Perguntas frequentes

UI integration cards e cards de overview page são a mesma coisa?

Não. A SAP afirma explicitamente que os UI integration cards não têm relação com os cards do overview page do SAP Fiori elements. Os cards de overview page são configurados dentro de um app de overview page, enquanto os UI integration cards são definidos pelo próprio manifest e podem ser incorporados em diferentes hosts.

Os UI integration cards precisam do SAP Build Work Zone?

Não. O SAP Build Work Zone é o host mais comum, mas os UI integration cards também aparecem no My Home do SAP S/4HANA, nas respostas do Joule, no SAP Mobile Start e em outras soluções SAP. Qualquer app SAPUI5 também pode incorporar um card.

Como criar um UI integration card?

No SAP Business Application Studio, um dev space com a extensão Development Tools for SAP Build Work Zone oferece um template de projeto UI Integration Card. O desenvolvedor edita o manifest, visualiza o card e o implanta no SAP Build Work Zone ou o baixa como arquivo ZIP.

Devo usar um card declarativo ou um component card?

Comece com um card declarativo. Os tipos declarativos cobrem listas, tabelas, objetos e gráficos, rodam nas duas edições do SAP Build Work Zone e no mobile e permitem extensões JavaScript. Escolha um component card apenas para interações que os tipos declarativos não conseguem expressar, e verifique antes o suporte da edição.

Fontes

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: 2026-11-09

Overview Page (OVP)SAP Build Work Zone My Home