SAP Fiori 3: Asignar el tema en SAP Web IDE

En el artículo anterior, estuvimos viendo las cosas que ya habían ido saliendo de Fiori 3, incluyendo la nueva versión de SAPUI5, que justo en ese momento era la 1.66. Y creamos una aplicación sencilla para ver el nuevo Shellbar que nos venía con Fiori 3. Encima, nos enteramos de que comenzaba un curso de Fiori 3 en openSAP, ¡que comienza hoy mismo! Venga, dejamos un momento el blog y nos inscribimos en el curso... ya, si eso, ahora seguimos trasteando.

...

Ya nos hemos inscrito todos, ¿no? Bien, pues seguimos por donde íbamos. Que hoy vamos a hablar de como trastear con el nuevo tema de SAP Fiori 3, SAP Quartz Light, en nuestro SAP Web IDE, en lugar de usar el SAP Belize.

Creando una aplicación sencilla para Fiori 2 y Fiori 3

Cuando creamos una aplicación nueva en el SAP Web IDE con la última versión (que ya no es la 1.66 como veíamos en el artículo anterior, sino la 1.67) y la ejecutamos integrada en el Sandbox de Fiori Launchpad, el Shellbar que nos muestra es el nuevo de Fiori 3.

Así podemos ejecutar una aplicación SAP UI5 integrada en Fiori Launchpad

Podemos hacer una comparación rápida. Nos creamos una aplicación sencilla de tipo SAP UI5 en la versión 1.60 y veremos que nos muestra el shellbar de Fiori 2.

Nos la creamos en la versión 1.67 (Innovation) y vemos que el shellbar cambia, mostrando el nuevo de Fiori 3.

Pero, curiosamente, aún nos sigue usando SAP Belize como tema. Que digo yo, que ya que estamos probando cosas de Fiori 3, lo suyo es poder probar el Quartz Light, ¿no? Que esto es como si el Batman del Caballero Oscuro llevase el traje del Batman de los 60 (chana-nananana-chananana-chanana, Batmaaaaan).

Kapow de Pixabay

Bueno, al menos sabemos que SAP Belize seguirá siendo compatible con Fiori 3, como ya nos habían adelantado. ¡Ojo! Compatible, mientras no hayamos echado las zarpas con nuestros estilos de cliente.

¿Pero cómo podemos probar a ver el nuevo tema de Fiori 3?

Cambiar el tema al SAP Quartz Light de Fiori 3

Lo primero, es saber el ID del tema, que es sap_fiori_3 (antes era sap_belize). Sabiendo eso, podemos asignar un parámetro de url a la configuración de ejecución. Este parámetro puede ser:

• sap-theme=sap_fiori_3 o
• sap-ui-theme=sap_fiori_3

Si vamos al menú Run -> Run Configurations y nos creamos una configuración de tipo SAP Fiori Launchpad Sandbox, podremos especificar dicho parámetro de URL:

Aplicando el nuevo tema a una configuración

Y, si lo ejecutamos, ya nos sale el nuevo tema, cambiando las tonalidades azules de Belize por tonalidades grises.

NOTA: El parámetro de URL tendrá prioridad sobre lo que vamos a ver a continuación. Así que si cambiamos algún fichero pero luego en la configuración de ejecución forzamos el tema, será dicha configuración (el parámetro de URL) el que se lleve la palma.

Modificando el index.html

Ojo, que como la aplicación viene con un index.html, ahí también podemos asignar el nuevo tema. Lo haremos cambiando el parámetro sap-ui-theme en el bootstrap.

Pero claro, al no estar integrado con el Sandbox del Fiori Launchpad, nos saldrá sin ningún shellbar. Aunque eso quiere decir que podemos aplicar el tema para probar nuestras aplicaciones standalone.

Cambiar el Fiori Launchpad creado como test

Al crear algunos tipos de aplicación Fiori (no para la aplicación SAP UI5 simple), nos añade en el proyecto (en la carpeta test) un fichero html que nos hará las veces de sandbox de Fiori Launchpad. Por ejemplo, si creamos una aplicación de tipo List Report en la versión 1.67 y usando como servicio oData el servicio proporcionado por Northwind (ejemplo que podemos ver en este artículo):

Creamos una aplicación de tipo List Report

Nos creará un proyecto con la siguiente estructura, donde vemos el fichero que queremos mutar:

Ese flpSandbox.html incluye, en el bootstrap, el parámetro sap-ui-theme (nos viene como data-sap-ui-theme por ser html declarativo, pero es el mismo parámetro sap-ui-theme que hemos visto antes). Podemos modificar dicho parámetro a sap_fiori_3 y tan panchos que nos quedamos.

Ahora, si ejecutamos el flpSandbox.html:

Nos aparecerá el Fiori Launchpad, así que pulsaremos sobre nuestro tile:

 y ya estaremos en nuestra aplicación. En el icono del engranaje, a la derecha del todo, elegiremos los campos que nos va a mostrar (porque la aplicación, por defecto, aparece en pelotillas, sin mostrar ni columnas "ni ná") y pulsamos sobre Ir para obtener algo como lo siguiente:

Esa misma aplicación en Belize se vería tal que así:

Pues nada, ya hemos trasteado un poco con el nuevo tema.

Y después de esto

Ahora sólo nos queda esperar a que saquen el tema SAP Quartz Dark, sap_fiori_3_dark, para probar otro colorido distinto (más oscuro, ya nos lo dice el nombre). Y a que permitan una configuración por defecto en el Web IDE para poder elegir el tema que queremos usar (a lo mejor ya existe esa opción, pero yo, con mis torpezas, no he podido encontrarlo :( . Chivádmelo alguno si os lo sabéis).

¡Y comenzar con el curso de openSAP!