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

8 Comments

You must be Logged on to comment or reply to a post.

Paul Hardy

November 19, 2021 at 1:56 am

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