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
Development resources, articles, tutorials, code samples, tools and downloads for SAP HANA and ABAP, HANA Database, SQLScript, SAP UI5, Screen Personas, Web Dynpro, Workflow

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


Install SAP Free
CRM Companies List
Web Based CRM Software

Copyright © 2004 - 2021 Eralper YILMAZ. All rights reserved.