SQL Server administration and T-SQL development, Web Programming with ASP.NET, HTML5 and Javascript, Windows Phone 8 app development, SAP Smartforms and ABAP Programming, Windows 7, Visual Studio and MS Office software SAP ABAP Programming and HANA Database Tutorials
Development resources, articles, tutorials, samples, codes and tools for .Net, SQL Server, Windows, Windows Phone, SAP and ABAP, like SAP UI5, Screen Personas, etc.




CRM Companies List
Web Based CRM Software


SAP Fiori UI Theme Designer Tutorial

SAP Fiori UI Theme Designer enables enterprise customers to customize the layout of SAP Fiori apps and the LaunchPad itself by setting CSS features like background images, colors, fonts, font sizes, etc. In this SAP Fiori tutorial I just want to show ABAP developers and SAP users how they can customize Fiori apps and SAP Fiori Launch Pad on their environments.

SAP provided a demo system for beginners to SAP Fiori at https://demo-fioritrial.dispatcher.hana.ondemand.com/. You can also use this free demo site for testing SAP Fiori and UI Theme Designer for SAP Fiori.

Here is a customized SAP Fiori theme using UI Theme Designer

customized SAP Fiori theme using UI Theme Designer

Press on Cloud icon on top menu.
From context menu displayed choose Customize Theme menu option.

SAP Fiori UI Theme Designer

Then launch UI Theme Designer.

On the right side of the Theme Editor, there are short-cuts for reching the theme customizable properties.
These are like Quick items containing frequently used theme properties.
Expert view which containes numerous options to configure.
Also Palette and CSS views enables developers to modify a theme according to their requirements.

Developers can easily replace SAP logo with their company logo by drag-and-drop on Company Logo property. Similarly it is possible to change or set background image again among images of your companies to this modified theme.

Fiori Theme Designer

When you complete customizing your SAP Fiori theme, save it using "Save Draft" menu option. Then you can export the customized theme using "Export..." command. This will enable developers to export theme codes as a .zip file. This zipped file is typically about 5 MB in size.

export theme

SAP Fiori developers and administrators can import a theme outside UI Theme Designer and use it as the default theme on their SAP Fiori LaunchPad.

Using Manage Themes, developers can edit a theme and assign selected theme to site.

manage SAP Fiori themes






SAP Tutorials

SAP Tutorial

SAP Forums

SAP Tools

SAP Transaction Codes Table






Related Articles and Tutorials(http://www.kodyaz.com/sap-abap/sap-fiori-ui-theme-designer-tutorial.aspx)
SAP UI5 Themes List
SAP Fiori UI Theme Designer Tutorial
Connect SAP from Eclipse using ABAP Project
SAP Fiori Apps, Tutorials, Links and Demo Systems


Copyright © 2004 - 2017 Eralper YILMAZ. All rights reserved.
Community Server by Telligent Systems