SAP Fiori plugin – Amplia tu launchpad

Introducción

Uno de los puntos mas famosos de Fiori es su launchpad. Su punto fuerte es que de una manera rápida podemos publicar nuestras aplicaciones. Su punto flaco es la falta de personalización de acciones fuera de los tiles…

Con la nueva versión de SAP Fiori, vamos a poder crear tiles mas personalizados y con nueva información mas completa. Otra de las grades utilidades (que es la que hoy vamos a ver) es la posibilidad de añadir Shell Plugins (disponible des de Fiori 2.0 ) para extender funcionalidades de Fiori.

En la última edición del Portal developer Change, pudimos ver ejemplos del potencial de esta nueva versión.
https://blogs.sap.com/2018/10/17/join-the-sap-cloud-platform-portal-developer-challenge-2018/

---

Sin mas, vamos a crear nuestro «Shell plugins» para añadir alguna funcionalidad extra.

Configuración inicial

Estos pluguins se crean de manera fácil des de SAP Web IDE, para ello, debemos activar las extensiones de portal y la extensión SAP «Fiori Launchpad Extensibility«:

Una vez activados reiniciamos SAP WebIde y ya estaremos en disposición de crear las extensiones.

Creación inicial mediante wizard

Como cualquier proyecto que queramos iniciar de manera rápida, crearemos un nuevo proyecto des de un template.

• Vamos al home y seleccionamos «New Project from Template»

• Crearemos un SAP Fiori Launchpad Pluguin:

• Informamos los pasos del Wizard, el mas relevante es el último, a modo ejemplo activaremos todas las opciones disponibles, que a continuación explicaré:

Cada una de las opciones inserta un elemento en una parte del launchpad:

• Add button to launchpad header

• Add a launchpad footer with button

• Add buttons to Me Area (este template añade 2 botones, uno al estar en el lauchpad y el otro al entrar a una aplicación)

Entendiendo el plugin (un poco de teoria)

El plugin contiene los distintos ficheros para extender las funcionalidades. Nos vamos a centrar en el fichero «Component.js», este es el encargado de añadir los botones.

El metodo onInit() se iniciará poco después de que el launchpad este cargado en pantalla.

Lo primero que debemos hacer es obtener el render del Shell. Este componente es el encargado de añadir otros componentes UI5 al Shell del launchpad, el template ya contiene la implementación de la función que añade los eventos al launchpad, el fichero Component.js, método init:

init: function () {
var rendererPromise = this._getRenderer();
...

Cada control a añadir lo haremos con el renderPromise que hemos obtenido en el código anterior, como vemos en el siguiente ejemplo, donde se añade una botonera en el footer con el metodo «setFooterControl».

        rendererPromise.then(function (oRenderer) {
            oRenderer.setFooterControl("sap.m.Bar", {
                id: "myFooter",
                contentLeft: [new Button({
                    text: "Important Information",
                    press: function () {
                        MessageToast.show("Nuevo Boton");
                    }
                })]
            });
        });

Podemos ver mas información de todo lo que podemos añadir en la siguiente dirección.

https://sapui5.hana.ondemand.com/#/api/sap.ushell.renderers.fiori2.Renderer

El plugin no necesita mas configuración, por lo que con el template ya podemos ver su funcionamiento, des de SAP WebIDE podemos simular un launchpad para ver su funcionamiento:

• Seleccionamos con click derecho sobre el proyecto: Run > Run Configurations

• Creamos una nueva configuración con el boton «+» y seleccionamos «/fioriSandboxConfig.json»

Añadimos en la pestaña «URL Components» el URL Hash Fragment: #Shell-home.

• Con esto, ya podemos hacer Save and Run. Esta configuración solo hay que hacerla una vez.

Algunas ideas de plugin (vamos al caso practico)

• Añadir en el footer un descriptivo de copiright y un boton para envio de mail:

        rendererPromise.then(function (oRenderer) {
            oRenderer.setFooterControl("sap.m.Bar", {
                id: "myFooter",
                contentLeft: [new sap.m.Text({
                    text: "Copyright ecastella.com"
                })],
                contentRight: [new Button({
                    text: "Contacta con el soporte",
                    press: function (evt) {
                        sap.m.URLHelper.triggerEmail("ecastella@ecastella.com", "Info Request");
                    }
                })]
            });
        });

El resultado es un footer como el siguiente:

• Añadir un mensaje de bienvenida al iniciar el launchpad, esto lo añadiremos en el fichero component.js, en el método oninit, donde añadimos todo el código:

        var dialog = new Dialog({
            title: 'Bienvenido',
            type: 'Message',
            state: 'Information',
                content: new sap.m.Text({
                    text: 'Bienvenido a este tutorial'
                }),
            beginButton: new Button({
                text: 'OK',
                press: function () {
                    dialog.close();
                }
            }),
            afterClose: function() {
                dialog.destroy();
            }
        });

        dialog.open();

El resultado es que al iniciar nos muestra un dialogo:

Instalación en productivo

Una vez finalizado el desarrollo, el procedimiento para publicar es el descrito en la página oficial del sap:

• ABAP:
  https://help.sap.com/viewer/webide-flpextensibility/b876ba0dc94b4b93b5883b1bbb5d2995.html
• SAP Cloud:
  https://help.sap.com/viewer/webide-flpextensibility/37ca5d45a0204801bfef38f840ffbcde.html (El manual tiene un link roto, como resumen comentar que hay que añadir como una aplicación mas el plugin)
  • Hacemos deploy de la aplicación
  • Vamos al portal a creamos una nueva aplicación

• Añadimos la nueva aplicacion con sus datos

• Añadimos al catalogo esta aplicación.

---

Hasta aquí este pequeño tutorial. Espero que os resulte útil para todas aquellas especificaciones que escapan del launchpad estàndard.

Si este tema os ha interesado, suscribiros al blog Suscribete