SAP Fiori Elements y floorplans

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 ▾
Dónde se ubica: L1 · Punto de entrada y experienciaCapa: Punto de entrada y experiencia. También abarca: Aplicaciones de UI.L1L2L3L4L5L6BTP

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:

  1. El desarrollador de la card escribe un manifest.json con una sección sap.card que 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.
  2. 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.
  3. 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 cardQué esUso típico
Declarativas: List, Table, Object, Analytical, Timeline, CalendarSe configuran íntegramente en el manifestLa mayoría de las cards de negocio: listas, KPI, gráficos, un objeto
Component cardIntegra un pequeño componente SAPUI5 con su propio códigoInteracciones que los tipos declarativos no pueden expresar
WebPage cardMuestra una página web externaIntegrar contenido que no es SAPUI5
Adaptive cardRepresenta el formato abierto Adaptive CardReutilizar 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?

  1. 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.
  2. 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.
  3. 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.
  4. 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.
  5. 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 cardCard de overview pageTile
Qué esCard definida por un manifest, independiente del hostCard dentro de una overview page de SAP Fiori elementsEntrada del launchpad que inicia una aplicación
Se define enmanifest.json de la card (sap.card)App descriptor de la overview page y anotaciones ODataTechnical catalog, con un target mapping
Dónde apareceSAP Build Work Zone, My Home, Joule y otros hostsSolo en su aplicación overview pagePages del SAP Fiori Launchpad y sitios de Work Zone
ContenidoListas, tablas, gráficos, detalles de objetos, accionesListas, tablas y gráficos de servicios ODataTí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

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

SAP, SAP Fiori, SAPUI5, SAP S/4HANA, SAP BTP y los demás productos y servicios de SAP mencionados son marcas comerciales o marcas registradas de SAP SE (o de una empresa afiliada de SAP) en Alemania y otros países. Esta guía es independiente y no está afiliada, patrocinada ni respaldada por SAP SE.