Making Custom Themes Future Ready Using SAP UI Theme Designer

by Gowrisankar M, SAP Technical Consultant

December 1, 2017

Obtain clarity on the steps to follow for applying a custom theme to any SAPUI5/HTML5-based applications both in the cloud and on premise. Learn some best practices for creating custom themes that are future ready and the multiple deployment options of the UI theme designer.

Learning Objectives

Reading this article, you will learn:

About the UI theme designer

How to set custom themes for SAPUI5/HTML5-based applications via a URL parameter and bootstrap configuration

How to create and import custom themes for SAPUI5 applications

How to use the UI theme designer to make custom themes future ready

The deployment options of the UI theme designer

Key Concept

The UI theme designer is a browser-based tool for cross-theming scenarios. You can use it to build your corporate identity themes by modifying one of the theme templates provided by SAP. For example, you can change the color scheme or add your company’s logo. The tool is targeted at different user groups, including developers, visual designers, and administrators. Using the UI theme designer, you can create your own themes to adapt the visual appearance of applications using one single tool for theming and branding SAP’s key user interfaces. You can apply your corporate branding and look to applications built with SAP UI technologies. The UI theme designer supports only three deployment options (ABAP, SAP Enterprise Portal, and SAP Cloud Platform), but you can apply a custom theme that you have developed using the UI theme designer across various UI clients and technologies.

The SAP UI theme designer enables you to adapt the visual appearance of your SAP business applications in accordance with your needs and corporate identity. The UI theme designer supports theming across multiple UI technologies and on different platforms. Depending on your theming requirements and on your skills, you can use the web-based WYSIWYG to adapt theming on a Quick, Expert, and Cascading Style Sheet (CSS) level.

In this section, you will see:

How to create a custom theme using UI theme designer for a deployed HTML5-based application

How to apply the created custom theme to an SAPUI5/HTML5-based application using two methods: a URL parameter and bootstrap configuration

Would you like to see this full item?

Gowrisankar M

Gowrisankar M is an SAP technical consultant specializing in SAP Enterprise Portal, SAP Fiori Launchpad, SAP HANA, SAP Cloud Platform, SAP UI theme designer, SAP Portal Service, and SAP Web IDE. Gowrisankar has more than five years of experience in SAP. He has a bachelor of engineering degree in electronics and communication.