Creando un plugin en el launchpad central de BTP Foundry

La entrada de hoy os sonará, no es la primera que publico añadiendo un plugin en el Launchpad pero en esta ocasión el plugin lo añadiremos en la subscripción de launchpad de nuestra subaccount en Foundry.

Para ello, deberemos crear una aplicación Fiori manejada con el AppRouter de SAP. Tambien utilizaremos un promises de Javascript para poder insertar elementos gráficos en nuestro launchpad.

Utilizaremos promises en JS si queréis entender bien como funcionan, Jorge Motos nos lo explica de manera fácil: https://programandosap.com/promesas-en-sapui5-i/

Creando el plugin

Creando una aplicación UI5 tipo plugin

Como indica el título lo primero será crear una aplicación SAPUI5 manejada por el AppRouter de SAP.

Accedemos a nuestro BAS y creamos un nuevo proyecto des de la página de inicio con la opción «Start from template».

Seleccionamos el template «SAP Fiori application»:

En el siguiente paso seleccionamos el tipo de aplicación «SAPUI5 freestyle» y como base «SAPUI5 Application»:

En la siguiente opción seleccionamos como Data source «None» esto es así porque para este ejemplo no vamos a utilizar ninguna fuente de datos y por lo tanto no necesitaremos tener configurado en el manifest ningun datasource. Si lo necessitis lo podemos añadir a posteriori:

Como nombre de la vista podemos dejar el que viene por defecto ya que ahora mismo no lo necesitamos.

Por último añadimos los datos básicos del proyecto como el nombre de la carpeta, un titulo de la aplicación (poco relevante), etc… Poner atención en la opción «Add deployment configuration» para tener el fichero MTA necesario para el deploy.

Por último la parte en la que he hecho énfasis en la introducción. Seleccionamos que la aplicación sera tipo Cloud Foundry, sin destination para su deploy y con un App Router gestionado por SAP:

Configurando la aplicación

Lo siguiente será cambiar la configuración inicial de la aplicación para indicar al deployar que la aplicación sera un plugin. Vamos al archivo manifest.json para modificar y añadir los siguientes parámetros

Como veis el código de la izquierda es el resultado. Lo que haremos es cambiar el tipo de aplicación a «component», añadiremos un tile tipo Shell para poder agregar al launchpad e indicaremos una opción extra en el despliegue del launchpad para indicar que es del tipo «plugin».

Os dejo esta parte del código por si os da pereza escribir:

        "crossNavigation": {
   			"inbounds": {
				"Shell-plugin": {
					"signature": {
						"parameters": {},
						"additionalParameters": "allowed"
					},
					"hideLauncher": true,
					"semanticObject": "Shell",
					"action": "plugin"
				}
			}
		},

    "sap.flp": {
              "type": "plugin"
    },

Añadiendo botones y mensajes

Ha llegado el momento de modificar la aplicación para poder añadir a nuestro launchpad funcionalidades extra. En este caso, a modo de ejemplo añadiremos un mensaje de alerta para el usuario y un botón en la barra de opciones.

Añadiendo un mensaje en el Launchad

Lo primero sera añadir el mensaje de warning, para ello vamos al fichero Component.js de nuestra aplicación y añadiremos el botón en el método on init, pero antes, necesitamos añadir el modulo MessageBox a la aplicación, estos son los puntos que añadiremos (fijaros que he eliminado el código por defecto del método «init»):

Añadiendo un botón el la cabecera del launchpad

El siguiente ejemplo sirve para ilustrar como añadir una funcionalidad extra en el launchpad.

Lo primero que haremos es añadir un evento que se iniciará cuando el launchpad este cargado. Para ello, añadiremos la siguiente función después de la función «init», acordaros de añadir la coma al final del método «init» ;). Esté es el método:

_getRenderer: function () {
	var that = this,
		oDeferred = new jQuery.Deferred(),
		oRenderer;

        that._oShellContainer = jQuery.sap.getObject("sap.ushell.Container");
		if (!that._oShellContainer) {
			oDeferred.reject(
				"Illegal state: shell container not available; this component must be executed in a unified shell runtime context.");
		} else {
			oRenderer = that._oShellContainer.getRenderer();
			if (oRenderer) {
				oDeferred.resolve(oRenderer);
			} else {
				// renderer not initialized yet, listen to rendererCreated event
				that._onRendererCreated = function (oEvent) {
					oRenderer = oEvent.getParameter("renderer");
					if (oRenderer) {
						oDeferred.resolve(oRenderer);
					} else {
						oDeferred.reject("Illegal state: shell renderer not available after recieving 'rendererLoaded' event.");
					}
				};
				that._oShellContainer.attachRendererCreatedEvent(that._onRendererCreated);
			}
		}
	return oDeferred.promise();
}

Por último añadiremos lo necesario para mostrar el botón y darle funcionalidad, esta parte la añadiremos a la función «init». Como veréis este código añade en el componente del launchpad (que hemos recuperado una vez cargado) un icono que al ser pulsado creará un dialog que mostrará un Texto.

Lo primero será añadir las librerías:

Y este será el código del botón y el mensaje como veis usamos el método «addHeaderItem» podréis ver otros métodos para modificar el footer o añadir otras cabeceras, el funcionamiento es el mismo, se inyectan componentes UI5:

var rendererPromise = this._getRenderer();

    rendererPromise.then(function(oRenderer) {
   	oRenderer.addHeaderItem({
   		icon: "sap-icon://add",
   		tooltip: "Add bookmark",
   		press: function() {
   			var oDialog = new Dialog({
   				contentWidth: "25rem",
  				title: "Whats new",
   				type: "Message",
   				content: new Text({
   					text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
   				}),
   				beginButton: new Button({
   					type: "Emphasized",
   					text: "Ok",
   					press: function() {
   						oDialog.close();
   					}
   				}),
   				afterClose: function() {
   					oDialog.destroy();
       				}
       			});
   			oDialog.open();
   		}
   	}, true, true);
});

Añadiendo la aplicación al launchpad

Para añadir el plugin, primero vamos a deployar la aplicación. Para realizar el deploy realizaremos los pasos habituales, hacemos build sobre el fichero mta.yaml y una vez construido el fichero sobre el fichero mtar realizamos el deploy (acordaros de hacer CF login antes de hacer el deploy).

Una vez deployado vamos a nuestra suscripción de launchpad y añadimos la aplicación des del proveedor de contenido:

Veremos nuestro plugin con un icono especial:

Ya solo nos queda añadir el plugin al rol, en este caso lo añadiremos al rol genérico:

Resultado

Al entrar en el launchpad veremos el resultado nada más iniciar el launchpad. Tambien vemos como aparece un botón extra «+».

Al pulsar el botón «+» veremos el resultado del Dialog que hemos añadido.

---

Como veis, es bastante fácil añadir un plugin que nos permita realizar cambios en el launchpad estándar. En este ejemplo hemos visto como modificar o añadir mensajes.

A partir de aquí es solo cuestión de dejar volar la imaginación.

Como siempre suscribete, dale a la campanita de notificaciones y comparte en redes para estar a la última.