Fiori elements (SAPUI5) – una utilidad para cargar excels

Una de las grandes cualidades de Fiori element (entre muchas otras) es poder hacer los clásicos «reports» de ABAP donde mostramos algunos datos y permitimos operaciones de manera rápida gracias a las anotaciones incrustados (o no) a nuestras CDS.

Pero uno de los requisitos recurrentes del usuario siempre es: «Ah! y… ¿podré tenerlo en un excel?» y la siguiente «¿Puedo trabajar los datos en MI EXCEL y luego subirlos?»

Pues bien, a la primera pregunta siempre podíamos responder sin titubear, ¡por supuesto!, pero… ¿y la segunda?

A partir de ahora también podremos responder sin miedo con un rotundo ¡SI!

Cargando datos excel en una aplicación Fiori elements

La solución la tenéis en el siguiente repositorio de github:

https://github.com/marianfoo/ui5-cc-excelUpload

Instalación

Solo necesitaremos 5 pasos de configuración para tener el complemento preparado para nuestra aplicación.

• Instalar la dependencia (paso 1)
• Añadir la ruta de la dependencia a nuestra app (pasos 2 y 3)
• Añadir la configuración del complemento (paso 4)

El paso 5 del manual de instalación oficial si usamos templates ya lo tendríamos apunto de entrada.

Utilización

Como vemos en el ejemplo de la documentación oficial, solamente hay que añadir unas pocas líneas de configuración. La «trampa» es que se añadirá un botón custom que nos ara todo el trabajo de carga.

Por un lado la extensión del control estándar:

"OrdersObjectPage": {
    "type": "Component",
    "id": "OrdersObjectPage",
    "name": "sap.fe.templates.ObjectPage",
    "options": {
        "settings": {
            "editableHeaderContent": false,
            "entitySet": "Orders",
            "content": {
                "header": {
                    "actions": {
                        "excelUpload": {
                            "id": "excelUploadButton",
                            "text": "Excel Upload",
                            "enabled": "{ui>/isEditable}",
                            "press": "ui.v4.orders.ext.ObjectPageExtController.openExcelUploadDialog",
                            "requiresSelection": false
                        }
                    }
                }
            }
        }
    }
},

Y por otro lado, el código para realizar la carga de datos:

openExcelUploadDialog: async function (oEvent) {
    this._view.setBusyIndicatorDelay(0)
    this._view.setBusy(true)
    if (!this.excelUpload) {
        this.excelUpload = await this._controller.getAppComponent().createComponent({
            usage: "excelUpload",
            async: true,
            componentData: {
                context: this
            }
        });
    }
    this.excelUpload.openExcelUploadDialog()
    this._view.setBusy(false)
}

Como ya sabréis, esto hace la carga a nuestra aplicación y consolidara los datos en el modelo de la aplicación. Una vez realizada la carga, el usuario podrá pulsar el botón de guardar para que se envíen los datos al backend como si los hubiera informado el de manera manual.

Extra

Como veis también permite realizar la descarga de un excel como plantilla para que el usuario no parta de 0. Si le quedemos dar un nombre concreto a la plantilla podemos utilizar el parámetro «excelFileName» que nos permitirá

---

Como veis, la comunidad siempre aporta nuevas mejoras y herramientas que nos facilitan la vida y en muchas ocasiones de manera desinteresada.

Como siempre suscribete, dale a la campanita de notificaciones y comparte en redes ayudarme a llegar a mas personas.