Skip to Content
Technical Articles

Apply Custom Theme for SAP Fiori Launchpad using UI Theme Designer in SAP Cloud Platform

Dear Readers,

I hope this blog post will be helpful for you to understand how to customize your launchpad theme  using UI Theme Designer in SAP Cloud Platform.

Prerequisite

1.Register SCP trial account by following the steps in below link if not registered already.

https://developers.sap.com/tutorials/hcp-create-trial-account.html

2.Enable services Portal and UI theme Designer.

3. Create a Portal Site in Portal Service.

 

Lets see the step by step procedure,

Step 1: Click on “Go to Service” from UI theme designer service

 

Step 2: Once you entered into the service you could see the below screen. Click on “Create a New Theme”.

Step 3: Now choose a base theme and Hit “Create Theme”

 

Step 4:You can see the launchpad preview and customizing option in right side panel. Now start designing your launchpad theme.

 

Step 5: Once you have changed the theme design, Go to  “Theme” and click on “Save and Publish”.

 

Step 6: Provide your “Theme ID” and “Title” and click on “Save”

 

Step 7: Now the status has to be changed to “PUBLISHED”, If you could see any other status you can publish it again as highlighted below. Select the required theme and click on “Publish”

Step 8:Once your Theme is successfully published. It’s time for us to publish it to our Portal Site Click on “Go to Service” from portal service.

 

Step 9: Go to “Site Directory” and Hit “Edit” in your portal site.

 

Step 10: . Go to “Services and Tools” –> “Theme Manager” — > Configure

 

Step 11:Go to your newly created theme and Click on “Assign to Site”

 

Step 12: Check “Clear HTML5 application cache” and Hit on “Publish”.

 

Step 13: Now open your launchpad URL. you could see your new Theme got assigned to your site.

 

That’s it..  You have successfully applied your custom theme using UI Theme Designer.

 

Conclusion

In this blog post, We have learnt how to customize SAP Fiori Launchpad by creating a new theme and assigning it to our launchpad site.

Suggestions are welcome
Thank you:)

#HappyLearning

Regards,
Hemalatha B.

5 Comments
You must be Logged on to comment or reply to a post.
  • Excellent post, thank you so much.

    My system landscape is on-premise.

    What is the best way, create a theme in my Fiori front-end or SAP Cloud Platform?

    Best regards, Victor.

  • Hey,

     

    good guide.

     

    We are facing the problem, that our fiori 3 theme is not shown on the portal. We had a theme before fiori 3 and the changes to the old theme apply perfect and shown on the portal.

    But we can’t show the new fiori 3 portal theme on our portal page.

    Do you have any idea?

    Regards,

    Sebastian

  • Hi! Hemalatha

    Thanks for nice article. We followed all the steps in our on-premise Hana system and build new custom theme. It is working fine in dev system but when transported to production theme is shown as distorted web site. Please check attached image.

    Are there SICF services or any other services needed for theme to work properly?

    Thanks and Regards,

    AQIBTheme%20rendering%20issue

    Theme rendering issue

    /
    Theme%20rendering%20issue