Launching SAP FIORI apps from Central FIORI launchpad

Hello Learners,

There are various blog posts available in the market which explains various aspects of SAP Cloud Platform (NEO and Cloud Foundry environments).

Introduction

In this blog post, I will try to demonstrate you how to make your FIORI apps a productive one after successful deployment of MTA into SAP cloud foundry environment. I captured the steps to be performed based on my experience in SAP cloud foundry.

This will help the developers in our community to easily understand the missing concepts to make their tiles from central FIORI launchpad a fully functional/productive one.

Overview of SAP Cloud Platform Cloud Foundry

Cloud Foundry (or CF) is a specification and set of software tools by the Cloud Foundry Foundation. It’s entirely open source, and any company or organization can use the tools or create a system that follows the CF specifications.

SAP has implemented Cloud Foundry on its SAP Cloud Platform, as a next-generation Platform as a Service (PaaS) development and runtime environment.

More details about Cloud Foundry can be found here

Multiple services can be consumed from the cloud cockpit by navigating to the specific sub account and then to Subscriptions.

Prerequisite

As a prerequisite, make sure there is a MTA application created and built successfully in SAP Web IDE. Below are some important steps for MTA deployment.

• Configure the API Endpoint for Cloud Foundry Space in SAP Web IDE.

Configuring End Point for Cloud Foundry

• Create new MTA project from the template as shown below : New->Project from Template

Step 1- New Project from Template

Step 2- Choose Multi-Target Application

Step 3- Enter Project Name

Step 5- Use HTML5 Application Repository in MTA

Project Structure

• Add HTML5 (UI5) module into MTA project as shown below. Right Click on your project -> New -> HTML5 Module.

Step 1- Add HTML5 Module

Step 2- Add HTML5 Module

• And the Project structure would be updated as below:

Updated Project Structure

• Design your application in the newly created UI5 module and build the application.

Build the application

• Upon successful build, mta_archives folder would be created automatically.

Successful Build

• Finally, deploy the .mtar file inside mta_archives folder as below. Right click the .mtar file and choose Deploy->Deploy to SAP Cloud Platform.

Deploy to SAP Cloud Platform

Steps to follow for a productive application

Successful deployment of MTA into Cloud Foundry does not make your application a productive one in central FIORI launchpad. There are few important steps to be followed to launch the application from central FIORI launchpad in SAP Cloud Platform as below.

1. Identify your app router from the deployed MTA application in cloud platform and get the app router URL.
2. Create a destination under the sub account with the app router URL.
3. Create a destination to connect to your backend system against your cloud connector URL.
4. Create a new App in your site manager (portal service) and choose the destination (step 2) created in system drop down.
5. Update the xs-app.json file with destination created in step 3 to connect the backend system.
6. Create FLP module in your MTA project and add the web module into FLP using valid semantic object and action.
7. Build and deploy again.

1) Identify app router

User calls the webApp through the AppRouter, which provides a central point of entry to business applications.The request is redirected to XSUAA and the user needs to login. Then a JWT1 (JSON Web Token) is created and sent to AppRouter. JWT1 is then cached by the AppRouter.AppRouter forwards the request to the relevant Web-app URL which is defined as destination, it also passes the JWT1 token with credentials. 

Referred from https://blogs.sap.com/2017/07/13/part-2-how-to-use-the-sap-cloud-platform-connectivity-and-the-cloud-connector-in-the-cloud-foundry-environment/

Find the app router under Applications of your sub-account or space ( based on your account setup).

Identify AppRouter

Open your AppRouter and copy the AppRouter URL under application routes as shown below.

AppRouter URL

2) Create Destination for your AppRouter

Create a new destination with the AppRouter URL copied in the previous step.

Go to your sub account -> Destinations ( in the navigation pane) -> Click New Destination button.

Destinations in sub account

Fill the mandatory fields and Save.

New Destination

3) Create Destination against Cloud Connector

Follow the same steps as above to create a new destination for your back end system.

Copy the cloud connector URL from your sub account -> Connectivity -> Cloud Connectors.

Destination to connect backend system

4) Create new App in your Central FIORI Launchpad

Go to your portal service -> Site Manager – Content Manager to create a new App. Click +New -> App.

Create New App

Enter App Title, choose the destination created in step 2 in System drop down field and enter the name of your UI5 component and Save the changes.

Create New App – 1

5) Update xs-app.json file

Please go back to your web IDE, open your MTA project and edit xs-app.json file in your web (UI5) module. Insert the below snippet as the first two parameters of your “routes“.

This is required for your web module to identify the backend destination configured in Cloud Cockpit and helps you in interacting with oData services in the backend system.

{
  "source": "^/sap/opu/odata/(.*)$",
  "destination": "{Enter name of destination created in step 3}",
  "csrfProtection": false
}, 
{
  "source": "^/sap/bc/ui5_ui5/(.*)$",
  "destination": "{Enter name of destination created in step 3}"
}

And your updated xs-app.json file should appear like below:

xs-app.json file

6) Create Launchpad module in your MTA Project

Right click your MTA project and add new launchpad module. Project – > New – > SAP FIORI Launchpad Site Module.

Create FLP Module

Go to your web app, open manifest.json file and make sure semantic object and action is added. If not, please create valid semantic object and action as below.

Update manifest.json with semantic object and action

Expand your FLP module folder and open CommonDataModel.json file. FLP-> portal site -> CommonDataModel.json. Click + button to add your application based on the intent just defined in the manifest.json file.

Add Application into FLP module

And the file should appear like below:

Updated CommonDataModel.json file

7) Build and Deploy

Build your MTA project again. Deploy the re-generated .mtar file into SAP Cloud Platform.

And finally, launch the application from your Central FIORI launchpad.

Hope this information finds useful for you all. We saw how it is possible to launch a UI5 Application from Central FIORI launchpad out of the deployed MTA project(cloud foundry environment) by following few important steps.

See you soon with some other interesting topic!

Thanks,

Vj