Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
cancel
Showing results for 
Search instead for 
Did you mean: 
yogananda
Product and Topic Expert
Product and Topic Expert
2,370

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