Simplificación de la carga de Excel en Fiori Elements: el control personalizado UI5 de código abierto y fácil de usar
By s4pcademy
Sobresalir en el mundo SAP
Excel es y seguirá siendo por mucho tiempo una de las herramientas más importantes para las empresas. No en vano se le llama la navaja suiza de las herramientas empresariales.
Por lo tanto, también es muy importante integrar Excel en SAP.
Esto solo muestra la gran cantidad de publicaciones de blog en la comunidad de SAP.
En consecuencia, también hay proyectos de código abierto que se especializan en integración. El más popular para ABAP es por mucho abap2xlsx.
Incluso si la adaptación es difícil y se prefiere copiar y pegar código de publicaciones de blog de hace diez años una y otra vez, es el proyecto de código abierto ABAP más popular en Github después de abapGit con más de 500 estrellas en GitHub.
Para el frontend, la integración en UI5 ya se completó hace años con la descarga de tablas de Excel.
Desafortunadamente, aquí falta la posibilidad de cargar archivos de Excel fácilmente.
Control personalizado de carga de Excel UI5
Aquí, Custom Control UI5 Excel Upload llena el vacío y ofrece una posibilidad plug and play para cumplir con la demanda como un control personalizado de código abierto.
Para garantizar la integración universal, esto no envía el archivo en sí al backend, sino que lee los datos del archivo de Excel y utiliza las API estándar de UI5.
Esto permite un uso simplificado en la aplicación Fiori Elements, pero también se puede usar en todos los demás escenarios de UI5, incluidos RAP y CAP Backends.
Empezando
Dado que el control es de código abierto, el código completo y los ejemplos se pueden ver en GitHub:
https://github.com/marianfoo/ui5-cc-excelSubir
Otro enfoque es el uso e implementación lo más simple posible por parte del desarrollador.
Utilizando el Generador de aplicaciones de SAP y el generador desde el control de carga de Excelse puede generar una aplicación UI5 con función de carga de Excel sin escribir una línea de código y en menos de 2 minutos.
Un ejemplo de esto es este breve video que muestra la creación de una aplicación, la integración del control de carga de Excel y la carga de un archivo de Excel.
La documentación oficial y la información sobre cómo empezar se pueden encontrar aquí:
https://marianfoo.github.io/ui5-cc-excelUpload/
Características
Actualmente, el enfoque sigue estando en la integración universal, pero, sin embargo, ya hay algunas características que se pueden usar. Las siguientes características están disponibles:
– Generación automática de un archivo de plantilla para su posterior carga
– definir las columnas que se cargarán y mostrarán en el archivo de plantilla
– definir columnas que deben estar presentes al menos
– activación automática de borradores (por ejemplo, en el informe de lista)
– Evento: verifique los datos al cargar el archivo y muestre los errores (por ejemplo, comprobar si un precio supera un umbral)
– Evento: manipular datos antes de enviarlos al backend (por ejemplo, números redondos)
Todo opciones y eventos se puede encontrar en la documentación
Las características planeadas para el futuro se pueden encontrar aquí:
https://github.com/users/marianfoo/projects/2
Por supuesto, también puedes seguir haciendo sugerencias.
Escenarios y versiones compatibles
El componente también se prueba en muchos escenarios y versiones de UI5 con wdi5 (actualmente 11 escenarios!).
Actualmente los escenarios Se prueban los elementos Fiori V2/V4 Draft y Non Draft con las versiones actuales de Mantenimiento a Largo Plazo (108,96,84,71).
Puede encontrar una descripción general de todas las versiones aquí: Versiones compatibles
Dado que el componente se prueba con wdi5, también necesita aplicaciones.
Las aplicaciones de ejemplo se pueden encontrar en el repositorio de GitHub en los ejemplos.
También soporta la nueva versión de UI5 Tooling V3 con la que la configuración inicial es más sencilla.
Pruebas de wdi5 con acciones de GitHub
Implementación central / descentralizada
La implementación básica detrás de esto es un componente de reutilización.
Esto da como resultado dos escenarios de implementación diferentes en el escenario de Fiori Launchpad.
Es posible implementar el componente directamente con la propia aplicación, es decir, «en la aplicación».
Sin embargo, el componente también puede implementarse directamente, por ejemplo, en un sistema local, y luego ser utilizado por aplicaciones individuales. Más sobre el despliegue central aquí: Despliegue central
Espacio de nombres de varias versiones
Otra característica es el espacio de nombres de varias versiones, que permite utilizar versiones únicas del control de carga de Excel. Esto es especialmente útil en una implementación central, ya que cada aplicación puede decidir por sí misma qué versión quiere usar y, por lo tanto, al actualizar el componente Subir y reutilizar de Excel, no es necesario probar todas las aplicaciones que lo usan.
Desde un punto de vista técnico, el espacio de nombres es marcado con un marcador de posición durante el desarrollo y luego reemplazado con la versión actual durante la publicación, que luego se puede consumir a través de npm.
Cómo funciona
Aunque el nombre «Control personalizado» es algo engañoso, la base es un componente reutilizable. Las ventajas son la generación de archivos de precarga, i18n, y el despliegue como componente central.
Como se describe en la documentación, es importante que se proporcione el contexto. Solo entonces se puede encontrar la tabla correcta en la vista y acceder a las API de UI5 para enviar los datos al backend.
A continuación, se busca una tabla UI5 en la vista para acceder al enlace. Si se encuentran varias tablas, deben ser definido en las opciones.
Con el enlace también se pueden leer los metadatos para saber qué columnas deben mostrarse en la plantilla y con qué etiqueta.
Para leer los datos del archivo de Excel y generar la plantilla, se utiliza la biblioteca SheetJS.
Después de leer, los datos están disponibles como una matriz. Además, los datos se convierten al formato correcto (es decir, fecha de Excel a fecha de edm.).
Esta carga útil se puede enviar al backend con la API de ODataModel, según la versión de OData, ya sea con crear o crearEntrada.
Comentario
Este es un proyecto de código abierto en el que todos pueden contribuir y ayudar.
Ayudar también es muy fácil, solo pruebe el Control de carga de Excel y pruébelo para sus casos de uso.
También se puede dar retroalimentación a la documentación si algo no está claro.
Por supuesto, también hay más ideas sobre qué características se pueden implementar.
Estaría muy feliz de recibir comentarios.
Mi forma preferida es a través de problemas de Githubpero como alternativa puedes contactarme a través de correo electrónico, gorjeo, mastodonte o Linkedin.
También te invitamos a dejar un comentario aquí en el blog.
Conclusión
En conclusión, Excel es una herramienta crítica para muchas empresas e integrarlo con SAP puede ser un desafío. El control personalizado de carga de Excel de UI5 ofrece una solución plug and play que simplifica el proceso de carga de archivos de Excel a SAP. Es un proyecto de código abierto con muchas características útiles, incluida la capacidad de generar un archivo de plantilla, definir columnas para cargar y mostrar, y verificar datos en busca de errores. El control se ha probado en muchos escenarios y versiones de UI5, y se puede implementar directamente con la aplicación o como un componente central. Con la función Espacio de nombres de varias versiones, cada aplicación puede decidir qué versión del control usar, lo que facilita las actualizaciones. En general, el Control personalizado de carga de Excel de UI5 es una herramienta poderosa que puede hacer que la integración de Excel con SAP sea mucho más simple y eficiente.
