Heads up: If your joining us here, this is Exercise 3 of 3 in the SAP Cloud Platform Technical Academy (Canadian Roadshow & SAP Blogs Edition). That means these tutorials or “exercises” are extremely well-documented and will walk you through every step with screenshots and instructions.
Summary of Exercise:
In this exercise you will create a responsive SAP Fiori Launchpad using the Portal Service on the SAP Cloud Platform. You will then configure the SAP Fiori Launchpad for use with your SAP Translate (SAPUI5) application, which you will then register.
What will you use?
- SAP Cloud Platform
- SAP Web IDE
- SAP Cloud Platform, Portal Service
What will you learn?
- Create a responsive SAP Fiori Launchpad
- Configure Catalogs and Groups for a SAP Fiori Launchpad
- Register an application to a SAP Fiori Launchpad from SAP Web IDE
Let’s get started!
First, we need to access the Portal Service from our Services in the SAP Cloud Platform Cockpit.
From the left-hand side menu, Select Services and filter to the User Experience category. Select Portal.
If your service is not enabled, select the big Enable button. Once your Portal service is enabled, select Go to Service This will launch a new window with the SAP Cloud Platform, Portal service.
Create and configure your SAP Fiori Launchpad
The Portal service allows you to quickly and easily create attractive business sites that are fully integrated with SAP Fiori launchpad. The SAP Cloud Platform Portal is a web-based tool that provides a single point of access to role-based, applications, processes, and services to users in an organization.
The Portal offers two types of sites – freestyle sites and launchpad sites. It’s also possible to create a hybrid site by embedding a SAP Fiori launchpad page as an entry point for SAP Fiori apps together with other pages in a freestyle site. In this way you can enjoy the benefits of SAP Fiori launchpad, and yet have HTML, images and other types of content on other pages of your site.
Today, we’re creating a launchpad site. Select Create New Site.
You’re presented with a few options, as mentioned above. Navigate through the options to select the SAP Fiori Launchpad. Your selections should be as follows:
Site Name: SCPTA
Template: SAP Fiori Launchpad
Once created, you’ll notice the Fiori Configuration Cockpit (not to be confused with our SAP Cloud Platform Cockpit). The SAP Fiori launchpad configuration cockpit is a tool used by administrators to create new, and maintain existing, content for SAP Fiori launchpad sites.
The configuration cockpit has a header bar at the top of the screen, and a navigation menu on the left-hand side, from which you can access the various options, tools, editors, and services provided by the configuration cockpit.
From the navigation menu, select Catalogs (under Content Management).
Applications in the SAP Fiori Launchpad are organized through Catalogs, Groups, and Roles.
A Catalog is a set of apps you want to make available for one role. Depending on the role and the catalog assigned to the role, the user can browse through the catalog, choose apps from this catalog, and add them to the entry page of the SAP Fiori launchpad.
A Group is a subset of catalog that contains the apps visible on the SAP Fiori launchpad entry page. Which tiles are displayed on a user’s entry page depends on the group assigned to the user’s role. In addition, the user can personalize the entry page by adding or removing apps to pre-delivered groups or self-defined groups.
A Role contains references to catalogs and groups and provides users with access to the apps in these groups and catalogs.
As described, need to create each of the above entities for our SAP Fiori Launchpad. In the Catalogs screen, select the + (plus) button in the bottom-middle bar of your screen. This will launch a new screen that will allow you to create your Catalog. Your properties should be as follows:
Catalog Name: SCPTA Catalog
Catalog ID: scpta_catalog
(Don’t click Save yet).
Select the Roles tab.
Select the + (plus) button to launch the selection screen and choose Everyone as the Role. Select OK and then select Save from the bottom-right hand side of your screen.
Let’s configure a Group for the SAP Fiori Launchpad. Select Groups from the navigation menu (under Content Management). Select the + (plus) button in the bottom-middle bar of your screen. This will launch a new screen that will allow you to create your Group. Your properties should be as follows:
Group Name: SCPTA Group
Group ID: scpta_group
(Don’t click save yet).
Choose the Roles tab. Select the + (plus) button to launch the selection screen and choose Everyone as the Role. Select OK and then select Save from the bottom-right hand side of your screen.
Now, your SAP Fiori Launchpad is ready for your SAP Translate application.
Register your SAP Translate application to the SAP Fiori Launchpad
We begin this step of exercise in SAP Web IDE. If you don’t remember how to get back to your Web IDE, reference the beginning of Exercise #2.
Open the context menu of your sapTranslate project folder (by right-clicking on it). Select Deploy > Register to SAP Fiori Launchpad.
SAP Web IDE will walk you through a 4 (four) step process of registering your application. First, you’ll supply General Information as follows:
Application Name: SAP Translate
Description: Instantly translate texts
You’ll now configure the appearance and functionality for the tile of the SAP Translate application. In Tile Configuration, we’ll choose the following:
Title: SAP Translate
Subtitle: Instantly translate texts
Icon: (Select Browse to find the “thing-type” icon)
Here’s the exciting part – you’re going to see you newly created SAP Fiori Launchpad appear on the Assignment step. If you don’t, simply select the dropdown list and select your Launchpad and respective entities as follows:
Catalog: SCPTA Catalog
Group: SCPTA Group
You’ve made it to the Confirmation screen! This is just letting you know that because you’re registering the SAP Translate application to the SAP Fiori Launchpad, SAP Web IDE will automatically create flp-config.json (the Fiori Configuration file) in your project.
Upon finishing, you’ll receive a Successfully Registered dialog, giving you the option to open your SAP Fiori Launchpad. You may click that, but instead, select OK for now.
Publish your SAP Fiori Launchpad
Now that our SAP Fiori Launchpad is fully configured and has our SAP Translate application registered, let’s navigate back to the SAP Fiori Configuration Cockpit (if you closed this by mistake, refer to the beginning of this exercise to get back).
You will notice from the Dashboard of your SAP Fiori Launchpad, you have 1 App, 1 Group, and 1 Catalog.
In the header bar at the top of your screen you will see the Publish button (globe icon with an arrow across it). Select Publish > Publish and Open. This will publish and open your SAP Fiori Launchpad in a new tab.
If you followed the steps correctly, you should see the following:
Congratulations – you have finished all 3 (three) exercises for the SAP Cloud Platform Technical Academy (Canadian Roadshow & SAP Blogs Edition).
Feel free to try the Bonus Exercise.