SAP S/4HANA Cloud : Setting up Custom UI Theme

[taranam]

Customizing UI theme for the SAP Fiori Launchpad with your own logo / color theme is the most common requirement that customers will have for their companies . We can  set a default custom theme , which will be applied for all the users . Or we can additionally create a custom theme that users can select in the user settings of their SAP Fiori Launchpad.

While working on similar requirement ; I was able to find the information in bits and pieces but had many doubts while creating custom theme in SAP S/4HANA Cloud.So thought to put all the pieces together and in future it would help people searching for the same requirement .

Prerequisite :

• SCP Account


• SAP S/4HANA Cloud system with role SAP_BR_ADMINISTRATOR


• UI Theme Designer Service enabled in SCP : It allows you to create custom themes that use your own color scheme , background images and company logo


• Scope item 2TV has been activated ( Otherwise you will not find the communication scenario SAP_COM_0086  for UI Theme Designer Integration )

We will keep this blog post simple and will summarize what all needs to be taken care for setting up UI Theme .

Create a custom theme from UI Theme Designer

1. Open UI Theme designer service


2. Create a new Custom theme

      3. Choose the base for your theme and click on Create Theme ; for example I selected SAP Quartz Dark and click on "Create Theme" .

4. On the left pane ; select “ SAP UI5 Application Previews” and validate checkbox “SAP Fiori Launchpad” is selected.

5. In the right pane ; you can upload your Company Logo/ can customize the colors.

6. At any point you click on “Preview” in the center to check how the FLP will apppear.

7. Once done click on Theme -> Save & Publish

Below pop up will show up ; you need to fill the Theme Id and same will be used in Communication arrangement later.

Click on Save & Publish as shown above.Once the theme is published successfully you will be able to see the same in Home page of UI Theme designer with status as published .

We are done with the theme creation ; now lets move to the second part.

In case you get error "Email address needs to be supplied by Identity Provider" while doing Save and Publish of theme ; refer OSS Note 2631112.

Create HTML Application(themetest)

1. Login into your SCP account and create HTML application (Applications-> HTML5 Application->New application ).


2. Once you enter the application name; it will show up like below . Now click on pen button.

    3.Pop up will show up for clone Git Repository -> You need to click on Clone .You will see the themetest in Workspace.

4. Import the file neo-app.json ; by right clicking on themetest ->then select New->File and enter the name as neo-app.json

     5. Copy paste the below code in the file from 2TV Scope document as below

{
"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"
}
]
}

     6.  Right click on themetest (Deploy->Deploy to SAP Cloud Platform)

     7. Once its successfully deployed; you will find the Application URL. Make a note of this URL as same will be required in Communication arrangement later.

Communication Arrangement

1. Create Communication arrangement for scenario SAP_COM_0086


2. In case you want to make the theme as default for all users ; then maintain the theme against default Theme id . For making it as additional theme maintain the same against additional Theme Ids .

3.In Communication System; fill the host name where it is equal to application URL of HTML application, we created earlier.

    4. Add Outbound user; Maintain Outbound Communication user as “None”.

You need to log off and re login again for theme to be reflected. If its added as default theme then it will reflect in your FLP after you relogin . But in case you have added it as additional theme then its available as additional theme . User need to manually change to custom theme for it to reflect.

Summary : So now I have my SAP FLP customized with my own theme ; pretty simple right ?

Once you are familiar with basics of Cloud , let's get started by understanding In-app extensibility On Premise vs Cloud - refer my blog SAP S/4HANA Cloud: Extensibility Key Variations in SAP S/4HANA On Premise and Cloud