Skip to Content
Product Information
Author's profile photo Yogananda Muthaiah

New SAP Fiori User Experience – Horizon visual theme

New Theme Available for SAP Fiori User Experience (Experimental)

We have introduced a new theme, the preview version of the Horizon visual theme for SAP Fiori (theme ID: sap_horizon), as an addition to the existing themes.

To preview the new theme, see https://sapui5.hana.ondemand.com/?sap-ui-theme=sap_horizon#/controls.

How to use the Horizon visual theme?

Sample Code

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>{{appTitle}}</title>

        <script>
            window['sap-ushell-config'] = {
                defaultRenderer: 'fiori2',
                applications: {
                    'fe-lrop-v4': {
                        title: 'Credits',
                        description: 'SAP Commissions',
                        additionalInformation: 'SAPUI5.Component=project1',
                        applicationType: 'URL',
                        url: './',
                        navigationMode: 'embedded'
                    }
				}
            };
        </script>

        <script src="https://ui5.sap.com/test-resources/sap/ushell/bootstrap/sandbox.js"></script>
        <script
            src="https://ui5.sap.com/resources/sap-ui-core.js"
            data-sap-ui-libs="sap.m, sap.ushell, sap.fe.templates"
            data-sap-ui-compatVersion="edge"
            data-sap-ui-theme="sap_horizon"
            data-sap-ui-frameOptions="allow"
            data-sap-ui-bindingSyntax="complex"
        ></script>
        <script>
            sap.ui.getCore().attachInit(function() {
                sap.ushell.Container.createRenderer().placeAt('content');
            });
        </script>
    </head>
    <body class="sapUiBody" id="content"></body>
</html>

SAP CPQ in Horizon Theme

SAP Commissions in Horizon Theme

SAP Commissions in Fiori 3 Theme

Final Look of Horizon Theme with all Fiori Elements

References

SAP’s UI Technologies supporting the new Horizon visual theme of SAP Fiori

The Experience Mindset — Redesigning How We Build Products at SAP

 

 

Assigned Tags

      8 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Paul Hardy
      Paul Hardy

      I wonder if next year there will be a new exciting theme which will change the line at the top from a white background to a black background, and add a circle around the "About" icon.

      Several times in it's history Oil Company BP has employed a team of consultants to redesign its logo. Each time it pays the consultants mega millions for the new design, and then has to spend many more mega-millions changing the logo on all its petrol stations, oil rigs and so forth. That is why it never has any money left over to spend on the transition to renewable energy.

      BP%20logos

      BP logos

      Author's profile photo Jeroen Vanattenhoven
      Jeroen Vanattenhoven

      Is this a kind of new High Contract theme? Or just another theme?

      Author's profile photo Yogananda Muthaiah
      Yogananda Muthaiah
      Blog Post Author

      Hi Jeroen Vanattenhoven

      Its just an another theme for all fiori elements for user experience.

      Author's profile photo Rahul Agarwal
      Rahul Agarwal

      Is dark mode coming for horizon theme?

      Author's profile photo Yogananda Muthaiah
      Yogananda Muthaiah
      Blog Post Author

      Hi Rahul Agarwal

      you will have to customize the appearance of the theme to make it dark mode from Avatar dropdown.

      Examples for Horizon elements is in below link

      https://ui5.sap.com/?sap-theme=sap_horizon#/controls

      Author's profile photo Oliver Graeff
      Oliver Graeff

      Yes, dark mode is coming, see comments in SAP’s UI Technologies supporting the new Horizon visual theme of SAP Fiori

      Author's profile photo Yogananda Muthaiah
      Yogananda Muthaiah
      Blog Post Author

      Rahul Agarwal Oliver Graeff

      Dark mode preview is here (data-sap-ui-theme="sap_horizon_dark")

      Author's profile photo Mahesh Palavalli
      Mahesh Palavalli

      this is not a dark theme 🙁 and I believe this base theme(or Themeless UI) will come if there is no theme applied or an incorrect theme applied

      https://github.com/SAP/openui5/tree/master/src/themelib_sap_horizon/src/sap/f/themes

      https://github.com/SAP/openui5/tree/master/src/themelib_sap_fiori_3/src/sap/f/themes