Welcome to the second part of the SAP Fiori Customization Samples tutorial series. In this video we will show you how to customize your Fiori Launchpad. Let’s begin!

The Fiori Launchpad found in the Cloud Platform Portal (CPP) can be personalized in order to offer a unique experience for the users. The goal of customization is that the users can associate the launchpad with the respective business. 

The Launchpad on the Cloud Platform Portal offers tools and solutions for personalization. 

The first step that anyone should take is to access the service section in the SAP Cloud Platform Cockpit, as seen in Fig. 1.

Overview of SAP Cloud Platform

Fig. 1: Service Section found on the side menu in the Cloud Platform Cockpit 

In the “Services” Section is the “Portal” Service, that must be Enabled, as seen in Fig. 2.

SAP Cloud Platform: Service Section

Fig. 2: Shows the portal service with the “Enabled” Label 

In the Overview Section of the Portal Section we can see a short description of the service and a set of actions we can do. To access the launchpad(s) and the customization tool we have select “go to service” action, as see in Fig. 3.

Overview of SAP Cloud Platform

Fig. 3: Overview of the Portal Service and action toolbar  

The “Go to service” link opens a new window with the Cloud Platform Portal where in the menu by clicking the “Site Directory” button, as seen in Fig. 4, the portal will open the dashboards with all the sites and launchpads.

SAP Cloud Platform: Overview of Site Directory

Fig. 4: Side menu bar where the “Site Directory” button can be found 

If you are new to the CPP, or don’t have a launchpad created, create a launchpad so that you can customize it, as seen in Fig. 5.

SAP Cloud: Launchpad Overview

Fig. 5: The Arrow indicates the button to create a new launchpad 

If you have a launchpad already created select the one you want to personalize, in my example I will select the “GPE_DEMO” launchpad and enter the edit section, this will open the “Fiori Configuration Cockpit”, as seen in Fig. 6. 

SAP Fiori Configuration Cockpit

Fig.6: The Configuration Cockpit for a launchpad in CPP 

To find the Customization Tool we need to access in the cockpit the “Services and Tools” Section from the menu, as seen in Fig. 7. 

SAP Fiori: Cockpit Configuration

Fig. 7: Button For accessing the theme editing tool 

From the “Services and Tools” section we open the UI Theme Designer, as seen in Fig. 8, if you are new to theme customization your list of themes is empty.

SAP Fiori: Overview of UI Theme Designer

Fig.  8: Theme Designer’s dashboard with a few themes already created 

From this dashboard a user can create new custom themes following these steps:

1.Click Create “New Theme” and select a base theme (in my example I chose “SAP Belize”) 

SAP Fiori: Overview of Belize Theme

2.Add  the id and title 

SAP Fiori: Belize Theme Configuration

3.Add a launchpad URL and name (URL from your launchpad from CPP)

SAP Fiori: Launchpad Overview

4.The Launchpad editor is now open and we can edit different aspects

SAP Fiori: Launchpad Editor

Using the quick edit tool I’ve changed a few basic elements from the launchpad’s theme: 

a) Company Logo

Fiori Launchpad Customization

b) Background image &  text color 

SAP Fiori Launchpad: colors customization

c) Tile’s appearance

Fiori Launchpad:Title Customization

In the end we have a new unique theme for our launchpad.  Now, the final part is to save the theme and publish it so that we can apply it on our launchpad. In the Upper left corner of the Theme Designer just choose (“Save and Publish”).

After it is finished just go back to the “Fiori Configuration Cockpit” to the “Services and Tools” section and enter the “Theme Manager”. Here Find your newly created theme and assign it to your launchpad, as seen in Fig. 9.

SAP Fiori Launchpad: new theme customization

Fig. 9: The Theme Manager where we can see all our themes, import and export themes and assign them to the Launchpad 

After this step “Publish and Open” the launchpad. Firstly the new theme isn’t applied. From the Launchpad’s setting’s in the “Appearance” Section choose your new Theme, As Seen in Fig. 10.

SAP Fiori: Theme Customization

Fig. 10: Settings in the Launchpad to change the Theme 

After the changes are applied we can see the New Launchpad Theme, as seen in Fig. 11

SAP Fiori Launchpad: Theme Customization

Fig. 11: The launchpad after is applied

Now that you learnt how to customize your Fiori Launchpad, go ahead and test different designs!

You can find the first part of the SAP Fiori Customization Samples (German version) here.  This video shows you how to create a SAP Fiori Launchpad on the SAP Cloud platform and how to add apps on the Fiori Launchpad.

As mentioned at the beginning, this video is the second part of the tutorial series SAP Fiori Customization Samples. Stay close and don’t miss the following 3 parts.

If you have any questions regarding this tutorial, do not hesitate to contact me. I will gladly answer them.

Source of images: Inspiricon AG

Author
Gellert Peter-Siskovits Associate
Phone: +49 (0) 7031 714 660 0
Email: cluj@inspiricon.de