Fiori 3 – Available for developers

During last week’s SAP Tech Ed in LV, there were several cool announcements, among other topics, Fiori 3 was announced as being available for developers. I thought I’d heard this information before and I think I had also read it somewhere, however, I was not 100% clear what had changed or how I could get my hands dirty with a demo. I have been very interested in the topic for a while and being extremely close to the UI5 framework is what motivated me to write this basic and simple blog.  [AND I couldn’t attend SAP Tech Ed this year so I have some spare time now?] the same blog can be read in spanish here

I first visited the Fiori 3 page (https://experience.sap.com/news/sap-fiori-3-first-parts-available-for-sapui5-developers/) and read about how or where I need to focus my attention on to start developing UI apps using Fiori 3.

Then I visited the UI5 Road map page where I found a PDF (https://www.sap.com/products/roadmaps/finder-all.html#pdf-asset=faeb805a-d07c-0010-82c7-eda71af511fa&page=1) – other road maps for other products can also be found there.

As I collect all this information, here are some points that are interesting for me to get a better idea of what I need when delivering a Fiori 3 app.

• Fiori 3 starts on sapui5 version 1.65 (latest as of today is 1.69 so I should be ok going w the latest)
• Fiori 3 became available on April 2019 and it uses the (new) Quartz theme
• Fiori 3 apps are successors of Fiori 2 which are responsive apps (this should be taken care of by the framework itself)
• One of the main controls to be used on Fiori 3 are the cards which are smart BI components on Home Pages (or shells).
• Fiori 3 utilizes some of the sap.tnt controls
• Fiori 3 apps should use Fiori elements (sap.f controls)
• If you already had a Fiori 2 app, you could **easily upgrade to Fiori 3 as long as you didn’t have a lot of custom css. ** additional testing is required to make sure the controls are compatible and rendered correctly on all browsers where your application is being used (very basic example below)
• Fiori 3 uses the Cozy mode which displays controls more compact on the browser, for example, more rows on tables. I personally like the cozy mode on the apps rather than having a lot of blank space on the UI.

Without repeating a log of the text from the previous SAP web pages, let me jump into an example using Fiori 3 and let’s see what it looks like. This example was completed using the SCP #whereTheCoolS…. You get the idea (WEB IDE)

The first example I came to look at was a ui5 example I did last year, during the 2018 Russia world cup, using the sap_belize theme (fiori 2)  and ui5 version 1.44

It looked like this:

After changing the theme on the index.html it looked like this:

After changing the sapui5 version on the manifest.json file, it looked like this:

so only updating the theme and the version would still look ok …

but let me take a step deeper and use additional ui5 controls such as the card control in a smart landing page, maybe a chart or some other control embedded.  I intentionally left the bottom right section with nothing on it for your imagination – what would you add to this?

While Analyzing the files in the project, I noticed a few things:

• In the index.html file (we need to add ../../ to the src attribute to make sure the app bootstraps from a relative path and not from an external CDN
• The data-sap-ui-theme attribute was populated with sap_fiori_3 by default when I selected the 1.70 innovation version from the wizard
• I noticed also the attribute data-sap-ui-comonent which I had not seen before (check out also other data- attributes used here)

The structure of In my view.xml looks like this. Notice the use of the sap.f, sap.f.cards and sap.tnt controls below.

The first card is from the ui5 sdk example, and its structure looks like this (header and content) pretty simple

Now, using a chart inside a card is as easy

I am also making the example available on my github repo.

there may be a lot of other concepts to cover in Fiori 3, for now, I just wanted to see how it can be accomplished and share details with others. Please share your examples if you can.

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#