Skip to Content

Putting fiori theme to sap ui5 application.

Oct 05, 2017 at 03:39 PM


avatar image


I would like to ask a question about custom theming.

First of all, i'll explain, what I have done.

Theme Designer:

In Theme Designer, we opened sap_belize theme. We change a default value and saved the them as zcustom_belize. Afterwards used for the theme we changed some colors & we saved & build the custom theme. The app, that we designer is the fiori launchpad.

Now starting the fiori launchpad & fiori apps that are delivered by sap, the theme is loading like its set up in theme designer.

So for standard stuff its working fine.

We've then created a custom fiori application (master/detail template), using a simple oData service & the app works like we want except for the theming part.

we have the behaviour in launchpad, that the shell is applying the custom theme but the custom application is still in the sap_belize theme.

what we also did was downloading the theme using /ui5/theme_tool, adding it in the resource folder of the ui5 project, change the theme parameter data-sap-ui-theme and upload the project using the ui5 upload report. but then no theme is applied at all.

Kindly suggest whats need to be done to make it working.


Chandrashekhar Mahajan

Robin van het Hof

10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

2 Answers

Arjun Biswas Oct 10, 2017 at 08:59 AM

Try once by modifying all the values as per your custom theme in the theme designer. As per what I understand, you might have missed to do some modifications when you created your custom theme for the first time. Maybe something you missed is required for the theme to be applied on the launchpad.

Show 3 Share
10 |10000 characters needed characters left characters exceeded

Hi Arjun,

Thanks for your reply.. Could you please tell me in detail. ? I did download the theme and applied it in eclipse local it works. But while i upload the same set of documents no theme gets used.


You can use this following blog for more details :

Could you elaborate as, where upon uploading, the documents, no theme gets displayed


Hi Arjun,

I have done all the steps what chandra has mentioned.

Sharath M G Oct 11, 2017 at 11:26 AM

Ideally, if any theme parameter is applied, it should take up the theme in which Fiori launchpad is assgined.

To run your app with custom theme, you need to provide the custom theme as a parameter by copying the full link in the UI5_Theme_tool.

First, run the app with the custom theme as a parameter and confirm if the theme is getting applied. Once you confirm that link the same in launchpad and test.



Show 2 Share
10 |10000 characters needed characters left characters exceeded

Yes Ideally it should happen. But the FLP configurations has been done in such a way that the index.html is the entry point . i guess when i use component.js file to enter thenthe FLP theme will be added automatically. I am assuming thats the reason.

When i go to the theme tool and use the link and send it as url parameter (ui5 Link+theme Link) it works. But still the company logo and the flp title bar doesnt come up.

So i downloaded the theme and then upload it thorught he bsp but still its not getting applied.

Today somehow I have manged to run the theme but the rendering doesn't happen correctly and i get many errors "Could not load theme parameter" .. what is the solution? I cannot change the url now. Do i need to recreate the url in the ui code


Don't download the theme into your project and refer it

It is a temporary solution and not recommended in real time usage. You should refer to the theme on the server.. using the link in theme tool.

Are you using FLP 2.0? Share some screenshots .. if any especially with errors