Cómo configurar una página de objetos de Fiori Elements como una página de detalles de la aplicación SAP My Inbox

Introducción:

Este blog muestra el enfoque que tomé para lograr el requisito de personalizar la aplicación SAP My Inbox. Aunque se trata de muchas posibilidades de extensión, como extender la página de detalles (enfoque de extensión regular) o agregar más atributos a la página de detalles. Pero lograr el requisito cuando su aplicación es Fiori Elements fue un desafío.

Requisito:

Como parte de otros requisitos, habíamos desarrollado una aplicación Página de lista -> Página de objeto. Para la página de detalles de la aplicación My Inbox, queríamos reutilizar esta página de objetos desarrollada anteriormente. En lugar de crear una nueva aplicación para la página de detalles, queríamos reutilizarla para reducir los esfuerzos de desarrollo y mantenimiento.

Arquitectura:

Creé una nueva aplicación contenedora UI5, que consumía el FE como un componente. Tenía la lógica de cargar la aplicación de elementos FE y luego navegar a la página de objetos con el contexto seleccionado. El siguiente diagrama lo explica.

Diagrama Arquitectónico

Veamos ahora los detalles.

El primer paso fue crear una nueva aplicación UI5 como se muestra a continuación.

Se creó una aplicación SAPUI5 personalizada y Concepto de reutilización de componentes fue utilizado.

Contenedor de componentes: “usage=dashboard” es el nombre de la aplicación que figura en el manifiesto

Contenedor de componentes –

Cambios manifiestos

Rutas –

Una ruta específica se define como se menciona en el blog anterior. Y esta ruta contiene la ruta:”detalle/{scenarioid}/{wfInstanceId}/{taskPath}” y el componente de la aplicación Dashboard como objetivo. Esta es la misma ruta que se activará desde Mi bandeja de entrada cuando se seleccione una tarea.

“&/detalle/LOCAL_TGW/000001577878/TaskCollection(SAP__Origin=’LOCAL_TGW’,InstanceID=’000001577878′)”

Manifiesto – Rutas ->

(Nota de Pls: el prefijo como niño se usó para saber si la aplicación Dashboard se ejecuta desde My-Inbox, se encontró de esta manera genial de manejar)

Definición de ruta

Definición de objetivo

Tenga en cuenta: en nuestro caso, no se requiere ningún parámetro Routingmacthed, ya que estamos reutilizando el componente y la aplicación Detail es una aplicación Fiori Elements.

Siguiente parámetro de la Ruta- “&/Niño/zgc_c_requests(req_uuid=guid’00505694-0AD9-1EED-A4CD-A9CC33EA8180′,IsActiveEntity=true)”

Entonces, en Init de ListReportExt.controller, el parámetro hashkey se verifica para el parámetro «Niño» y nav.a motivado.

Parámetro Hashkey – ‘Niño’

Ahora vamos a configurar la aplicación recién creada.

Nueva entrada creada para nuestra tarea con «Navegación basada en la intención». Se requiere al menos una entrada para «SEMANTIC_OBJECT» y «ACTION» que luego se utiliza en la configuración de Fiori.

Entrada creada con el SWFVISU transacción

creación de entrada en SWFVISU Transaction

Configuración de Fiori: asignación de destino (objeto semántico, acción y el parámetro a continuación)

Configuración de Fiori

Intentemos cargar la aplicación y hacer clic en un elemento. Pero toda la aplicación se carga en lugar de cargar solo la página de detalles

Nuestra aplicación

Después de mucho análisis, se escribió nav.to arriba para la navegación y se escribió otra verificación para habilitar la página de detalles Pantalla completa (Por favor, avíseme si hay alguna solución mejor, me pareció adecuada para ese momento.)

Fragmento de código para pantalla completa

Problemas después de la implementación-

La barra de herramientas flotante de la página de detalles de la aplicación infantil se muestra a continuación -> puede ocultarse obteniendo la identificación de la barra de herramientas y haciéndola visible (falso)
Problema con el diseño del encabezado y la barra de pie de página de Mi bandeja de entrada -> puede solucionar este problema de diseño manejando la altura de la aplicación personalizada al 85%.

Conclusión:

En conclusión, así es como pude mostrar la tarea de usuario personalizada usando una aplicación contenedora UI5. Espero que lo encuentre útil y comparta el suyo conmigo en los comentarios.