Create and Deploy HTML5 and SAP Fiori Launchpad Site Modules

0 %

Create and Deploy HTML5 and SAP Fiori Launchpad Site Modules

Details

Create and Deploy HTML5 and SAP Fiori Launchpad Site Modules

2020-03-23

Beginner

15 min.

Create HTML5 Module and SAP Fiori Launchpad Site Module. Deploy your UI to Cloud Foundry and run your application as a business user.

You will learn

How to add ABAP services to multi-target application
How to create HTML5 module
How to create SAP Fiori launchpad site module
How to deploy UI to Cloud Foundry
How to run application as business user

Prerequisites

You need a SAP Cloud Platform ABAP Environment trial user or a license.
You need to have enough quota for HTML5 application and portal services. These services can be found in the entitlements of your subaccount.

Step 1: Create multi-target application

If you are using your trial user, then login to your SAP Cloud Platform trial cockpit and select Launch SAP Web IDE.

Otherwise login to your SAP Cloud Platform cockpit, click Services, choose SAP Web IDE Full-Stack and click Go to Service.
In your SAP Web IDE account select File > New > Project from Template.
Search for multi-target, select Multi-Target Application and click Next.
Enter project name MTA_Project_XXX and click Next.
Enter MTA_Project_XXX as application ID, select 0.0.1 as application version.
Check Use HTML5 Application Repository and click Finish.

Done

Log on to answer question

Step 2: Copy API endpoint

Login to your SAP Cloud Platform cockpit trial and select trial.

Or Login to your SAP Cloud Platform cockpit and select your global account. Select Subaccounts and your subaccount.
Copy your API endpoint for later use.

Done

Log on to answer question

Step 3: Configure project settings

Switch to SAP Web IDE and right-click on your project MTA_Project_XXX select Project > Project Settings.
Select Cloud Foundry as Project and custom Cloud Foundry settings.
- API Endpoint: <your_api_endpoint>
- Organization: <your_organization>
- Space: <your_space>
Click Save.

Done

Log on to answer question

Step 4: Add ABAP service to multi-target application

Select your project MTA_Project_XXX > New > SAP Cloud Platform Service.
If you are using the SAP Cloud Platform trial cockpit, search for ABAP, select abap-trial and click Next.

If you are using the SAP Cloud Platform cockpit, then search for ABAP, select it and click Next.
Select Reuse instance, your instance, provide a resource name and click Finish.

Done

Log on to answer question

Step 5: Create HTML5 module

Right-click on your project MTA_Project_XXX and select New > HTML5 Module.
Choose List Report Application and click Next.
Provide following information:
- Module Name: TRAVEL_APP_XXX
- Title: TRAVEL_APP_XXX
- Namespace: namespace_xxx
Click Next.
Select SAP Cloud Platform Service, then click on your resource.
Logon to SAP Cloud Platform ABAP environment trial or SAP Cloud Platform ABAP environment and switch back to SAP Web IDE.
Select your resource ZUI_C_TRAVEL_M_XXX and click Next.
Check Selected Service Metadata and click Next.
Select TravelProcessor as OData collection and click Finish.

Done

Log on to answer question

Step 6: Remove destination service resource

Open your mta.yaml file, click on MTA Editor and Resources.
Select your destination resource dest_MTA_Project_XXX and delete it.
Save your mta.yaml file.

Done

Log on to answer question

Step 7: Disable csrfProtection

View Full Instructions

In the HTML5 module open the file xs-app.json.
Add the csrfProtection property to the route in order to disable csrf token protection in the UI. Create your run configuration. Therefore add the csrfProtection property in your xs-app.json file.

Your code should like following:

 {
  "welcomeFile": "/test/flpSandbox.html",
  "authenticationMethod": "route",
  "logout": {
    "logoutEndpoint": "/do/logout"
  },
  "routes": [
    {
      "source": "^/sap/opu/odata/IWFND/CATALOGSERVICE;v=2/Annotations(.*)$",
      "target": "/sap/opu/odata/IWFND/CATALOGSERVICE;v=2/Annotations$1",
      "authenticationType": "xsuaa",
      "service": "com.sap.cloud.abap",
      "endpoint": "abap"
    },
    {
      "source": "^/sap/opu/odata/sap/Z_I_BOOKING_XXX/(.*)$",
      "target": "/sap/opu/odata/sap/Z_I_BOOKING_XXX/$1",
      "authenticationType": "xsuaa",
      "service": "com.sap.cloud.abap",
      "endpoint": "abap",
      "csrfProtection": false
    },
    {
      "source": "^(.*)$",
      "target": "$1",
      "service": "html5-apps-repo-rt",
      "authenticationType": "xsuaa"
    }
  ]
}

Save your file.

Done

Log on to answer question

Step 8: Test UI on Cloud Foundry

Right-click on TRAVEL_APP_XXX and select Run > Run Configurations.
Click + to add a new run configuration.
Select Run as Web Application.
Create your run configuration.
- Name: Run TRAVEL APP XXX on Cloud Foundry
- Select your flpSandbox.html file.
Click Run on Cloud Foundry, select Without Frame and click Save and Run.
Logon to your SAP Cloud Platform ABAP environment trial or SAP Cloud Platform ABAP environment.
Select the TRAVEL_APP_XXX tile to test your application.
Select Go, to see your result.
Check your result.

Done

Log on to answer question

Step 9: Create SAP Fiori launchpad site module

Open SAP Web IDE and right-click on your project MTA_Project_XXX and select New > SAP Fiori Launchpad Site Module.
Create a SAP Fiori launchpad site module:
- Module name: FLP_Site_Module_XXX
Click Finish.

Done

Log on to answer question

Step 10: Create inbound tile

Open manifest.json and select Navigation.

Create semantic object:
- Semantic object: Travel_App_XXX
- Action: display
Create inbound tile:
- Title: Travel_App_XXX
- Subtitle: Travel_booking_application
- icon: sap-icon://sap-logo-shape
Save your changes.

Done

Log on to answer question

Step 11: Create SAP Fiori launchpad site module

Open the CommonDataModel.json file in FLP_Site_Module_XXX and click Add Group.
Create new group:
- Group name: Travel App XXX
Click on your group.
Add your project app Travel_App_XXX to your group and click Select.
Now your project app Travel_App_XXX is added to your group.

Done

Log on to answer question

Step 12: Deploy UI to Cloud Foundry

Right click on MTA_Project_XXX and select Build > Build with Cloud MTA Build Tool (recommended).
Open mta_archives.
Right-click on MTA_Project_XXX_0.0.1.mtar, select Deploy > Deploy to SAP Cloud Platform.
Deploy your mtar file to SAP Cloud Platform.
- Cloud Foundry API Endpoint: <your_api_endpoint>
- Organization: <your_organization>
- Space: <your_space>
Click Deploy.

Done

Log on to answer question

Step 13: Run application on Cloud Foundry as business user

Open SAP Cloud Platform cockpit trial or SAP Cloud Platform cockpit and navigate to your trial subaccount.
Select your space dev.
Select MTA_Project_XXX_appRouter.
Click on your application routes to open your application in your launchpad.
Logon to your SAP Cloud Platform ABAP environment trial or SAP Cloud Platform ABAP environment system.
You application is now available as a tile in the launchpad. Select your application Travel_App_XXX.
Click Go to see your result.
Check your result.