Crear un portal freestyle con SAP Cloud Platform (y III): Menú y Fiori Launchpad

En artículos anteriores, nos habíamos propuesto montar un portal con SAP Cloud Platform. Le habíamos dado forma y contenido, pero sólo teníamos una única página.

Esta vez vamos a mejorar un poco más el sitio web: Vamos a añadir varias páginas más y las pondremos accesibles mediante un menú. Además, una de esas páginas será un Fiori Launchpad y otra será un acceso directo a una aplicación SAPUI5.

En resumen, con estos tres artículos el resultado habrá sido el siguiente:

• En el primer post, vimos cómo crear una página inicial y darle forma.
• En el segundo post, vimos como modificar el contenido con el editor de contenidos.
• En este post, aprenderemos a crear menús y añadir un acceso a aplicaciones SAPUI5 que hayamos creado e incluso a un Fiori Launchpad.

Siempre con nuestro objetivo en mente:

Añadir una nueva página

Lo primero que necesitamos es añadir una nueva página. Esta parte es pan comido.

Le asignamos un nombre y elegimos el modelo de página a utilizar. De momento, seleccionamos uno de entre los modelos disponibles en el portal actual (Fuente de modelo: Este sitio), pero ya veremos después como añadir otros modelos.

Si pulsamos siguiente, nos preguntará las opciones para la nueva página: La navegación semántica para navegar a la misma y las autorizaciones necesarias para acceder a dicha página. Las páginas las asignamos a catálogos, y a su vez los catálogos habrán sido asignados a roles del portal. Cuando un usuario tenga un rol determinar, tendrá los catálogos de ese rol y, por tanto, acceso a estas páginas. En este ejemplo en particular, queremos dar acceso a todos, así que elegimos el catálogo por defecto Everyone.

Ahora que hemos creado nuestra página, sólo tenemos que añadir los widgets correspondientes y editar el contenido. Todavía no hemos aprendido nada nuevo, eso ya lo vimos en los artículos anteriores.

¡Bienvenidos al Poney Pisador!

Todavía no hemos puesto ningún acceso a esta página en el sitio web, eso lo haremos más adelante. Vamos a seguir creando, de momento, más páginas.

Añadir una página de tipo Fiori Launchpad

Vamos a añadir otra página, pero en lugar de usar un diseño normal, será una de tipo SAP Fiori Launchpad, que nos permitirá asignar aplicaciones y verlas como tiles, agrupadas,
 y permitiendo que cada usuario puede reorganizar a su gusto los tiles que ve al acceder a esa página. Vamos, lo que es un Fiori Launchpad...

Esta vez, cuando creemos la página, en Seleccionar modelo de Página elegiremos Disposiciones básicas para que nos salgan todas las opciones de modelos disponibles. Ahí encontraremos el que buscamos, SAP Fiori Launchpad.

Una vez creada la nueva página, tenemos que crear los grupos y asignar las aplicciones que van a estar disponible en esta página. Vamos a ver como hacerlo muy por encima, pero podríamos entrar más en detalle con este antiguo post para configurar un portal de tipo Fiori Launchpad.

A la hora de configurar esta página, tendremos que crear varios grupos donde asignar las aplicaciones, para que se visualicen automáticamente al entrar en la página. Cada uno de esos grupos estará asignado a uno o varios roles, para así saber a qué usuarios les van a aparecer.

En este ejemplo, hemos creado el grupo Hola Mundos y lo hemos asignado al rol genérico Everyone, para que cualquier usuario con acceso al portal lo vea.

Pero todavía nos falta una cosa por añadir, las aplicaciones. Si accedemos a la opción de Aplicaciones e intentamos añadir una pulsando el +, nos aparecerá el listado de páginas que hemos ido creando, pero no nos va a aparecer ninguna de las aplicaciones SAPUI5 que hemos desarrollado hasta ahora y tenemos desplegadas en nuestra cuenta.

Esta página de Fiori Launchpad está más vacía que el cerebro de un goblin, por el momento.

Es hora de poner disponible en nuestra página las aplicaciones que queramos.

Asignar aplicaciones

¿Cómo podemos asignar aplicaciones al portal? Accediendo a Gestión de contenidos -> Aplicaciones. Ahí podremos crear una nueva pulsando en el + de la parte inferior.

En la pestaña de Propiedades podemos escoger, como Recurso de la app, la aplicación que queremos poner disponible en nuestro sitio web. Por ejemplo, el típico Hola Mundo que podemos tener creado ya en nuestra cuenta de SAP CP.

Hola Mundo, versión tolkieniana

También es necesario asignar la aplicación a un catálogo. Como el catálogo estará asignado a roles, los usuarios con dichos roles tendrán acceso a esos catálogos y, por tanto, a las aplicaciones asignadas.

Como no estamos preocupados por liarnos con autorizaciones, sino por aprender lo básico del portal, escogemos el catálogo Everyone.

Ahora que ya hemos creado la aplicación, volvemos a la configuración de la página Fiori Launchpad y, en la sección de Aplicaciones, ya podemos pulsar en el +.

En la lista, ya nos aparecerá la nueva aplicación, que seleccionaremos y guardaremos.

Y así habremos creado otra página. Toca poder acceder a estas páginas desde el sitio web.

Crear el menú

Una vez hemos creadas las dos páginas nuevas, vamos a ponerlas accesibles desde el sitio web.

Por defecto, la primera página que creamos era la inicial (que se cargará cuando abrimos el portal), que es justo lo que queremos. Pero si quisiésemos, debemos tener en cuenta que podríamos cambiar la página de inicio por defecto, incluso podríamos determinar cual es la de inicio dependiendo de los roles del usuario que accede. Pero eso no lo vamos a ver hoy.

Para acceder al resto de páginas que no son las de inicio, tenemos que hacerlo de alguna forma. Una de ellas es crear enlaces o botones que naveguen a dichas páginas. La otra, que vamos a ver ahora, será creando un menú, que veremos como una lista de textos o iconos en la parte superior.

Para ello, accedemos a la opción Editor de menú. Ahí tenemos una opción, Estructura, para poder elegir las entradas que nos aparecerán en el menú.

Podemos crear entradas directas (con Añadir posición) o submenús (con añadir subposición para insertar un menú dentro de otro menú). Podemos añadir varios submenús uno dentro de otros, pero con lo que he probado, parece que sólo se visualiza bien si no superamos los tres niveles de anidamiento (el menú con aplicaciones y submenús, y estos submenús sólo con aplicaciones).

Cuando creamos una entrada nueva, puede ser de cuatro tipos: Una página de las que hemos creado, un enlace, un simple título (para así poder crear submenús) y una aplicación, que se abrirá integrada en la página.

Lo primero que vamos a hacer es añadir las páginas que hemos creado, tanto la de Rumores de Bree como la de Fiori Launchpad. Para ello, pulsamos el botón + de nuestra página inicial (Starter en este ejemplo) y escogemos la opción Añadir posición.

Pondremos el texto que se va a visualizar en el menú y, si queremos, un icono. Elegimos como tipo de artículo la opción Página y, debajo, seleccionamos la página que queremos añadir.

Una vez creados los menús para las dos páginas, vamos a crear un menú que desplegará un listado de aplicaciones. Para ello, añadiremos una nueva entrada de tipo Título y le asignamos un nombre.

Y con esto veremos algo como lo siguiente:

Ahora vamos a añadir una nueva entrada dentro del menú Aplicaciones, para asignar la aplicación de Hola Tierra Media.

Seleccionamos el + en el menú de Aplicaciones y escogemos Añadir subposición. Asignamos entonces el nombre que aparecerá en el menú, como Tipo de artículo App y escogeremos la aplicación que vamos a mostrar al pulsar esa entrada de menú.

Y con eso, ya tenemos nuestro menú creado por completo:

Que no se nos olvide publicar los cambios. Menos mal que SAP CP nos avisa de ello.

Resultado final

Y ya está, tenemos el sitio web con el menú creado. Además, el menú de Aplicaciones mostrará la aplicación de Hola Tierra Media.

Al pulsar sobre Aplicaciones, se desplegará el submenú con la aplicación de Hola Tierra Media

Si pulsamos dicha entrada, nos cargará la aplicación integrada dentro del propio sitio web (que, en este caso, es un simple Hola Mundo).

Y si accedemos a Fiori Launchpad, tendremos acceso a una página con el formato del Fiori Launchpad, con los grupos y aplicaciones que hayamos asignado.

Aquí no se ven los grupos porque sólo he creado uno.
Si hubiese más, sí que se mostrarían.

Y con todo eso, ya tenemos nuestro sitio web creado en SAP Cloud Platform. Podemos seguir investigando, porque queda mucho por aprender, pero al menos ya tenemos el punto de partida para seguir trabajando con lo que necesitemos.