Create and Apply Custom Theme to SAPUI5 Application
| What’s new |
|---|
|
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?frameset=/en/fa/6af135cbcd447390b459de0ce1e607/frameset.htm
- 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.
Nice blog!!! Thanks for sharing.
Regards,
Saurabh
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
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
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.
Hi Anil,
I do not have specific information on this but I guess it could be done through CSS tab.
Regards,
Chandra
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
Very useful document and well explained.
Very nice blog. Thank you!
Jan
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
Good to hear that you liked this document ! Thanks
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?
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
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
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
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
Hi Balajee,
Which URL are you referring? Please clarify.
Regards,
Chandra
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
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.
I figured it out and now I could able to load. It was the protocol issue. Thanx all for ur help
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.
Create a new discussion thread in the SAPUI5 Developer Center space, I haven't worked with Fiori.
Great blog Chandra
Thanks for sharing
Regards,
Vivek
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
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
Perfect!!!
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
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
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)
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
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-f80636512a08?QuickLink=index&overridelayout=true&59296318497437 Is this only related to Launchpad or APP as well? Regards, Bhavin
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
Hi Vidya,
Please open new thread as discussion and provide more information with screenshot.
Regards,
Chandra
Hi Chandrashekhar,
thank you for this information!
You wrote:
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
Thank you for the amazing blog..very useful!
Very informative... Thanks for sharing
The link here is not working https://themedesigner.hanatrial.ondemand.com/
does anybody know where we can access this tool?
Thanks for sharing
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
Regards,
Chandra
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
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
Thanks for sharing
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
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!
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.
First save the theme as a custom theme and then edit it.
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
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?
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.