En esta publicación de blog, profundizaré en los detalles técnicos detrás del caso de uso de SAP SuccessFactors y SAP Build explicado en mi blog anterior: Amplíe SAP SuccessFactors con SAP Build. Hoy, les mostraré paso a paso cómo crear la aplicación. El objetivo es ayudarlo a comprender mejor las capacidades de integración y extensión de SAP Build Apps y SAP SuccessFactors e inspirarlo para que comience a crear sus propias aplicaciones.

Arquitectura: aplicaciones de creación de SAP

Para comenzar, deberá crear un proyecto en SAP Build Lobby. Esto se puede hacer rápida y fácilmente utilizando los componentes y las plantillas de la interfaz de usuario preconstruidos disponibles en el servicio:

Datos

Una vez que hayas creado el proyecto, lo primero es habilitar la sección de datos:

Para comenzar a extraer datos para su aplicación, es importante saber qué API están disponibles y cuál se adapta mejor a su caso de uso. Recomiendo familiarizarse con el API Business Hub para SuccessFactors para explorar las API y sus capacidades.

Para este caso de uso, decidí usar el API de administración de usuarios para consumir datos de empleados de SuccessFactors. Con esta API, pudimos mostrar y filtrar los datos según lo necesitaba:

Al comprender las API disponibles y seleccionar la adecuada para su caso de uso, puede garantizar el éxito de su aplicación personalizada con SAP SuccessFactors.

Como se explica en el Publicación de blog: Configuración del acceso a una API de SAP SuccessFactors en SAP Build Apps por mi compañero Antonio Maradiaga, tenemos dos opciones al integrar SAP Build con SAP SFSF:

1. Destinos SAP BTP
2. Gestión de API de SAP

Para este ejemplo, he decidido usar SAP API Management para superar el problema de CORS, pero probé el destino BTP y funciona bien, como puede ver:

Como mencioné, voy a usar SAP API Management. Por favor revise Blog de Antonio para configurar la API y superar el CORS Issue. Una vez que lo haya hecho, regrese y configure la Llamada API Rest en Build Apps:

Es muy importante que añadas la ruta de la clave de respuesta “d.resultados” para poder acceder a los resultados de todos los empleados ubicados desde la oficina de Madrid tal y como está filtrado en el parámetro de consulta. Siéntase libre de explorar otras opciones para filtrar la API.

Configuremos otra API para la pantalla Detalles del usuario, de modo que podamos extraer todos los datos de un usuario específico:

En este caso, como la API solo recupera a un empleado, solo necesita agregar la ruta de la clave de respuesta «d» ya que no tenemos más resultados.

Variables

Volvamos a UI Canvas y comencemos a definir las variables que necesitamos para el proyecto:

Interfaz de interfaz de usuario para la pantalla inicial

Volvamos al lienzo de la interfaz de usuario y comencemos a construir la interfaz de la interfaz de usuario. He utilizado los siguientes elementos:

• “Título” para agregar el texto del formulario de cumplimiento como encabezado.
• «Fila» debajo del título para que pueda agregar dos «Texto» (Nombre del empleado y dirección de correo electrónico).
• «Envase» debajo de la Fila con el texto y dentro del contenedor añadimos «Elemento de la lista de iconos» y un «Botón»

A continuación, vamos a definir el contenedor como un elemento que se repite con cualquier resultado que traiga la API “SFSF_Usuarios_España” que hemos creado en la sección Datos:

Seleccione el contenedor > Repetir con icono > Datos y variables > Variable de datos > SFSF_Users_Spain

Ahora, mostremos la información del empleado en la interfaz de usuario. En este ejemplo, mostraré el nombre completo y la dirección de correo electrónico del empleado. Repita los siguientes pasos también para la etiqueta secundaria:

¡Gran trabajo hasta ahora! ¡¡Casi terminamos!!

En este ejemplo, agregaré la lógica para permitir que el usuario haga clic en un empleado y pase a la siguiente página de la aplicación, una vez que el usuario haga clic, se guardarán todas las variables relevantes (las variables que hemos creado antes) :

Seleccione el elemento de la lista de iconos> Haga clic en «Agregar lógica al elemento de la lista de iconos»> Establecer variable de la aplicación

Agregue también la «Página abierta» para que la aplicación pase a la siguiente página donde el usuario final completará toda la información sobre el incidente. Al final debería verse así:

Interfaz de usuario para los detalles del usuario

Si bien los pasos anteriores son suficientes para crear una funcionalidad básica de búsqueda de empleados, podemos ir más allá agregando una sección opcional para mostrar información más detallada sobre el empleado seleccionado. Esto no solo mejora la experiencia del usuario, sino que también muestra toda la información que se puede recuperar de las API de SAP SuccessFactors.

Antes de navegar a la pantalla de detalles del usuario, debe agregar lógica al botón «Mostrar detalles». Cuando el usuario final hace clic en el botón, la variable de ID de usuario debe guardarse y la aplicación debe pasar a la pantalla de detalles del usuario. Para eso, debe agregar «Establecer la variable de la aplicación2 y» Abrir página «:

En la nueva página de detalles del usuario, se debe declarar una nueva variable de datos porque esta vez llamaremos a la Rest Api «SFSF_UserId» que creamos al principio:

Considere usar un registro de datos único como el tipo de variable de datos esta vez. Además, asegúrese de configurar la variable ID de usuario para seleccionar el empleado específico para el que necesita información adicional.

Lienzo de interfaz de usuario

En la página Detalles del usuario, diseñé una interfaz de usuario simple e intuitiva. He agregado un elemento «Contenedor» como título para las secciones «Detalles del empleado» y «Detalles del puesto», y cada sección contiene varios elementos de «Fila». Dentro de cada elemento «Fila», hemos agregado un elemento «Título» para mostrar la información relevante.

Además, agregué un elemento «Botón» al final para permitir a los usuarios navegar fácilmente a la página anterior.

En cuanto a la imagen a continuación, muestra la página de Detalles del usuario con el diseño de interfaz de usuario que describí anteriormente:

Una vez que se definen la variable de datos y los elementos de la interfaz de usuario, el siguiente paso es seleccionar los campos de datos específicos de la respuesta de la API que desea mostrar en la pantalla. Por ejemplo el “Departamento”:

Por el momento, el botón que agregamos al final de la página es solo un elemento estático sin funcionalidad. Si desea habilitar la navegación de regreso a la lista de empleados, deberá agregar algo de lógica al botón. Un enfoque es utilizar Navegar hacia atrás. Esto permitirá al usuario final volver fácilmente a la lista de empleados:

Interfaz de interfaz de usuario para la pantalla de incidentes

Puede encontrarlos en la información del árbol. Estoy seguro de que con esta información podrá crear la pantalla usted mismo. No dude en comunicarse si tiene alguna pregunta o necesita más orientación.

Quiero animarte a que recrees la pantalla por tu cuenta, puedes encontrar toda la información necesaria debajo del Árbol:

CONSEJO: Esta vez no necesitamos llamar a la API ya que tenemos la información almacenada en las variables de la aplicación.

Si bien no entraré en tantos detalles esta vez, estoy seguro de que tiene los conocimientos y habilidades necesarios para usar la información proporcionada y construir la pantalla con éxito. No dude en comunicarse si tiene alguna pregunta o necesita más orientación.

Para saber cómo desencadenar el proceso en SAP Build Process Automation, recomendaría consultar los siguientes blogs de SAP:

Conclusión

En esta publicación de blog, he demostrado cómo crear una aplicación simple usando SAP Build Apps que se comunica con SAP SuccessFactors. He cubierto varios detalles técnicos, incluida la integración de API, el modelado de datos y el diseño de la interfaz de usuario. Siguiendo las instrucciones paso a paso, debería poder crear la misma aplicación o una aplicación similar adaptada a su caso de uso específico.

Espero que haya encontrado este blog informativo y útil para mostrar las capacidades de SAP Build Apps. Si tienes alguna pregunta, duda o inquietud, no dudes en publicarla en los comentarios o llegar a la comunidad. ¡Siempre estamos aquí para ayudarlo a aprovechar al máximo SAP BTP!

¡Gracias por leer y feliz edificio!