Skip to Content
Technical Articles
Author's profile photo Nicolai Geburek

SAP Tech Bytes: UI Theme Designer – Applying Custom Theme to UI5 Application

In this blog post I want to share how to apply a custom theme that was built with the UI theme designer to a UI5 application that is not running in the SAP Fiori Launchpad (e.g. your local development environment).

 

The UI theme designer is part of the SAP Fiori Launchpad and let’s you modify existing Fiori themes. You can save and publish your themes that include custom colors and logos and consume them directly in the SAP Fiori Launchpad. Check out the guides in the official product documentation to learn more about this procedure.

In this blog post however, I want to show how to export a custom theme and apply it a UI5 application does not run in the SAP Fiori Launchpad, but maybe on a local machine during development or as a standalone application in the SAP BTP, Cloud Foundry environment (there are countless other options, of course). This means, we are not going to “publish” our custom theme, but export it and handle the files ourselves manually. This gives us great flexibility and countless deployment options.

 

1. Creating a Custom Theme

Let’s start by creating a custom theme in the UI theme designer. Assuming we already have admin access to a SAP Fiori Launchpad, the user menu should include the “Theme Manager”. Open it.

 

From the Theme Manager we can click “Launch Theme Designer” in the bottom left corner.

 

Inside the UI theme designer, let’s click “Create a New Theme” and select one of the available themes as a base.

 

To be able to distinguish our new custom theme from the base theme, we only need to change one (important) color in our custom theme. Change the “Focus Color” to any color you like (e.g. violet). We can see the preview of your changes in the preview section on the left (see the violet focus highlighting of the tile).

 

2. Saving and Exporting the Custom Theme

Before we can export our theme, we first have to save it. Click on “Theme” and “Save” in the top left corner.

 

We can now export our theme by clicking on “Theme” and then “Export” in the top left corner.

 

In the Export window, it is important that we expand the “Optional Settings” and include the “Source Files + CSS Resources“, as this is what we will need for our UI5 application that runs locally. We can uncheck the Unified Rendering option, which is not needed in our case.

 

After clicking “Export”, a .zip file will be downloaded. Unzip this file and open the directory. It should look like the directory in the screenshot below.

 

3. Adding the Custom Theme to the UI5 Application

We can now move the “UI5” folder of the download into our UI5 application (next to the index.html file). The UI5 application in the image below was generated with the easy-ui5 generator, but it works with any UI5 based application.

 

It makes sense to now rename the “UI5” directory to give it a little more meaning. Let’s rename it to “themes”.

 

The final change we have to make is to adjust the theme in the UI5 bootstrapping in the index.html file:

  • First, we have to set data-sap-ui-theme=”custom_quartzdark”  (we specified this name during the export in step 2).
  • Second, we also have to set data-sap-ui-theme-roots='{“custom_quartzdark” : “themes/”}’ to make the framework aware of a different than usual location for the theme.

You can learn more about setting themes in the UI5 documentation.

data-sap-ui-theme-roots='{"custom_quartzdark" : "themes/"}'
data-sap-ui-theme="custom_quartzdark"

 

We can now start our UI5 application locally and check out our custom theme.

 

4. Further Ideas

From this point on there are endless possibilities in regards to where you can store the “themes” directory. You could for example build another application which simply serves the directory and deploy it to Cloud Foundry. In this case you would have to provide the full URL to the “themes” directory (e.g. http://my.new.webapp/themes) in the data-sap-ui-theme-roots attribute. You could then update this second application and therefore change the theme of the UI5 application, without actually touching it.

Please let me know in case you have further questions or feedback.

 


sap-tech-bytes

 

 

 

 

SAP Tech Bytes is an initiative to bring you bite-sized information on all manner of topics, in video and written format. Enjoy!

 

Assigned Tags

      5 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Todor Petrov
      Todor Petrov

      Hi Nicolai,

      nice blog. Maybe you can also write one about a feature i heard of the cloud theme editor - where you can directly refer a theme in the cloud without embedding it in your application. Makes updating the theme, much easier and this applies to all applications that use it, right?

      BR,

      Todor

      Author's profile photo Nicolai Geburek
      Nicolai Geburek
      Blog Post Author

      Hi Todor,

      Yes, you can edit and re-publish your theme in the UI theme designer to make the changes available to all applications running in that SAP Fiori Launchpad, without needing to download the actual theme (which is what we did in this blog post). Generally, after publishing a theme, you can select it in the Theme Manager (see second screenshot of this blog post). No need to reselect if you only made changes. Changes might take some time to be effective though, due to caching here and there.

      If your apps are not running in the SAP Fiori Launchpad, but standalone, you could think about building a "custom theme manager" yourself. This could be a simple web application that statically serves the files of the theme, which you previously exported from the UI theme designer. You could then refer to this absolute URL instead of a relative one in the UI5 bootstrapping in the index.html. You could then update this application, which would update the theme of your UI5 application, without needing to update UI5 application itself (see last paragraph of this blog post).

      Did that answer your question?

      BR, Nico

      Author's profile photo Todor Petrov
      Todor Petrov

      Hi Nicolai,

      thank you for your answer. If I understand correct, there is no way to use the described approach for a UI5 app that doesn't run in the Fiori Launchpad? I was thinking something in the direction of using the approuter, where you can actually point to the Theming service and then adding a route to your theme (e.g. pointing to the theme service) and within the app, to just refer the respective route you defined in the approuter. That won't work, would it?

      If not, maybe its worth it to elaborate more on the "custom theme manager" you mentioned.

      BR,

      Todor

      Author's profile photo Nicolai Geburek
      Nicolai Geburek
      Blog Post Author

      Ok, now I got what you mean. Yes, this approuter approach does work. Check this out: https://answers.sap.com/questions/12887103/using-ui5-custom-theme-with-standalone-ui5-apps-on.html

       

      Author's profile photo Jeroen Vanattenhoven
      Jeroen Vanattenhoven

      We are also trying this. We have a launchpad with ui5 applications using custom themes, but we also would like to use standalone ui5 applications using those same custom themes.

      Using the path to the themes on the server, only worked when including the cache part of the path - which doesn't seem right.

      Usnig the path to the themes on the server without the cache part ( ... /themes/~client-200 ) does not work for some reason.

      (we've contacted SAP Support for this issue). To be clear: we did not include the theme files in the sapui5 project. We would just like to refer to the custom themes since they are on the server anyway.