Skip to Content
Technical Articles

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%20End%20Point%20for%20Cloud%20Foundry

Configuring End Point for Cloud Foundry

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

New%20Project%20from%20Template

Step 1- New Project from Template

 

Choose%20Multi-Target%20Application

Step 2- Choose Multi-Target Application

 

Enter%20Project%20Name

Step 3- Enter Project Name

 

Use%20HTML5%20Application%20Repository%20in%20MTA

Step 5- Use HTML5 Application Repository in MTA

Project%20Structure

Project Structure

 

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

Add%20HTML5%20Module

Step 1- Add HTML5 Module

 

Add%20HTML5%20Module%20-%201

Step 2- Add HTML5 Module

  • And the Project structure would be updated as below:

Updated%20Project%20Structure

Updated Project Structure

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

Build%20the%20application

Build the application

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

Successful%20Build

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%20to%20SAP%20Cloud%20Platform

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%20AppRouter

Identify AppRouter

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

AppRouter%20URL

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%20in%20sub%20account

Destinations in sub account

Fill the mandatory fields and Save.

New%20Destination

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%20to%20connect%20backend%20system

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%20New%20App

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%20New%20App%20-%201

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%20file

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%20FLP%20Module

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%20manifest.json%20with%20semantic%20object%20and%20action

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%20Application%20into%20FLP%20module

Add Application into FLP module

 

And the file should appear like below:

Updated%20CommonDataModel.json%20file

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

 

3 Comments
You must be Logged on to comment or reply to a post.