Integrando aplicaciones SAPUI5 en SAP

El entorno SAP dista de ser el más idóneo para optimizar la experiencia de sus usuarios. Aun siendo un sistema robusto de gestión de datos para medianas y grandes empresas, su usabilidad es bastante compleja, lo que dificulta que el usuario se adapte de forma rápida a su manejo. Esta entrada presenta una solución para integrar […]

ux

El entorno SAP dista de ser el más idóneo para optimizar la experiencia de sus usuarios. Aun siendo un sistema robusto de gestión de datos para medianas y grandes empresas, su usabilidad es bastante compleja, lo que dificulta que el usuario se adapte de forma rápida a su manejo.

Esta entrada presenta una solución para integrar aplicaciones externas dentro de SAP, utilizando éste como back-end y ampliando las posibilidades y funcionalidades del sistema original, permitiendo de esta manera mejorar la experiencia del usuario. Servirá también como introducción a futuras entradas dónde explicaremos uno de los objetivos principales de newUIBCN como es crear e integrar aplicaciones basadas en SAPUI5 dentro del sistema SAP combinando esta tecnología con servicios REST para el intercambio de datos entre la aplicación y el sistema.

Lo presentado a continuación es un simple ejemplo de como crear, alojar y ejecutar una aplicación basada en HTML directamente en SAP. En futuras entradas de este blog, iremos presentando las distintas posiblidades que nos permite el alojamiento de una aplicación en SAP y como interactuar como por ejemplo la representación de datos proporcionados por el sistema o la generación de eventos.

SAP como servidor web

SAP puede ser utilizado como un servidor web. Publicando una BSP (Business Service Pages) dónde alojaremos nuestros contenidos, éstos pueden ser consumidos de forma externa via navegador o de forma interna mediante un contenedor HTML integrado en una aplicación en SAP.

En primer lugar, debemos crear una nueva BSP. Para ello, ejecutamos la transacción SE80, seleccionamos el menú «Browser de Repository» y la opción «Aplicación BSP». Introducimos el nombre de la aplicación y clicamos see para crear una nueva:

BSP Creation

Una vez se ha activado el objeto, con el botón derecho sobre la BSP creada, creamos una nueva página:

BSP New page

BSP Page Creation

Si ejecutamos la aplicación (F8), se abrirá un navegador externo con el contenido de la página insertada anteriormente.

Adicionalmente, es posible añadir otros tipos de ficheros para ampliar la funcionalidad de la página creada mediante CSS y scripts en otros lenguajes como Javascript que serán interpretados por el navegador. Para ello, con botón derecho sobre la BSP, podemos importar/crear objetos MIME. A continuación se muestra un simple ejemplo de una página con HTML, Javascript y CSS:

BSP MIMEs

En este ejemplo, hemos añadido un botón a la página, aplicado un estilo (al pasar el mouse sobre el botón, el texto cambia de color) y al clicar aparece un mesaje. Como se puede observar, esto permite añadir múltiples funcionalidades a nuestra aplicación.

BSP Running on web browser

Integrando la aplicación en un report SAP

SAP dispone de una clase estándard que permite cargar una URL dentro de un contenedor en un report.

En primer lugar deberemos crear un report (via SE38) que incluirá una DynPro donde cargaremos el contenedor ejecutando la carga en el módulo PBO de esta screen.

A continuación, crearemos el objeto contenedor que será del tipo CL_GUI_HTML_VIEWER mediante y que tendrá como padre un contenedor del tipo CL_GUI_CUSTOM_CONTAINER:

CREATE OBJECT gr_sapui5_viewer "
      EXPORTING parent cl_gui_custom_container=>screen0.

Seguidamente obtendremos la URL de la BSP creada anteriormente y ejecutaremos el método que cargará el contenido de la URL en el contenedor creado:

   cl_http_ext_webapp=>create_url_for_bsp_application          EXPORTING bsp_application      'ZTEST'
                    bsp_start_page       'Index.html'
                    bsp_start_parameters ls_params
                    IMPORTING abs_url              l_url ).
 
   gr_sapui5_viewer->show_urlEXPORTING url = l_url ).

A continuación se muestra una captura con el contenedor en el report SAP:

BSP page running on html viewer in SAP

En futuras entradas en este blog, se detallará como interactúan aplicación y sistema contenedor, permitiendo la generación de eventos que pueden ser recogidos por el back-end para su utilización, como por ejemplo el paso de datos entre el front-end y el back-end para generar acciones sobre la base de datos, ejecución de transacciones, etc.

El código presentado en este ejemplo está disponible en GitHub: SAP integration with external applications


Enlaces de interés:

Creación de una BSP en SAP
Añadir página a una BSP en SAP