Durante esta semana en el evento SAP Tech Ed en LV, hubo muchos anuncios, entre otros temas, Fiori 3 fue mencionado que ahora ya esta disponible para los desarrolladores. #nerdAlert Creo que ya habia escuchado esta informacion anteriormentey creo que lo habia leido tambien, sin embargo no estaba 100% Seguro en que había cambiado o como podía hacer algun demo y meterle mano al asunto. He estado muy apegado en este tema y al ui5 framework y una cosa mas que me motivó a escibir este blog básico [Y como no pude attender SAP Tech Ed este año, entonces tengo tiempo disponible?] el mismo blog se puede leer en inglés aquí
Primero visité la pag de 3 (https://experience.sap.com/news/sap-fiori-3-first-parts-available-for-sapui5-developers/) y lei acerca de como y donde tengo que enfocarme para empezar a desarrollar apps con Fiori 3. Como desarrollador en Fiori, necesitamos estar listos y actualizados en todos los aspectos de la experiencia.
Luego visité la pag UI5 Road map y encontré este documento (https://www.sap.com/products/roadmaps/finder-all.html#pdf-asset=faeb805a-d07c-0010-82c7-eda71af511fa...)
A medida de que colecciono esta informacion, querio subrayar algunas cosas que se me hicieron interesantes y que daran una buena idea de lo que se necesita para desarrollar un app con Fiori 3.
Sin repetir mucho de lo que he leido en las pag mencinadas anteriormente, vamos a trabajar un ejemplo usando Fiori 3 y observer como se ve. Este ejemplo fue completado usando SCP #whereTheCoolS…. (WEB IDE)
El primer ejemplo que voy a mostrar aqui es un app ui5 que hize el año pasado, durante la copa mundial en Russia 2018, usando el theme sap_belize (fiori 2) y la version ui5 1.44
Inicialmente se veia asi:
Despues de cambiar el theme en el index.html ahora se ve asi:
Despues de cambiar la version sapui5 en el manifest.json, se ve asi:
Pero vamos a ver un ejemplo mas Avanzado y usar otros controles ui5 como el card, alomejor algun chart y otros controles que podamos hacer embedded. Intencionalmente, deje en blanco la seccion de abajo del lado derecho – lo dejo en blanco para su imaginacion – que pondrias ahi tu?
Despues de analizar los archivos en el Proyecto, note varias cosas:
En la estructura de mi view view.xml se ve asi. Nota que hay nuevos controles y namespaces sap.f, sap.f.cards y sap.tnt.
El primer card es del ejemplo del ui5 sdk, y su estructura es asi (header y content) muy simple
Enseguida, usando un chart dentro de un card tan es simple
Este ejemplo lo puedes ver en mi github repo
hay muchos más conceptos en fiori 3, por ahora solo quería ver como completer un ejemplo simple y compartir detalles con otros. Si tienes algun ejemplo, compartan sus experiencias.
Credits:
UI 5 SDK - https://sapui5.hana.ondemand.com/sdk/#/topic
Fiori 3 - https://experience.sap.com/news/sap-fiori-3-first-parts-available-for-sapui5-developers/
Icon Explorer - https://sapui5.hana.ondemand.com/sdk/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#
Primero visité la pag de 3 (https://experience.sap.com/news/sap-fiori-3-first-parts-available-for-sapui5-developers/) y lei acerca de como y donde tengo que enfocarme para empezar a desarrollar apps con Fiori 3. Como desarrollador en Fiori, necesitamos estar listos y actualizados en todos los aspectos de la experiencia.
Luego visité la pag UI5 Road map y encontré este documento (https://www.sap.com/products/roadmaps/finder-all.html#pdf-asset=faeb805a-d07c-0010-82c7-eda71af511fa...)
A medida de que colecciono esta informacion, querio subrayar algunas cosas que se me hicieron interesantes y que daran una buena idea de lo que se necesita para desarrollar un app con Fiori 3.
- Fiori 3 empieza con la version sapui5 1.65 (la más reciente es 1.69 asi que esta bien si usamos la más reciente)
- Fiori 3 se hizo disponible en Abril del presente año y usa el theme Quartz
- Fiori 3 apps son sucesoras de Fiori 2 las cuales son apps responsivas (de esto se encarga el framework)
- Uno de los controles principals en los cuales las apps de Fiori 3 estaban basadas es el control llamado cards el cual es parte de components inteligentes y la mayor parte de las veces aparecen en las Home Pages (or shells).
- Utilizando controles sap.tnt
- Fiori 3 apps usan Fiori elementos (sap.f controls)
- Si ya tienes un app basada en Fiori 2 app, puedes **hacer upgrade upgrade a Fiori 3 siempre y cuando no tengas mucho custom css. ** testing adicional debe ser performado para asegurarse de que sea compatible y que los controles se puedan ver correctamente en el browser (ejemplo basico mas abajo)
- Fiori 3 usa el modo Cozy el cual despliega los controles en forma más compacta, por ejemplo, mas renglones en una tabla. Personalmente, me agrada mucho el modo cozy.
Sin repetir mucho de lo que he leido en las pag mencinadas anteriormente, vamos a trabajar un ejemplo usando Fiori 3 y observer como se ve. Este ejemplo fue completado usando SCP #whereTheCoolS…. (WEB IDE)
El primer ejemplo que voy a mostrar aqui es un app ui5 que hize el año pasado, durante la copa mundial en Russia 2018, usando el theme sap_belize (fiori 2) y la version ui5 1.44
Inicialmente se veia asi:
Despues de cambiar el theme en el index.html ahora se ve asi:
Despues de cambiar la version sapui5 en el manifest.json, se ve asi:
Pero vamos a ver un ejemplo mas Avanzado y usar otros controles ui5 como el card, alomejor algun chart y otros controles que podamos hacer embedded. Intencionalmente, deje en blanco la seccion de abajo del lado derecho – lo dejo en blanco para su imaginacion – que pondrias ahi tu?
Despues de analizar los archivos en el Proyecto, note varias cosas:
- En el archivo index.html (necesitamos añadir ../../ en el atributo src para asegurarnos que el app haga bootstrap desde el path relativo al Proyecto y no desde un CDN externo
- El atributo data-sap-ui-theme fue populado con sap_fiori_3 con default cuando seleccione la version 1.70 innovation desde el wizard
- Noté que hay I attributos data-sap-ui-comonent los cuales no habia visto anteriormente en otras versions (ver otros atributos data- los cuales son html5)
En la estructura de mi view view.xml se ve asi. Nota que hay nuevos controles y namespaces sap.f, sap.f.cards y sap.tnt.
El primer card es del ejemplo del ui5 sdk, y su estructura es asi (header y content) muy simple
Enseguida, usando un chart dentro de un card tan es simple
Este ejemplo lo puedes ver en mi github repo
hay muchos más conceptos en fiori 3, por ahora solo quería ver como completer un ejemplo simple y compartir detalles con otros. Si tienes algun ejemplo, compartan sus experiencias.
Credits:
UI 5 SDK - https://sapui5.hana.ondemand.com/sdk/#/topic
Fiori 3 - https://experience.sap.com/news/sap-fiori-3-first-parts-available-for-sapui5-developers/
Icon Explorer - https://sapui5.hana.ondemand.com/sdk/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#
- SAP Managed Tags:
5 Comments
