Custom tile en los launchpads BTP

En este post volvemos a los orígenes, en entradas anteriores ya escribí como crear algunos complementos del lauchpad como plugins, notificaciones, etc… Pero me faltaba la guinda del pastel, lo básico, como creamos un tile personalizado.

Como algunos ya sabéis, con el router SaaS que sap nos proporciona, mediante una mínima configuración en el manifest de la aplicación, nos permite añadir el tile a nuestro launchpad (eso sí, tendremos que realizar a mano la configuración de roles, grupos y catálogos).

Aunque os traigo una buena noticia, la configuración es prácticamente la misma. Así que sin más pasamos a ver como se hace.

¿Qué necesitamos?

Necesitaremos crear dos aplicaciones, una será nuestra aplicación y la otra sera nuestro tile personalizado. A parte de esto, necesitaremos añadir configuraciones extra en cada una de nuestras aplicaciones.

Empezaremos con la aplicación que tendrá nuestro tile ya que nuestra aplicación «normal» requerirá el Id de la aplicación del tile.

Posteriormente añadiremos la configuración en nuestra aplicación donde se indicará donde encontrar el tile personalizado.

Un tema importante antes de empezar, si se utiliza la táctica del «custom tile» tendremos que crear nuestro tile de 0 completamente, no existe una estrategia hibrida, así que nuestras opciones serán las mismas que tenemos hace años, tile estático, tile dinámico, tile custom.

Creando la aplicación del tile

Este punto no tiene mucho misterio, con BAS o Yeoman crearemos una aplicación SAPUI5, este es el resumen:

Los pasos de vista y conectividad me la salto ya que dependerán de lo que queráis hacer en el tile:

Último paso activaremos la opción de deploy y (esta parte no es necesaria) la configuración de FLP:

Esta sera la configuración de deploy:

Ya tenemos la aplicación del tile apunto, ahora vamos a trabajar en ella para añadir el tile. Para darle algo mas de salsa, ya que muchas veces me quedo con la configuración mínima este tile sera del tipo carrousel 1×1 con dos slides (y si, parece el nombre de un plato de restaurante gourmet).

Añadiendo la configuración para indicar que la app es un tile

En nuestro fichero manifest.json un nuevo tag llamado «sap.flp» donde indicaremos que esta aplicación es un tile. Si seguís el blog os sonara de cuando creamos un plugin para nuestro launchpad.

"sap.flp":{
	"type" : "tile"
}

Este es el resultado:

Ya tenemos la configuración apunto, ahora vamos a por la parte visual.

Creando la vista del tile

Lo primero sera limpieza ya que no necesitamos ni el shell, ni paginas. Al ser un tile no es necesario nada relacionado con navegación o encapsulación de la aplicación. Así que quitaremos lo que os indico:

O lo que es lo mismo, todo menos el View.

Lo siguiente es añadir dentro del tag view el tile con los dos sliedes, pasamos a ver línea a línea y luego os añado todo el código.

• La primera línea sera el carrusel, donde a demas, podemos configurar el tiempo que pasa entre slide y slide:

<SlideTile class="sapUiTinyMarginBegin sapUiTinyMarginTop" transitionTime="250" displayTime="2500">

• A continuación añadimos el tile, en este punto hay dos parámetros a destacar, «press» que será la función que se ejecutará al pulsar el tile y «frameType» donde podemos especificar las medidas del tile , si no queréis hacer un carrusel, empezaríamos la vista aquí:

<GenericTile 
    id="kpiTile"
    press="onPress" 
    header= "Header"
    subheader= "Subheader" 
    frameType="OneByOne">

• Lo siguiente son tags para indicar que empieza la parte custom del tile:

<tileContent>
    <TileContent footer="Footer">
       <content>

Lo que viene a continuación son el contenido de los dos tiles, los dos puntos anteriores los duplicaremos para cada uno de los contenidos:

• Tile 1:

<ui:ComparisonMicroChart scale="M">
       <ui:data>
          <ui:ComparisonMicroChartData title="Title 1" value="33" color="red" />
          <ui:ComparisonMicroChartData title="Title 2" value="12" color="green" />
          <ui:ComparisonMicroChartData title="Title 3" value="60" color="yellow" />
        </ui:data>
</ui:ComparisonMicroChart> 

Con este resultado:

• Tile 2:

<Image src="https://pbs.twimg.com/profile_images/1134212811054309376/xEuYN0VV_400x400.png" height="100%"
/>

Con este resultado:

Y aquí todo el código de la vista para que podáis ver librerías y distribución de los tags:

<mvc:View
    controllerName="ecastella.custo.tile.cutomtile.controller.View1"
    xmlns:mvc="sap.ui.core.mvc"
	xmlns:ui="sap.suite.ui.microchart" 
	xmlns:core="sap.ui.core" 
    displayBlock="true"
    xmlns="sap.m">
        <SlideTile class="sapUiTinyMarginBegin sapUiTinyMarginTop" transitionTime="250" displayTime="2500">   
			<GenericTile 
                id="kpiTile"
                press="onPress" 
                header= "Header"
                subheader= "Subheader" 
                frameType="OneByOne">
                    <tileContent>
                        <TileContent footer="Footer">
                            <content>
                                <ui:ComparisonMicroChart scale="M">
                                    <ui:data>
                                        <ui:ComparisonMicroChartData title="Title 1" value="33" color="red" />
                                        <ui:ComparisonMicroChartData title="Title 1" value="12" color="green" />
                                        <ui:ComparisonMicroChartData title="Title 3" value="60" color="yellow" />
                                    </ui:data>
                                </ui:ComparisonMicroChart> 
                            </content>
                        </TileContent>
                    </tileContent>
            </GenericTile>
                <GenericTile 
                    id="kpiTile2"
                    press="onPress" 
                    header= "Header"
                    subheader= "Subheader" 
                    frameType="OneByOne">
                        <tileContent>
                            <TileContent footer="Footer">
                                <content>
                                    <Image src="https://pbs.twimg.com/profile_images/1134212811054309376/xEuYN0VV_400x400.png" height="100%"/>
                                </content>
                            </TileContent>
                        </tileContent>
                </GenericTile>
            </SlideTile>
</mvc:View>

Nos queda un pequeño cambio cosmético en el fichero CSS de nuestro custom tile añadiendo estas reglas:

.sapUiTinyMarginBegin{
    margin-left: 0.0rem !important;
}

.sapUiTinyMarginTop{
        margin-top: 0.0rem !important;
}

Añadiendo la lógica de navegación

El controlador de nuestra aplicación/tile sera el encargado de realizar la navegación, esta parte la podríamos poner la final, una vez nuestra aplicación este creada, pero para ilustrar los pasos de cada una de las partes lo añadiré en este punto.

Si os acordáis, he puesto una función onPress en nuestro tile, como veis vamos a poner los datos del objeto semántico de nuestra aplicación, esto nos permitirá realizar la navegación con un código como el siguiente.

onPress: function (oResult) {
    var oCrossAppNavigator = sap.ushell.Container.getService("CrossApplicationNavigation");
    oCrossAppNavigator.toExternal({
         target: { semanticObject : "object1", action: "action1"}});
}

Ya esta todo listo para mostrar nuestros tiles. Ahora vamos a por nuestra aplicación.

Añadiendo el custom tile a nuestra aplicación

Solo nos queda un paso, en el fichero manifest añadiremos la configuración del para el tile personalizado. Acordaros que el manifest deberá contener la configuración para el launchpad. Algo así:

        "crossNavigation": {
            "inbounds": {
                "intent1": {
                    "signature": {
                        "parameters": {
                            "name1": {
                                "defaultValue": {
                                    "value": "",
                                    "format": "plain"
                                },
                                "filter": {
                                    "value": "",
                                    "format": "plain"
                                }
                            }
                        },
                        "additionalParameters": "allowed"
                    },
                    "semanticObject": "object1",
                    "action": "action1"
                }
            }
        }

A hora si, en el manifest deberemos informar la aplicación tipo tile de esta manera:

    "sap.cloud.portal": {
        "object1-action1": {
            "vizType": "ecastella.custo.tile.cutomtile"
        }
    }

Este es el resultado:

Puesta en el launchpad

Ya podemos realizar el deploy del tile y posteriormente el deploy de la aplicación. Una vez realizado el deploy este será el resultado:

Y así quedará en el launchpad:

---

Aunque los tiles personalizados durante mi carrera los he utilizado muy poco, ya que el usuario no los acostumbra a solicitar , son un buen recurso de UX para dar mas información útil al usuario al entrar en su launchpad.

Como siempre suscribete, dale a la campanita de notificaciones y comparte en redes para estar a la última. Vota Like / Dislike para aportar feedback.