My first thought about connecting a Fiori-Launchpad-Theme with an S/4 HANA Cloud tenant was something like “will be easy”. Guess what; I’m writing an blog post for this subject so it will be easy for you after reading this 😉

We will use FIORI Theme Designer, running on NEO environment, to deploy a custom theme and include this theme to an S/4 Public Cloud tenant.

Use Case

At this time we do have several S/4 tenants in our landscape and all look the same. As you know this from the onPremise world too, you’re really fast on the wrong tenant and trying to change something, what’s not suspected on the target system. So my aim was to make it simple identify the tenant you’re working on by writing the name in the Fiori Launchpad (FLP) next to the company logo.

Prerequisites

=> You need the “UI Theme Designer” service enabled and roles assigned to your user on NEO environment.

=> You need to get activated scope item “2TV” on your SAP S/4 HANA Public Cloud tenant (assign to component “CA-UI2-THD” via OSS)

NEO vs. Cloud Foundry

It’s necessary to know that the FIORI Theme Designer is available on both environments. Unfortunatley, you can only use themes deployed to NEO environment in S/4 tenants. The version on Cloud Foundry is used for e.g. UI5 apps, running on the CF environment:

App-Router

Every released theme at the “Theme Designer” will be deployed to the NEO environment automatically. As the Communication System is reflecting to only one application on the NEO environment, this application will act as router. Therefore it’s called App-Router and is deployed on NEO environment as well.

Add a new application with one file called “neo-app.json” and this coding:

{
	"authenticationMethod": "none",
	"securityConstraints": [{
      "permission": "AccessApplicationDescriptor",
      "description": "Access application descriptor",
      "protectedPaths": [
         "/neo-app.json"
      ]
     }],
	 "routes": [
		 {
			 "path": "/",
			 "target": {
			 "type": "service",
			 "name": "theming",
			 "preferLocal": true,
			 "entryPath": "/themes"
		 },
			"description": "Themes"
		 }
	 ]
}

Note: Like the deployed theme, this application does not have to be protected by any role. It’s required to be called from everyone without access to be used in an S/4 tenant.

Realize and deploy a custom theme

Open FIORI theme designer on NEO and select the UI5 version of your S/4 tenant in the top-right area.

Note: You can identify your UI5-Version, opening your FLP of S/4 tenant, click your user-icon on the top right and go to “about”.

Play around with your theme, change colours and add the logo of your company.

I added a small code snippet in the “CSS” tab, to add a text next to the logo, by using CSS 3.0.

Afterwards, hit “Save & Release” and you will find your theme on the NEO environment within a few minutes:

You can check the deployed theme, ability, version and timestamp of deployment, by using the app-router path, the name (themeID) of your theme and your requested UI5 version:

https://themes-<your_instance>.dispatcher.eu2.hana.ondemand.com/UI5/sap/ui/core/themes/<your_themeID>/library.css?sap-ui-dist-version=<your_UI5_version>

If this link is forwarding you to sap-ui5-default page, the deployment did not work. Try again deploy your theme and wait several minutes before trying again. Otherwise it will appear a response from the theming service:

Comunication Scenario & Arrangement

Start by creating a Communication System: Insert the “https://themes-<your_instance>.dispatcher.eu2.hana.ondemand.com” URI as “Host” and add a “User for Outbound Communication” with “none” authority.

Create a new Communication Arrangement for scenario “SAP_COM_0086”, select the new created Communication System (1) and fill in your themeID (2):

Before saving … read the next chapter:

Caching issues

Due to different reasons, like Cross-Site-Scripting policies and perfomance issues, SAP did implement a way to cache the deployed theme from NEO environment in an own S/4 repository. By activating the Communication Arrangement, S/4 will fetch the last version from the mentioned deployed theme and save it on S/4 owned space. Therefore this kind of cache is some kind of a copy:

At the end the user will fetch the cached theme from S/4 to his client.

This can take up to 10 minutes and you will receive broken-FLP-pages on the beginning and the console of your browser will tell you, that some files are not available (404) or accessable (403). After refreshing a lot of times, you will receive more and more files from the cached-version and able to see the changed theme of your S/4 tenant FLP.

You can force S/4 to reload / fetch again a new version of your theme, by selecting the scenario (1) and “Reactivate” (2) the Communication Arrangement:

So keep in mind, changing and deploying your theme in Theme Designer is not enough and will not change the cached version. You will need to reactivate it!!!

As you know how to see which version and deployment-timestamp your deployed theme has, you can do this as well for your theme on S/4. Therefore open your debugger (F12), and search for the library.css – you will identify again your themeID and the timestamp (highlighted):

Conclusion

Especially talking about caching issues, it’s all the time annoying and taking us developers so much time and energy (and gray hair). This caching mechanism, used by SAP, is simple and does have understandable reasons. Unforunatley it wasn’t quite easy to get support by OSS to this area, as it’s quite new and the solution behind isn’t transparent to all of them. So I hope this post is helping the next one, jumping in this topic and trying to change the theme for FLP in the world of S/4 HANA Cloud! Good luck!