Skip to Content
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 –


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.

/wp-content/uploads/2013/09/ui5_theme1_282131.jpg

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

/wp-content/uploads/2013/09/ui5_theme2_282132.jpg


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

/wp-content/uploads/2013/09/ui5_theme3_282133.jpg

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

/wp-content/uploads/2013/09/ui5_theme4_282134.jpg

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

/wp-content/uploads/2013/09/ui5_theme5_282135.jpg

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

/wp-content/uploads/2013/09/ui5_theme6_282136.jpg

We can publish theme with option as Theme –> Publish

/wp-content/uploads/2013/09/ui5_theme7_282137.jpg

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

/wp-content/uploads/2013/09/ui5_theme8_282138.jpg

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.

/wp-content/uploads/2013/09/ui5_theme9_282139.jpg

ApplicationHeader – Original

/wp-content/uploads/2013/09/ui5_theme10_282140.jpg

ApplicationHeader – Preview

/wp-content/uploads/2013/09/ui5_theme11_282141.jpg

TabStrip – Original

/wp-content/uploads/2013/09/ui5_theme12_282142.jpg

TabStrip – Preview

/wp-content/uploads/2013/09/ui5_theme13_282146.jpg

Shell – Original

/wp-content/uploads/2013/09/ui5_theme14_282147.jpg

Shell – Preview

/wp-content/uploads/2013/09/ui5_theme15_282148.jpg

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.

/wp-content/uploads/2013/09/ui5_theme16_282152.jpg

The preview will show the application in custom theme.

/wp-content/uploads/2013/09/ui5_theme17_282153.jpg

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.

/wp-content/uploads/2013/09/ui5_theme18_282154.jpg

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

/wp-content/uploads/2013/09/ui5_theme19_282158.jpg

We need to upload the content of UI5 sub folder.

/wp-content/uploads/2013/09/ui5_theme20_282159.jpg

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

/wp-content/uploads/2013/09/ui5_theme21_282160.jpg

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-uilibs=‘sap.ui.commons,sap.ui.table’></script>

<script>

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

/wp-content/uploads/2013/09/ui5_theme22_282164.jpg

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

/wp-content/uploads/2013/09/ui5_theme23_282165.jpg

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>

/wp-content/uploads/2013/09/ui5_theme24_282166.jpg

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

/wp-content/uploads/2013/09/ui5_theme25_282170.jpg

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.

To report this post you need to login first.

45 Comments

You must be Logged on to comment or reply to a post.

  1. Ilya Kalyuzhnyi

    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

     

     

     

     

    (0) 
      1. Anil Joshi

        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.

        (0) 
        1. Chandrashekhar Mahajan Post author

          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

          (0) 
        2. Balajee Bhaskaran

          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

          (0) 
  2. 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?

    (0) 
    1. Chandrashekhar Mahajan Post author

      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

      (0) 
      1. 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

        (0) 
        1. Sanjib Kumar Mallick

          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

          (0) 
  3. Balajee Bhaskaran

    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

    (0) 
      1. Balajee Bhaskaran

        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

        (0) 
      1. Balajee Bhaskaran

        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.

        (0) 
  4. huang kaiwei

    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’

    /wp-content/uploads/2014/05/1_450646.jpg

     

        2、run as ‘web application preview’ in Eclipse

    /wp-content/uploads/2014/05/2_450653.jpg

    (0) 
  5. Siyu Henningsen

    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

    (0) 
    1. Chandrashekhar Mahajan Post author

      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

      (0) 
  6. Paul Green

    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 ???)

     

    Capture.PNG

    the url of the main page is

     

    Capture.PNG

     

    the url it is showing in the error page is

     

    Capture.PNG

     

    Any ideas what is happening here?

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

    (0) 
  7. Bhavin A Shah

    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

    (0) 
  8. Vidya Goruganthu

    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

    (0) 
  9. Patrick S

    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

    (0) 
    1. Chandrashekhar Mahajan Post author

      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

      (0) 
  10. Nha Nguyen

    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

    (0) 
  11. Prasanna Seesala

    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

    (0) 
  12. S S

    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!

    (0) 
  13. 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.

    (0) 
  14. Jyrki Saario

    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 

    (0) 

Leave a Reply