UI Integration Cards
Las UI integration cards son cards SAPUI5 definidas de forma declarativa en un archivo manifest.json que describe la cabecera, el contenido, la fuente de datos y las acciones, de modo que un host como SAP Build Work Zone o My Home puede mostrarlas sin una aplicación completa. Las UI integration cards muestran contenido conciso y accionable, y enlazan con la aplicación que hay detrás.
Datos clave
- Tipo
- Widget de UI definido mediante manifest (sap.ui.integration.widgets.Card)
- Capa
- Punto de entrada y experiencia; se construye como contenido 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
- Construido con
- SAP Business Application Studio (plantilla UI Integration Card), Card Explorer
- Quién trabaja con ello
- Desarrolladores SAP Fiori y SAP BTP, administradores de sitios
- Se aplica a
- SAP BTP; SAP S/4HANA a través de My Home (todas las opciones de implementación)
Capa: Punto de entrada y experienciaDónde se ubica ▾
Capa: Punto de entrada y experiencia
También abarca: Aplicaciones de UI
Abrir el mapa de arquitectura →¿Cómo funciona una UI integration card?
Una UI integration card separa lo que muestra la card del lugar donde se muestra:
- El desarrollador de la card escribe un manifest.json con una sección
sap.cardque define el tipo de card, la cabecera (título, subtítulo, icono, estado o un KPI numérico), el contenido, la petición de datos y las acciones, como la navegación a una aplicación. - El host, por ejemplo un sitio de SAP Build Work Zone, integra la card, decide su tamaño y su posición y resuelve la conectividad, normalmente mediante destinations configuradas en el lado del host.
- En tiempo de ejecución, el control de card de SAPUI5 lee el manifest, carga los datos y representa un contenedor con un área de cabecera y un área de contenido.
Como la definición es declarativa, la misma card puede reutilizarse en varios hosts. El sitio de compras de Alder Manufacturing podría mostrar una card de lista con las entregas vencidas de Bright Freight que abra la aplicación completa. Por tanto, una UI integration card es una pieza de contenido portable, no una aplicación propiamente dicha.
¿Qué tipos de UI integration cards existen?
| Tipo de card | Qué es | Uso típico |
|---|---|---|
| Declarativas: List, Table, Object, Analytical, Timeline, Calendar | Se configuran íntegramente en el manifest | La mayoría de las cards de negocio: listas, KPI, gráficos, un objeto |
| Component card | Integra un pequeño componente SAPUI5 con su propio código | Interacciones que los tipos declarativos no pueden expresar |
| WebPage card | Muestra una página web externa | Integrar contenido que no es SAPUI5 |
| Adaptive card | Representa el formato abierto Adaptive Card | Reutilizar Adaptive Cards existentes; SAP recomienda en su lugar los tipos declarativos |
Las cards declarativas pueden ejecutar igualmente lógica personalizada mediante extensiones JavaScript. La comparación de SAP también subraya que estas cards son distintas del control freestyle sap.f.Card y de las cards de la overview page, que pertenecen a SAP Fiori elements. Elegir primero una UI integration card declarativa mantiene la card portable entre hosts y ediciones.
¿Dónde se pueden usar las UI integration cards?
- SAP Build Work Zone: ambas ediciones ejecutan cards en las páginas del sitio. Las cards declarativas tienen soporte completo en la standard edition y en la advanced edition; algunas funciones de las component cards solo funcionan en la advanced edition. En la standard edition, una card llega a los usuarios a través de un content package.
- My Home en SAP S/4HANA: los usuarios pueden crear cards de insights a partir de tablas de list report y gráficos de analytical list page en aplicaciones SAP Fiori elements, una vez que un administrador ha habilitado My Home; SAP documenta las cards creadas a partir de una tabla de list report como integration cards. Esto se aplica a SAP S/4HANA Cloud Public Edition y a SAP S/4HANA, donde My Home está disponible a partir de la release 2023 FPS01.
- Joule y dispositivos móviles: Joule puede devolver manifests de cards en sus respuestas, y SAP incluye SAP Mobile Start entre los consumidores de cards. La aplicación móvil Joule Work filtra las component cards.
- Otras soluciones de SAP: por ejemplo, SAP SuccessFactors admite UI integration cards personalizadas en algunas áreas del perfil.
Dónde puede aparecer una UI integration card depende del host, de su edición y del tipo de card, no solo de la card.
¿Por qué no se muestra una UI integration card?
- Funciones de component card en la standard edition. SAP documenta que una card que usa una función reservada para SAP Build Work Zone, advanced edition aparece en la galería de contenido y en el editor de páginas, pero falla en tiempo de ejecución en la standard edition. Compruebe la tabla de funciones admitidas para la edición de destino.
- Filtrado en móviles. Las component cards no se muestran en la aplicación móvil Joule Work. Use una card declarativa si el móvil es importante.
- Destination inexistente. Las peticiones de datos se resuelven a través del host. Una destination que falta en la subcuenta deja la card vacía o con error.
- No incluida en un content package. En la standard edition, SAP exige que una card desplegada se añada a un content package antes de poder usarla en un sitio.
- Límites del editor. SAP indica que el editor de UI cards de Work Zone solo admite funciones de card hasta una versión concreta de SAPUI5; consulte la documentación de Work Zone para conocer la actual.
La mayoría de los fallos de las UI integration cards son problemas de configuración del host, más que errores en el manifest de la card.
¿En qué se diferencian una UI integration card, una card de overview page y un tile?
| UI integration card | Card de overview page | Tile | |
|---|---|---|---|
| Qué es | Card definida por un manifest, independiente del host | Card dentro de una overview page de SAP Fiori elements | Entrada del launchpad que inicia una aplicación |
| Se define en | manifest.json de la card (sap.card) | App descriptor de la overview page y anotaciones OData | Technical catalog, con un target mapping |
| Dónde aparece | SAP Build Work Zone, My Home, Joule y otros hosts | Solo en su aplicación overview page | Pages del SAP Fiori Launchpad y sitios de Work Zone |
| Contenido | Listas, tablas, gráficos, detalles de objetos, acciones | Listas, tablas y gráficos de servicios OData | Título, icono y, opcionalmente, un número |
Una UI integration card es contenido portable para muchos hosts, una card de overview page vive dentro de una aplicación SAP Fiori elements y un tile solo inicia una aplicación.
Preguntas frecuentes
¿Las UI integration cards son lo mismo que las cards de una overview page?
No. SAP indica de forma explícita que las UI integration cards no están relacionadas con las cards de la overview page de SAP Fiori elements. Las cards de overview page se configuran dentro de una aplicación overview page, mientras que las UI integration cards se definen mediante su propio manifest y pueden integrarse en distintos hosts.
¿Las UI integration cards necesitan SAP Build Work Zone?
No. SAP Build Work Zone es el host más habitual, pero las UI integration cards también aparecen en My Home en SAP S/4HANA, en las respuestas de Joule, en SAP Mobile Start y en otras soluciones de SAP. Cualquier aplicación SAPUI5 también puede integrar una card.
¿Cómo se crea una UI integration card?
En SAP Business Application Studio, un dev space con la extensión Development Tools for SAP Build Work Zone ofrece una plantilla de proyecto UI Integration Card. El desarrollador edita el manifest, obtiene una vista previa y despliega la card en SAP Build Work Zone o la descarga como archivo ZIP.
¿Debo usar una card declarativa o una component card?
Empiece con una card declarativa. Los tipos declarativos cubren listas, tablas, objetos y gráficos, se ejecutan en ambas ediciones de SAP Build Work Zone y en dispositivos móviles, y admiten extensiones JavaScript. Elija una component card solo para interacciones que los tipos declarativos no pueden expresar, y compruebe antes el soporte de la edición.
Fuentes
- SAP Help Portal: Cards — integration cards vs. freestyle cards (SAPUI5)
- SAP Help Portal: Developing UI Integration Cards (SAP Build Work Zone, standard edition)
- SAP Help Portal: Supported Declarative and Component Card Features (SAP Build Work Zone)
- SAP Help Portal: Creating Cards for the Insights Cards Section of My Home (SAP Fiori elements for OData V4)
- SAPUI5 SDK: Card Explorer (UI integration cards)
- Se aplica a
- SAP S/4HANA on-premise · SAP S/4HANA Cloud Private Edition · SAP S/4HANA Cloud Public Edition · SAP BTP
- Última revisión