Skip to Content
Technical Articles

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

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

16 Comments
You must be Logged on to comment or reply to a post.
  • Hello Taranamjit Kaur Dhindsa ,

    Thank for the setup process,

    I have followed these steps but I can not find scenario SAP_COM_0086 in the Communication arrangement, do I need to ask SAP to enable that Scenario or I have to create it? and if I create communication arrangement in Q System then this custom theme will be available in Q only?

    Thank you in advance,

    Kind Regards,

    Priyank

  • hi Priyank ,

     

    Welcome .Yes Scope item 2TV need to be enabled for the same as mentioned in my blog too ,

    So yes you need to raise the message to SAP for enabling the scope item .

    Yes if you enable communication arrangement only in Q system then theme will be enabled

    only for Q system .Since in Communication arrangement you would be giving the path of the theme

     

    Regards

    Taranam

  • Hello Taranam

    I have now scope available and I have followed the above steps but for some reasons when I click on the application URL I get below error. Can you please suggest what I need to check.

    HTTP Status 404 – Not Found

    Many thanks in advance

    Kind Regards,

    Priyank

    • hi Priyank ,

      I think you are checking in SCP and clicking on URL generated  .URL will not open as such since we

      have created theme .

      Once you complete the set up and maintain the URL in Communication arrangement .Theme changes will reflect in the FLP based on if you give it as default/additional theme .

      Let me know in case it doesn’t reflect in your FLP.

      Regards

      Taranam

      • Hello Taranamjit,

        When I create the theme that also creates the application on SCP

        HTML5 Application: Custom Quartz Dark (2) [Theme] – Overview

         

        And after publishing the theme I use the application URL which I created as per your guideline setup in communication arrangement and I can see the custom theme also in Q system but when I select that them SAP launchpad gets broken and I see the only plain white background and I can not do anything,

        Then I have added this parameter on the Fiori launchpad URL to start it in the SAP Belize theme ” sap-theme=sap_belize”.

        Thank you for your help

        Kind Regards,

        Priyank

         

        • hi Priyank ,

          Did you set the theme as additional theme and you are saying that from Fiori Launchpad when you select the theme from Settings->Appearance->Your custom theme its not appearing rightly.

          I would suggest 2 steps :

          1. Log off , clear cache of your browser and re login to see if it works.
          2. If step 1 doesn’t work ; check in theme designer preview if your theme color combination you selected its appearing rightly ?
          • Hello Tranamjit,

            it just worked itself I after adding the theme I had to wait 5 min for the theme to load and it works fine now. I have tested by login in a different browser and it works fine without any issue.

            Can I make changes to the same theme if I want to or I have to create a new one?

            Also if I want to add the company logo, can I go into the same theme to do that?

            Thank you for your help,

            Kind Regards,

            Priyank

          • hi Priyank ,

            Glad to know that ; ideally you should always logout and re login after applying theme changes.

            Yes you can make the changes in the same theme ; you can add the logo as well in the same theme and if you want to change colors you can do so .

            But I hope this is configured as additional theme and not default one . So your changes will not impact any existing users logged in with the default theme . If you have configured it as the Default theme then remove the same from Communication arrangement while making changes and add it as additional theme . After testing you can make it default again.

             

          • Hello Taranamjit,

            Yes, this one is set up as an additional theme for the test.

            Now I will set up as the default theme.

            Thank you very much for help.

            Kind Regards,

            Priyank