Saturday 26 December 2020

SAP Cloud Platform Launchpad: Integrate apps from the ABAP Environment

In this blog I’ll demonstrate how to configure an integration between the SAP Cloud Platform Launchpad service and a Fiori application deployed in the the ABAP environment. Below is the setup with both the ABAP environment and the Launchpad service sitting in the same subaccount. The steps shown will also work across separate subaccounts.

SAP Cloud Platform, ABAP Environment, SAP ABAP Exam Prep, SAP ABAP Development, SAP ABAP Guides, SAP ABAP Career, ABAP RESTful Programming Model

Here is the application when opened directly in the ABAP environment. Notice the URL, pointing to  <ABAP environment ID>.abap-web.<Data Center>.hana.ondemand.com.

SAP Cloud Platform, ABAP Environment, SAP ABAP Exam Prep, SAP ABAP Development, SAP ABAP Guides, SAP ABAP Career, ABAP RESTful Programming Model
Fiori Elements application in ABAP environment

1. Create a destination to the ABAP environment.
 

SAP Cloud Platform, ABAP Environment, SAP ABAP Exam Prep, SAP ABAP Development, SAP ABAP Guides, SAP ABAP Career, ABAP RESTful Programming Model
Destination to ABAP Environment

Go to the subaccount cockpit and create a new HTTP destination pointing to the ABAP environment:

URL: https://<ABAP environment ID>.abap-web.<Data Center>.hana.ondemand.com

Proxy Type: Internet

Authentication: No Authentication

Additional Properties

sap-client: 100

sap-platform: ABAP

To create a tile with dynamic information, aka. dynamic app launcher, a second destination with the authentication type OAuth2UserTokenExchange needs to be configured. 

2. Configure clickjacking protection in the ABAP environment.

For security, the ABAP environment will only allow the integration with specific hosts which are entered into an allow-list. This means the hostname for the launchpad service needs to be added there.

Open the ABAP environment dashboard, go to security and open the app Maintain Protection Whitelists.

SAP Cloud Platform, ABAP Environment, SAP ABAP Exam Prep, SAP ABAP Development, SAP ABAP Guides, SAP ABAP Career, ABAP RESTful Programming Model
ABAP Environment Security apps

SAP Cloud Platform, ABAP Environment, SAP ABAP Exam Prep, SAP ABAP Development, SAP ABAP Guides, SAP ABAP Career, ABAP RESTful Programming Model
Add Trusted Hosts in the Clickjacking Protection 

Open the tab Clickjacking Protection and click on + sign and add host name for the launchpad service.

Trusetd Host Name:  <Subaccount Subdomain>.launchpad.<Data Center>.hana.ondemand.com

Schema: HTTPS

Port: 443

SAP Cloud Platform, ABAP Environment, SAP ABAP Exam Prep, SAP ABAP Development, SAP ABAP Guides, SAP ABAP Career, ABAP RESTful Programming Model

3. Configure app, catalog, group and role in launchpad service

Now the app can be added to the launchpad service. Create a new application in the launchpad Site Manager.

System:

App UI Technology:

SAPUI5 Component Name: 

SAP Cloud Platform, ABAP Environment, SAP ABAP Exam Prep, SAP ABAP Development, SAP ABAP Guides, SAP ABAP Career, ABAP RESTful Programming Model
App Configuration

The sapui5 component name of the app can be found by opening the developer tools in the browser and inspecting the index.html of the app. Check under modules, the component name is in front of the Component.js

SAP Cloud Platform, ABAP Environment, SAP ABAP Exam Prep, SAP ABAP Development, SAP ABAP Guides, SAP ABAP Career, ABAP RESTful Programming Model
index.html

Afterwards, create a group, catalog and role and assign the app to it.

SAP Cloud Platform, ABAP Environment, SAP ABAP Exam Prep, SAP ABAP Development, SAP ABAP Guides, SAP ABAP Career, ABAP RESTful Programming Model

4. Add the role to the site and assign it to user(s)

Now go to the site, click edit and add the newly created role.

SAP Cloud Platform, ABAP Environment, SAP ABAP Exam Prep, SAP ABAP Development, SAP ABAP Guides, SAP ABAP Career, ABAP RESTful Programming Model

Then switch to the SAP Cloud Platform cockpit and add user(s) to the new role collection.

SAP Cloud Platform, ABAP Environment, SAP ABAP Exam Prep, SAP ABAP Development, SAP ABAP Guides, SAP ABAP Career, ABAP RESTful Programming Model
Role Collections

5. Test the app integration

Open the launchpad site and check that the Travel app shows up as a new tile.

SAP Cloud Platform, ABAP Environment, SAP ABAP Exam Prep, SAP ABAP Development, SAP ABAP Guides, SAP ABAP Career, ABAP RESTful Programming Model
Launchpad travel tile

Open it and the app will now launch within the Launchpad service .

SAP Cloud Platform, ABAP Environment, SAP ABAP Exam Prep, SAP ABAP Development, SAP ABAP Guides, SAP ABAP Career, ABAP RESTful Programming Model
Fiori Elements App from ABAP environment in Launchpad

App from ABAP environment in Launchpad service

No comments:

Post a Comment