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.

Prerequisites:

1. In your browser, go to https://account.hanatrial.ondemand.com/ 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

http://scn.sap.com/community/hana-cloud-portal/blog/2015/05/02/flphana-cloud-platform–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 neo.app.json file as shown below.

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

Add the below code in route function of neo.app.json 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.[ https://employees-i307955trial.dispatcher.hanatrial.ondemand.com/themedesigner]

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) neo.app.json 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.

Check:

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>

https://employees-XXXXtrial.dispatcher.hanatrial.ondemand.com/?sap-theme=shell@https://shell-XXXXtrial.dispatcher.hanatrial.ondemand.com/shell

Reference guide:

https://help.hana.ondemand.com/theme_designer/frameset.htm?2b48bcc9b50a4999ba4a7c55cce935cd.html

Step4: Applying Theme Via  Bootstrap Configuration:

Prerequisites:-

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”                                             

          src=”resources/sap-ui-core.js”                                             

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

data-sap-ui-theme=”shell”                                             

          data-sap-ui-xx-bindingSyntax=”complex”                                             

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

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

         </script>

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

Check

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

https://employees-XXXXtrial.dispatcher.hanatrial.ondemand.com

Reference Guide:

https://help.hana.ondemand.com/theme_designer/frameset.htm?64db0a0fda9645e1ab64d1787318bb04.html

Please tryout and feel free to provide feedback 🙂 🙂