Setting Custom-Themes for HANA XS Applications - Cloud & Onpremise

The UI theme designer is SAP's browser-based tool for cross-theming scenarios.Create one consistent theme that applies to various SAP UI clients and technologies.Theme designer supports only three deployment options (ABAP, Enterprise portal and HCP) but you can apply custom theme which you have developed using UI theme designer accross various UI clients and technologies.Below picture gives you an overview on supported platforms and UI technoloies.I would like to bring on more clarity on the steps being followed to apply a custom theme for any HANA XS based applications on both cloud and on premise which uses SAP UI5 as front-end technology and hence this blog.. You must also take care for the UI5 versions. They should be the same on both systems. Otherwise the theme can be broken.

Application used in this blog: SHINE Application

Prerequisites:

Create your custom theme as per your requirment. Export your theme(.zip file), the exported theme is saved on your local machine. Please follow few blog below to create custom theme,

• http://scn.sap.com/docs/DOC-52952
• http://scn.sap.com/community/developer-center/front-end/blog/2013/09/19/create-and-apply-custom-theme-to-sapui5-application
• http://scn.sap.com/community/developer-center/cloud-platform/blog/2015/08/14/setting-themes-for-sapui5html5-applications-via-url-parameter-and-bootstrap-configuration-in-hcp-trial

Step1:- Create and Import Custom Themes to HANA System:-

1. You can create custom themes using the UI theme designer and import these themes into your SAP HANA system. In the UI theme designer tool, create and export a custom SAPUI5 theme that you want to use for your XS based application. A .zip file containing the exported theme is saved on your local machine.
2. Import the exported theme into your project in SAP HANA Studio/SAP HANA WEB IDE(Copy the contents of the .zip file into your project)
3. To register the theme in the THEME database table using the table import mechanism, create the following files in your project:

myTheme.hdbti

myTheme.csv

   4. Activate the .hdbti and .csv files by choosing Start of the navigation path and activate it.

Step2:- Applying Theme Via  Bootstrap Configuration

Insert the following in the SAPUI5 bootstrap script tag:(index.html file)

data-sap-ui-theme:  Enter the theme ID you have provided when you exported your theme from the UI theme designer to your local hard disk.

data-sap-ui-theme-roots:  Enter the theme ID and the application path you used for your mapping in the following syntax:

{"<themeId>" : "/<application path>/UI5/"}

Now check your HANA XS based application with custom theme applied

Further Reading please refer below documentation,

http://help.sap.com/saphelp_hanaplatform/helpdata/en/96/ae16b69a054cfaafed1be567885e71/content.htm

https://sapui5.netweaver.ondemand.com/docs/guide/5a2df7b50f714d8bb5e9b519a88aa1d6.html

http://scn.sap.com/community/developer-center/cloud-platform/blog/2015/08/14/setting-themes-for-sapui5html5-applications-via-url-parameter-and-bootstrap-configuration-in-hcp-trial

https://help.hana.ondemand.com/theme_designer/frameset.htm

Get back to me if you need more information