Skip to Content
Author's profile photo Gowrisankar M

Setting Themes for SAPUI5/HTML5 Applications via URL parameter and Bootstrap Configuration in [HCP TRIAL]

In this blog, we will see

1. How we can create custom theme using Theme Designer for a deployed HTML5 based application in HCP Trial

2. How we can apply the created custom theme to SAPUI5/HTML5 based application by two ways

       I. URL Parameter

      II. Bootstrap Configuration

More details can also be found in SAP help documentation.

I would like to bring on better more clarity on the steps being followed to apply a custom theme for any exisiting UI5 applications deployed in your cloud account and hence this blog.


  1. In your browser, go to and Register it.
  2. Please create and deploy a SAPUI5/HTML5 based application using Webide in HCP TRIAL account.

Note: Sample application available in below thread under section-2 Generating the ‘Employees’ Fiori application–building-managing-applications-for-fiori-launchpad-sites

Step1:Launching the UI theme designer in the same domain where your application exists.

To achieve this, we need to create a route in the file as shown below.

Open the Webide, Expand your developed SAPUI5/HTML5 application and open up the file.

Add the below code in route function of file

Deploy your application on HCP TRIAL.


      “path”: “/themedesigner”,

      “target”: {

        “type”: “application”,

        “name”: “themedesigner”


      “description”: “Route for theme designer”



Step2:- Create a custom theme Using UI theme designer:

1. Go to HCP trial cockpit–>HTML5  applications –>open the deployed app and append /themedesigner in the URL.[]

2. Now click on Target page + symbol to add the application url to customize theme. Once you design the custom theme based on your requirement, please export them and keep it in your local system. Note: please remember entered themeid and title.


3. Now import the exported them to sap Webide via right click on local folder–>import–>from file system . After this please deploy this custom theme to HCP trial. Also your custom theme structure should be as mentioned  in the screenshot.


4. Now refer your deployed custom theme(shell) in your application(SAP UI5/HTML5) file inside route function and redeploy the changes to HCP.


Step3: Applying Custom Theme Via URL Parameter:

To run SAPUI5/HTML5 applications with a custom theme, you can use the URL parameter sap-theme to set or override the initial theme.


Now you check your application using below link with the custom theme applied. In the address field of your browser, add the following to the application URL: <appdomain>/?sap-theme=<themeID>@<appdomain>/<path>

Reference guide:


Step4: Applying Theme Via  Bootstrap Configuration:


Steps 1 to 3 should have been performed already for doing bootstrap configuration.

1. Open the code for the target SAPUI5/HTML5 application to which you want to assign your theme.

Insert the following in the SAPUI5 bootstrap script tag:

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/”}

Your code should be like below,

<script id=”sap-ui-bootstrap”                                             


          data-sap-ui-libs=”sap.m,, sap.ui.commons”                                             



data-sap-ui-resourceroots='{“employees”: “./”}’                                             

data-sap-ui-theme-roots='{“shell” : “/shell/UI5/”}’>



2. Redeploy application to HCP for the changes to be reflected


Launch your application URL via a Browser. You may notice the custom theme applied to your application directly using Bootstrap configuration.

Reference Guide:


Please tryout and feel free to provide feedback 馃檪 馃檪

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Former Member
      Former Member

      Quite informative.. Nice solutions for the customers to use their own themes.

      Author's profile photo Guru Raj
      Guru Raj

      Hi Gowrisankar,

           Nice Blog, very informative...

           I tried this but not able apply theme to InputField...




      Author's profile photo Chris Paine
      Chris Paine

      Very helpful, thank you. I just wish more of the css classes were available in the theme editor.

      I assume that you have a step to remove the theme editor path when you go live with the app 馃檪 ?

      Author's profile photo Chinmaya Gorachanda Chaudhury
      Chinmaya Gorachanda Chaudhury

      Hi Gowrisankar,

      Very well explained...  Thank you for this informative blog.

      It is definitely helpful.



      Author's profile photo 诪转谉 住讘讟讬
      诪转谉 住讘讟讬

      hii.. i didn't quit understand what to put in the url box. is it the url of the app?(the url of the sap web ide) or is it the url of the theme designer it self?

      Author's profile photo Akshaya Parthasarathy
      Akshaya Parthasarathy


      I'm getting 404 error when I append /themedesigner after deployment

      Author's profile photo Akshaya p
      Akshaya p

      Hi Im not able to get my new theme after following the bootstrap method. Please help