Skip to Content
Product Information
Author's profile photo Margot Wollny

Get Ready for SAP Fiori 3

Plenty has already been written about SAP Fiori 3 – the reimagined design, the new concepts and integration aspects. Let’s turn the talk into action: With UI5 1.65, we have made major design elements of SAP Fiori 3 available for you!

SAP Fiori 3 in a Nutshell

SAP Fiori 3 is SAP’s new target design system, which evolves the SAP Fiori design for all SAP products to fully support the Intelligent Suite, running on any device. It has been defined jointly with all the various SAP product units. They took SAP Fiori 2.0 as a starting point and established which aspects would need to be added to best support them all.

In addition to a new theme with a fresh, modern look and feel, the design of the home pages was revised. A further part is that natural language interaction and machine intelligence will become key part of the experience by integrating them into the foundation of the design.

Design Meets Technology: UI5 as an Enabler for SAP Fiori 3

As UI5 is the technology of choice for enterprise-ready SAP Fiori apps, we made every effort to provide out-of-the-box technical assets that empower customers and partners to enable the SAP Fiori 3 design system. In real terms this means UI5 delivers the SAP Fiori 3 design through the following assets, available as of UI5 1.65: Theming, Cards & Layouting, as well as Shell Bar.

Theming

Each design evolution goes along with a new styling. Therefore, the new SAP Fiori 3 theme is now available with UI5. It is called SAP Quartz Light. It is simple and minimalist, making it easy for customers to theme it to their brand.

Like all UI5 themes, the new SAP Quartz Light theme can be rendered in compact density suitable for desktop devices, as well as cozy density, which provides optimized spacing for touch devices. The size of the controls in cozy mode was reduced a bit for the SAP Quartz Light theme, which on the one hand fulfills the new UX consistency metrics, and on the other hand allows more information to be displayed on the available view port.

Cards & Layouting

One of the most requested new aspects was being able to provide more information on home pages, which the design and now also UI5 is supporting via cards.

Cards can be integrated into the Central Home and allow you to create custom pages. In addition to the title and a short description of the app, they also show a preview of the information the end user can find in the specific app.  UI5 provides six predefined types of these “Integration Cards”, each designed in a different style and contains various content formats:

With Integration Cards, you can choose between several predefined visualizations. The benefit of using Integration Cards is that each card has its own configuration file (manifest.json), which can be bound to different data sources, following a declarative approach. All Integration Card types can be found under the sap.ui.integration.widgets.Card namespace.

For UI5 apps that don’t require an individual configuration for each card, UI5 provides a standard card control calls sap.f.Card. Its header design is predefined, and its content aggregation allows the app to build any cards’ content via embedding different UI5 controls.

If you want to find out more how the Cards work, you can check the documentation.

For more convenience and to achieve out-of-the-box responsiveness and flexibility while implementing an SAP Fiori 3 home page, UI5 also provided the CSS Grid layout a while ago. This is a two-dimensional layout control based on the native browser CSS display grid, which can handle both columns and rows and properly accommodate Cards.

Shell Bar

In addition to the new Quartz theme, a new shell header bar has been aligned to be a best fit for all SAP products, and to be as simple as possible.

To benefit from this new shell header bar design of SAP Fiori 3 also on your custom home page, UI5 provides the fully-fledged Shell Bar control as an independent unit, a horizontal bar control that holds multiple child controls and is used as an application shell header.

Adopting SAP Fiori 3

The good news is that SAP Fiori 3 is basically technically compatible with Fiori 2.0, so most apps will continue working from a runtime point of view without any problems. Just switch on the new by setting the theme to sap_fiori_3and off we go!

Granted: Some minor changes have been made to the theme metrics. This means that if you have built your own custom UI5 controls, you will need to verify that they still work and look fine. The same applies if you use a custom CSS or a runtime CSS converter such as lessify – you will need to test and probably adapt a few things. Here are some pointers:

  • Try to use theme parameters instead of hard-coded colors.
  • Check the cozy mode  since the controls’ metrics for cozy mode are smaller now, allowing e.g. more lines in a table.

And another tip to bring to a close: In case you created your own custom theme on top of Belize with the UI theme designer, you will need to redo it on top of the SAP Quartz Light theme.

Cards, CSSGrid layout and the Shell Bar are still virgin, but released and to yours disposition. Assemble them in your apps, create new one and let us know how they are doing. Feedback and comments are very welcome!

 

Related Information:

Assigned Tags

      23 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Ravikant Ranjan
      Ravikant Ranjan

      Really nice piece of information. Thank you

      Author's profile photo Nigel James
      Nigel James

      Hi Margot,

      making it easy for customers to theme it to their brand.

      I certainly hope this is the case. While this has improved over the years it would be nice to have a customisable dark theme also as this has been missing in earlier versions.

      Thanks for all the great improvements.

       

      regards,

      Nigel

       

      Author's profile photo Margot Wollny
      Margot Wollny
      Blog Post Author

      There are indeed plans to provide a completely dark theme and not using contrast containers anymore, like it is with Belize Deep. But as the design is not finalized yet I cannot tell when it will be available.

      Author's profile photo Klaus Kronawetter
      Klaus Kronawetter

      Great news! Some questions though: what do you mean exactly by “Cards can be integrated into the Central Home”? Is the Central Home the Fiori launchpad? Are cards a certain way to define tiles in the launchpad (like KPI tile)? Are cards part of tile groups and catalogs? Is there a blog or documentation on how to define a new card and integrate it into the launchpad?

       

      BR, Klaus

      Author's profile photo Margot Wollny
      Margot Wollny
      Blog Post Author

      Hi Klaus,

      Good question and I just realized that I was not precise enough in my blog post about this topic. The central homepage is one important design piece of SAP Fiori 3 and you might have seen the screen shots for it already like this one here from the blog post mentioned above:

      So this would be a Central Homepage and yes it will become part of the SAP Fiori launchpad. But other than the cards itself the Central Homepage was not delivered yet by the SAP Fiori launchpad but this is planned for later this year as far as I know. Therefore I cannot provide you any details to the configuration yet.

      As you can see on this screenshot cards are an alternative to tiles to provide more precise information on the home page.

      Hope this answers your questions.

      Author's profile photo Klaus Kronawetter
      Klaus Kronawetter

      Hi Margot,

      sounds good! Thanks for clarifying.

      Author's profile photo Thilo Seidel
      Thilo Seidel

      Hi Klaus,

      just some addition to the statements made by Margot already regarding Cards, Central Home and what this is all about (which make absolutely sense) to answer your question on Cards configuration with Fiori 3.

      In general Cards can be considered as Tiles from a configuration point of view as the same qualities and configuration options do apply. This means Cards will be contained in catalogs and can be configured to be displayed in groups just as we do it today for tiles already. It is just that Cards will offer more flexibility and standardization to achieve different visualizations for data already on the FLP Homepage.

      We will soon write blog post about Cards configuration options in FLP and a general How-to. So stay tuned!

      Author's profile photo Klaus Kronawetter
      Klaus Kronawetter

      Hi Thilo,

      thanks for the additional information!

      I'm really looking forward to more posts on this topic 🙂

      Author's profile photo Jeroen Vanattenhoven
      Jeroen Vanattenhoven

      Hi Thilo,

      Has there been an update (blog post) about Cards or Fiori 3?

      Kind regards,

      Jeroen

      Author's profile photo Jeroen Vanattenhoven
      Jeroen Vanattenhoven

      This is interesting information, looking forward to the Fiori 3 openSAP course, which opens next week.

      One question: What will happen with the Overview Pages and its Cards?

      Will that coexist with the new Fiori Launchpad and the new Cards? Or will it be replaced by it?

      (I'm basically asking whether we should spend time in preparing trainings for Overview Pages :)).

      Author's profile photo Margot Wollny
      Margot Wollny
      Blog Post Author

      Sorry for the late answer but I had to check this myself with my colleagues as I am no expert when it comes to OVP. It seems that the concept for the Overview Page is not finalized yet. But for sure the attempt is to protect development efforts and ensure that current works from designers and developers can be reused in a large part.

      Author's profile photo Matt Harding
      Matt Harding

      Hi Margot,

      Looking forward to this alignment, but really hoping the "Application Title" in the shell header is a way of differentiating Launchpads, as currently SuccessFactors and Fiori Launchpad have 2 homes that otherwise look identical (to an occasional end user at least).  Would be good if I could give each Launchpad a functional name (e.g. SuccessFactors could be "The HR & Learning Hub" - with the description then saying "Home". Not sure that's the intent, but really hoping it is.

      Cheers,

      Matt

      Author's profile photo Tina Rauschenbach
      Tina Rauschenbach

      Hi Matt,

      nice to hear from you again. 🙂 You did the shell user testing with me and my colleague in Orlando.
      Exactly that's the idea. For the future when aligning our products we plan to show the name of each product directly in the shell. Attached you can have a glimpse on the current UX concept.

      Greetings,
      Tina

       

      Author's profile photo Matt Harding
      Matt Harding

      Hi Tina,

      Good memory - and for reference, that session was exactly the info I needed to help formulate where everything needs to go for the S/4HANA/SuccessFactors/Concur implementation journey I'm currently on.

      The above looks great, but one thought - What if I wanted a Tile in S/4HANA to take me straight to "Create a Leave Request" in SuccessFactors? In this case, you would be taken to a detailed screen in a new tab that would not highlight you were in SuccessFactors and the user may get a shock when they press Home and are in SuccessFactors. Not sure how big an issue this is, but maybe the product name should be visible upon fist navigating to a deep link; or always visible for this reason?

      Still thinking about deep links in S/4HANA Launchpad to other apps and whether people should just figure out which product they need to launch. Maybe search or natural language options addresses this?  I always like to think, if you were a new graduate joining a company a year after you went live with this, would you be able to figure out how to create a leave request?  e.g. Switching the product to SuccessFactors means nothing to someone encountering hundreds of tiles (in Fiori 3, this looks like it will be the case via sub tabs).

      That said, done is better than perfect - so something to consider after people are live with this!

      Thanks for the extra detail,

      Matt

      Author's profile photo Tina Rauschenbach
      Tina Rauschenbach

      Hi Matt,

       

      great to hear that our session was helpful for both sides. 🙂

      Thanks for sharing your thoughts. You are totally right and we have to carefully think about our options, do more user testings and see if this would be a potential issue once the harmonization in our products is done.

       

      Greetings,
      Tina

      Author's profile photo Former Member
      Former Member

      nice to see the continued growth/evolution in Fiori

      Author's profile photo Michael Healy
      Michael Healy

      Hi All,

      Maybe a silly question but will the implementation of the launch pad have any effect on this, ie: on prem vs the cloud? Will customers still be able to utilize Fiori 3 to its full extent if the LP is on premise? Some very interesting points made regarding the development methodology around custom CSS and future proofing. Great read.

      Michael

      Author's profile photo Babusrinath Krishnareddy
      Babusrinath Krishnareddy

      Hi Margot,

      This is excellent. Thank you for sharing information.

      I have a generic question, with FIORI 3.0 is there any parameters that would make app implementation easier than earlier versions with backend 1909 or 1610?

       

      Thanks,

      Babu

      Author's profile photo Margot Wollny
      Margot Wollny
      Blog Post Author

      Hi Babu,

      Not sure I understand your question - what kind of parameters do you mean? In general SAP Fiori 3 is a new design concept and comes with a new theme and some additional UI elements but it does not contain any new implementation concepts ...

       

      Author's profile photo Jacob George
      Jacob George

      Hi,

      Could someone elaborate on how to integrate UI5 integration cards on fiori launchpad home page?

      BG

      Author's profile photo Margot Wollny
      Margot Wollny
      Blog Post Author

      This is not yet available (see the comment of Thilo above) ...

      Author's profile photo Josef Minde
      Josef Minde

      Hello,

      I would like to use the new theme on a S/4HANA 1909 on premise system.

      Therefore I made a custom copy of sap_fiori_3 using the theme designer (version 1.48.3) of the S/4HANA system (.../sap/bc/theming/theme-designer...) to set a custom company logo and custom theme color.

      After saving and generating the custom theme and after setting it as default theme using the parameter THEME and path filter SAP_FLP in transaction /UI2/NWBC_CFG_CUST, native Fiori apps are displayed as expected, but the layout for apps using GUI for HTML is broken. Control elements are displayed much bigger and overlap each other.

      The layout is fine when I use the same apps and the same custom theme in the preview of theme designer and the layout is also fine for these apps with the theme sap_fiori_3.

      Is there anything else required to enable GUI for HTML support in the Fiori launchpad for a custom theme based on sap_fiori_3?

      Best regards,

      Josef

      Author's profile photo Margot Wollny
      Margot Wollny
      Blog Post Author

      Hi Josef,

      Unfortunately I cannot answer you question. But I would advise you to raise your question in the question section of SAP Community. In this way, many more people will see it and might answer it.