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.
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.
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.
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.
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.
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.
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.
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.
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”)
2.Add the id and title
3.Add a launchpad URL and name (URL from your launchpad from CPP)
4.The Launchpad editor is now open and we can edit different aspects
Using the quick edit tool I’ve changed a few basic elements from the launchpad’s theme:
a) Company Logo
b) Background image & text color
c) Tile’s appearance
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.
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.
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
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