Create and Apply Custom Theme to SAPUI5 Application

[ChandraMahajan]

What's new
Update [2013-12-09] - Cloud based Theme Designer Tool

Introduction –

In this blog, we will see how we can create custom theme using Theme Designer tool and then how we can apply it to SAPUI5 application. You can also refer below SAP help documentation. There are few steps which are not clear while reading SAP Help documentation and hence I thought to share detailed steps in this blog.

References -

• UI Theme Designer - http://help.sap.com/saphelp_uiaddon10/helpdata/en/a1/18094264684230bb6510045b5b5b7c/content.htm?fram...
• Tutorial on creating theme for SAPUI5 desktop applications - http://help.sap.com/saphelp_uiaddon10/helpdata/en/60/1b8e06ba5a412090271581b3aa302f/content.htm
• Theming FAQs- https://sapui5.netweaver.ondemand.com/sdk/docs/guide/ThemingFAQ.html
• Theming SAPUI5 mobile application - https://sapui5.netweaver.ondemand.com/sdk/#docs/guide/Theming.html

Steps -

Start theme designer using transaction /UI5/THEME_DESIGNER in backed SAP system. It will open web application with below URL https://<hostname>:<port>/sap/bc/theming/theme-designer?sap-client=<client>

Open this URL in chrome browser or Firefox or IE9. It will show below screen to select existing SAP provided themes as starting point. Select sap_goldreflection theme as template theme and click on Edit button.

Now select UI5 Control Previews and add various controls.  As per SAP help documentation, I will select Shell UI element.

You can see the original and preview for added UI element along with the Quick, Expert and CSS tab on right hand side.

As displayed below, I changed the color of various properties under Quick tab. Also I will add company logo image.

After changing color properties and adding company logo, preview of the application will look as below.

To save theme as draft, we need to select option Theme --> Save Draft as displayed below.

We can publish theme with option as Theme --> Publish

It will show below screen. Provide the required details and click on Publish.

Now custom theme is ready and we can play with different UI controls and the effect of new theme on UI elements.

Let’s add UI elements as Accordion, ApplicationHeader, TabStrip, Shell etc.

ApplicationHeader – Original

ApplicationHeader – Preview

TabStrip – Original

TabStrip – Preview

Shell – Original

Shell – Preview

We can also add any SAPUI5 applications which are deployed to SAP application server to see the effect of custom theme. As displayed below, provide the link (Application URL) and name of the application and click button Add.

The preview will show the application in custom theme.

Let’s see how custom theme can be applied to standalone SAPUI5 application. To do that, we need to download the custom theme from backed SAP system.

Download theme using transaction /UI5/THEME_TOOL.

Once it is downloaded, zip file will be created with below kind of sub-folder structure.

We need to upload the content of UI5 sub folder.

We need to create folder resources and there upload sub-folders sap, ui and uiext.

Apart from this change, Change the theme name from sap_goldreflection to custom theme cm_sap_goldreflection which is assigned to data-sap-ui-theme.

<script id='sap-ui-bootstrap' type='text/javascript'           

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

data-sap-ui-theme='cm_sap_goldreflection'

            data-sap-ui-libs='sap.ui.commons,sap.ui.table'></script>

<script>

Below is the screen of the application with standard theme sap_goldreflection.

Below is the screen of the same application after applying custom theme cm_sap_goldreflection.

Note: We can also apply custom theme to SAPUI5 standalone application using URL parameter as explained below.

There is other way to apply theme with URL parameter. For deployed application, we need to add theme parameter sap-ui-theme=<custom_theme_id>@t<theme-root>

For e.g. Shell demokit application URL will become as below,

https://<host>:<port>/sap/public/bc/ui5_ui5/demokit/test-resources/sap/ui/ux3/Shell.html?sap-ui-theme=cm_sap_goldreflection@https://<host>:<port>/sap/public/bc/themes/~client-<client>

Below is the screen of custom SAPUI5 application which is deployed to backend SAP Application server.

Closing Remarks –

With Theme designer tool, we can easily create/edit custom theme and change the look and feel of SAPUI5 application as per our company branding theme.

Theme designer tool can be used to create custom theme for SAPUI5 (Desktop and Mobile Applications), Webdynpro ABAP and NWBC.

Your comments/suggestions and experience on this topic are most welcome!

Update [2013-12-09] - Cloud based Theme Designer Tool -

You can access cloud based UI theme designer tool at https://themedesigner.hanatrial.ondemand.com/ provided you have proper credentials etc.

Once your theme is ready with this tool, you can export it using  menu path Theme-->Export and can use the exported theme in your SAPUI5 application as explained earlier in this blog.

[saurabh_vakil]

Nice blog!!! Thanks for sharing.

Regards,

Saurabh

[Former Member]

Thank you for sharing.

I'd like to know what is the proper way of using custom theme from inside SAP backend system when sapui5 application is bsp-page.

The way you've mentioned (data-sap-ui-theme='cm_sap_goldreflection' )  doesn't work for me

[former_member182294]

Very useful document and well explained.

[#5]

Very nice blog. Thank you!

Jan

[ChandraMahajan]

Good Question! Please refer Theming FAQ https://sapui5.netweaver.ondemand.com/sdk/docs/guide/ThemingFAQ.html and question When my custom theme is located elsewhere, how can I load it?

This will help you to apply theme from sapui5 bsp-page.

Regards,

Chandra

[vijy_mukunthan]

Hi CM

  I was searching this document to change my company Logo. Its good that you have given clear picture of configuration.

Regards

Vijay Mukunthan

[ChandraMahajan]

Good to hear that you liked this document ! Thanks

[saurabh_vakil]

Hi Chandra,

Do you have an idea about applying custom themes to SAPUI5 applications residing on the ABAP server?

I tried to copy the theme folders within the standard create leave request app (which I downloaded from the ABAP server from SE38 and copied its content to a newly created SAPUI5 app in Eclipse) and submit the application to ABAP. But here I faced synchronization errors for multiple files within the theme folder like

File ...../.theming could not be submitted

End of line marker not supported, please use CR+LF

and the application does not get uploaded to the ABAP system. Have you tried doing this yet?

[ChandraMahajan]

Hi Saurabh,

you need not to copy theme folder to your UI5 project. you can apply the theme to deployed application using url parameter which will look something like below,

https://<host>:<port>/sap/public/bc/ui5_ui5/demokit/test-resources/sap/ui/ux3/Shell.html?sap-ui-theme=<your_custome_theme>@https://<host>:<port>/sap/public/bc/themes/~client-<client>

Regards,

Chandra

[saurabh_vakil]

Hello Chandra,

I have tried adding the sap-ui-theme URL parameter as you mentioned and it is working fine. But I wish to apply the custom theme to my stand alone SAPUI5 application globally as you have mentioned in the blog. Users should see the custom theme when they open the application without the need to explicitly add the sap-ui-theme parameter.

Regards,

Saurabh

[Former Member]

As per sap document how to apply custom branding , we need to be careful on <theme root>. The <theme root> specified in development document specified as  " https://<Theme server>:<theme port>/sap/bc/theming/themes/~client-<client number>", which is not correct. The correct <theme root> is "https://<Theme server>:<theme port>/sap/public/bc/themes/~client-<client number>"

For example

http://<App servername>:<App Port>/sap/bc/ui5_ui5/sap/ui5_mm_po_apv/index.html?sap-client=100&sap-theme=greenorangetheme@https://<Theme server>:<theme port>/sap/bc/theming/themes/~client-100

This is not correct.

http://<App servername>:<App Port>/sap/bc/ui5_ui5/sap/ui5_mm_po_apv/index.html?sap-client=100&sap-theme=greenorangetheme@https://<Theme server>:<theme port>/sap/public/bc/themes/~client-100

This is correct.

Thanks

Sanjib

[Former Member]

Hi Chandra,

When I try to load that URL, I am not getting that Available themes. It displays Theme Repository could not be read!

It ould be greatful if u can help me in fixing this issue.

Thanks,

Balajee B

[ChandraMahajan]

Hi Balajee,

Which URL are you referring?  Please clarify.

Regards,

Chandra

[Former Member]

Are you by any chance using a reverse proxy? See SAP KBA 1901147 for details. If not, share your SAP product version including Support Package and patch level information to get further assistance.

[Former Member]

I figured it out and now I could able to load. It was the protocol issue. Thanx all for ur help

[Former Member]

Hi Samuli,

I am getting a strange issue. Whenever I edit the themes of the fiori applications using theme designer, the layouting gets changed which should not happen. I dont know how how to fix it. If you can help me out in figuring this issue. can u pls.

[Former Member]

Create a new discussion thread in the SAPUI5 Developer Center space, I haven't worked with Fiori.

[Former Member]

Hi Chandra,

Whenever I try to customize the theme using the theme designer, the layout of the application changes ( Text fields are realligned differently) and also the application is not working properly. Help me in figuring it out.

Thanx,

Balajee

[Former Member]

Hello Chandrashekar

Appreciate for sharing the details on UI5. The inputs are very practical and useful.

I would want to know something specific. How do I add custom wallpaper into the existing standard theme.

[ChandraMahajan]

Anil Joshi wrote:

I would want to know something specific. How do I add custom wallpaper into the existing standard theme.

Hi Anil,

I do not have specific information on this but I guess it could be done through CSS tab.

Regards,

Chandra

[vivekbhoj]

Great blog Chandra

Thanks for sharing

Regards,

Vivek

[Former Member]

Hi Anil,

On the right side bar u have an option to add an image as a background. By adding that I could able to use the custom wall paper for the theme..:) hope it helps u.

Thanx,

Balajee

[naveen_inuganti2]

UI Theme Designer Developer Center

Please let me know if you have any inputs on the issue that I posted in comments of this Document.

Regards,

Naveen

[Former Member]

Hi Chandra,

       I created a application by sapui5 in Eclipse , it's theme not work which run as 'abap server',

         but it's ok which run as  'web application preview' in Eclipse.

         why is this?

        Hope to help me

        1、run as 'abap server'

    2、run as 'web application preview' in Eclipse

[former_member184443]

Perfect!!!

[former_member199154]

Hi Chandra,

This is a great post. I followed steps and created a customized theme based on sap_bluecrystal theme and it worked great on version 1.18.9.

Yesterday, I upgraded the UI5 commons, core, themelib_sap_bluecrystal and .m library to version 1.22.4 due to UI5 control bugs, I found the customized theme no longer works, the action sheet text is gone, tiles no longer shows up.

But if I switch back to standard sap_bluecrystal, actionsheet and tiles etc. shows up again.

This is really strange, do you experience the same issue?

Any suggestions will be greatly appreciated.

Thank you,

Siyu

[ChandraMahajan]

Hi Siyu,

Sorry but I have not tried it as you mentioned. You can execute your application and try to open developer console in chrome browser (F12) and check what errors are you getting. I guess may be some CSS related files got changed with 1.22 which might be causing the issue.

Regards,

Chandra

[Former Member]

Hi

Great Blog and I was really looking forward to developing a theme however I get a serive error - I open the U15 THEME_DESIGNER and slect the gold theme.  On the left the shell is only found in the application preview so I click on the check box and then Shell appears on the left as a word.  I click on the word and i get the service error in the middle pain as shown below.... (i notice under SICF transaction I can goto sap>bc>theming and there is no lower entry - the error seems to be looking for sap>bc>theming>themes ???)

the url of the main page is

the url it is showing in the error page is

Any ideas what is happening here?

NWBC 4.0 PL13 and IE9 (its the same on chrome and FF)

[former_member198357]

Hi Chandra,

I am trying to create a custom theme but I am not getting the EDIT button. Also, If I am selecting the theme then it is asking for application URL.

Is it related to authorization issue?

Could you please help me with the same.

Regards,

Bhavin

[former_member198357]

What is difference between this blog and following link? http://www.sdn.sap.com/irj/scn/go/portal/prtroot/docs/library/uuid/403109b4-83c1-3110-778f-f80636512... Is this only related to Launchpad or APP as well? Regards, Bhavin

[Former Member]

Hi Chandra,

Documentation looks good & easily understandable. Thanks for sharing.

I have a question. When I login into theme designer page. All the themes are set to lock. I cannot see edit button any where. Can you please advise.

Regards,

Vidya

[ChandraMahajan]

Hi Vidya,

Please open new thread as discussion and provide more information with screenshot.

Regards,

Chandra

[Former Member]

Hi Chandrashekhar,

thank you for this information!

You wrote:

We need to create folder resources and there upload sub-folders sap, ui and uiext. [..]

Apart from this change, Change the theme name from sap_goldreflection to custom theme cm_sap_goldreflection which is assigned to data-sap-ui-theme.

Is there no option without modifying an app?

For Fiori Apps it is enough to add the new theme via transaction /o/UI2/NWBC_CFG_CUST. Or is this Customizing not used for SAPUI5-Standalone (non-fiori) apps?

Thanks and regards,

Patrick

[Former Member]

Thank you for the amazing blog..very useful!

[Ashok_KumarM]

Very informative... Thanks for sharing

[former_member219960]

The link here is not working https://themedesigner.hanatrial.ondemand.com/

does anybody know where we can access this tool?

Thanks for sharing

[ChandraMahajan]

If you are getting error "HTTP Status 400 - Possible XSRF attack: no valid xsrfProtection parameter was found" then follow this note as mentioned in the document UI Theme Designer Developer Center

Note: If the error "HTTP Status 400 - Possible XSRF attack: no valid xsrfProtection parameter was found" is returned when you try to open the link above, go to https://account.hanatrial.ondemand.com, click "Log on", and accept the terms and conditions. If you now reload the UI theme designer application, the error should no longer be displayed.

Regards,

Chandra

[nha_nguyen2]

hi Chandra,

from your post: "Download theme using transaction /UI5/THEME_TOOL." . I assume I have to use SAP Logon to connect suitable system then execute transaction but I have no idea which system you're mentioning to. Would you please help?

Thanks a lot,

Nha

[ChandraMahajan]

Yes you need to use the transaction on SAP ABAP AS where UI Add-on is installed. it is generally front end server nothing but your SAP Gateway system. Refer Prerequisites - User Interface Add-On for SAP NetWeaver - SAP Library for more information.

Regards,

Chandra

[rauf_shaikh]

Thanks for sharing

[Former Member]

Hi Chandra,

I customized a theme for SAPUI5 application which is uploaded in Gateway system. The theme is reflecting fine with Theme Parameter which I got from /UI5/THEME_TOOL. I modified the SAP_FLP parameter value from sap_bluecrystal to <my custom theme ID>.

When I am accessing the application without theme parameter, my custom theme is not loading.

One more thing that I tried, I downloaded the .zip file from /UI5/THEME_TOOL, kept in the application and changed the theme name in .index.html. But still custom theme is not reflecting.

Is the SAP_FLP parameter is only for FIORI launchpad..? Why the downloaded .zip file is not working..?

Please suggest me further..

Regards,

Prasanna

[Former Member]

Hi Chandra,

Your blog is really helpful. I am trying to apply custom theme on extended app.

I created a new extension of standard app using SAP Web IDE, Default theme defined in  index.html is "sap_bluecrystal" now if user will go to Fiori launch pad-> user preferences and change theme to some new custom theme, How we can apply new theme to extension project automatically?

I am facing issues to apply custom theme on extended application only.

Please suggest.

Thanks!

[mahesh_z]

Hello Chandra,

I need to extend the GoldReflection theme , however I am not able to edit the default themes, getting a message that , these themes are read only. Does it have anything to do with user profile(authorizations / roles ) ?

Please suggest.

Thanks,

Mahesh.

[saurabh_vakil]

First save the theme as a custom theme and then edit it.

[former_member319097]

Hi, has anyone noticed that the "High Contrast Black" theme (sap_hcb) works nicely with all other controls, but not with button (sap.m.Button) ?
The background/text color is not changed... any ideas how to get it work?

Regards,
Jyrki 

[sabti]

hi Chandrashekhar,

when i open the sap folder under UI5 folder, i find a ui folder but not uiext like you showed. also, when i try to upload a folder, it just go inside her as it wants to upload a file and not a folder, should i create a zip file of the folder and upload it?

[former_member487228]

Hi, Chandrashekar,

It was a very helpful blog on theme designer and custom theme designing.

I tried to create the custom theme by following the same steps that you mentioned in this blog, I am able to create a new custom theme from the blue crystal theme.

But I have a small problem with the custom theme, we are using very old UI5 library version, that is 1.20. And the theme we are using now is also a custom theme. I tried to apply the new library version with the current theme, It won't work as expected. But when I try to apply the old version/new version with standard sap blue-crystal theme it looks good. Again when I apply our custom theme with the new library version it won't works as expected.

I tried to copy the current CSS file logic into the newly created theme, still, I am facing the same issue in loading the theme.

If I apply the same old UI5 version with the blue-crystal it works as expected with blue-crystal, when I create a custom theme from standard blue crystal theme and apply that theme, it acts weird.

Could you/anyone help me on this issue?

Help would be very much appreciated.

Thanks in advance.