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.
<scriptid='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!