Create an HTML5 Module and Deploy UI to Cloud Foundry

0 %

Create an HTML5 Module and Deploy UI to Cloud Foundry

Details

// Explore More Tutorials

Create an HTML5 Module and Deploy UI to Cloud Foundry

Merve Yalcin

09/17/2019

Beginner

15 min.

Create a UI in Neo and deploy it to Cloud Foundry via a multi-target application.

You will learn

How to add ABAP services to multi-target application
How to create HTML5 module
How to deploy UI to Cloud foundry
How to check application existence

Step 1: Create multi-target application

Login to your SAP Cloud Platform Cockpit with your global account and choose your Neo subaccount.
Click Services and choose SAP Web IDE Full-Stack.
Click Go to Service.
Login to your SAP Web IDE account and 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 and select your global account.
Select Subaccounts.
Select your subaccount.
Copy your API endpoint for later use.

Done

Log on to answer question

Step 3: Configure project settings

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.
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: MTA_Project_XXX
- Title: MTA_Project_XXX
Click Next.
Select SAP Cloud Platform Service, then click on your resource Z_I_BOOKING_XXX.
Logon to SAP Cloud Platform ABAP environment and switch back to SAP Web IDE.
Select your resource Z_I_BOOKING_XXX and click Next.
Check Selected Service Metadata and Z_I_BOOKING_XXX_VAN. Click Next.
Select Booking as OData collection, to_Country as OData navigation 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: Create index.html file

View Full Instructions

Open your HTML5 module MTA_Project_XXX, right-click on your webapp folder and select New > File.
Write index.html and click OK.

Copy this code, paste it in your index.html file and replace MTA_Project_XXX with your HTML5 module name.

<!DOCTYPE html>
<html>
 <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Booking</title>

    <!-- Bootstrapping UI5 -->
    <script id="sap-ui-bootstrap"
            src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
            data-sap-ui-libs="sap.m"
            data-sap-ui-theme="sap_belize"
            data-sap-ui-compatVersion="edge"
            data-sap-ui-preload="async"
            data-sap-ui-resourceroots='{"MTA_Project_XXX": "."}'
            data-sap-ui-frameOptions="trusted">
    </script>

    <script>
        sap.ui.getCore().attachInit(function () {
            sap.ui.require([
                "sap/m/Shell",
                "sap/ui/core/ComponentContainer"
            ], function (Shell, ComponentContainer) {
                // initialize the UI component
                new Shell({
                    app: new ComponentContainer({
                        height : "100%",
                        name : "MTA_Project_XXX"
                    }),
                    appWidthLimited : false
                }).placeAt("content");
            });
        });
    </script>

 </head>

  <!-- UI Content -->
  <body class="sapUiBody" id="content">
  </body>
</html>

Save your code.

Done

Log on to answer question

Step 8: Disable csrfProtection

View Full Instructions

In the HTML5 module open the file xs-app.json.
Set /index.html as welcome file.
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": "/index.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 9: Test UI on Cloud Foundry

Right-click on MTA_Project_XXX and select Run > Run Configurations.
Click + to add a new run configuration.
Select Run as Web Application.
Create your run configuration.
- Name: Run index.html 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.
Select the MTA_Project_XXX tile to test your application.
Select the gear symbol to add columns.
Click Select All to add all columns, then click OK.
Select Go, to see your result.
Check your result.

Done

Log on to answer question

Step 10: Deploy UI to Cloud Foundry

Right-click on your project MTA_Project_XXX and select Build > Build.
Click on the + symbol to open mta_archives.
Right-click on your mtar file MTA_Project_XXX_0.0.1.mtar and 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.
Check your deployment.

Done

Log on to answer question

Step 11: Check app existence on Cloud Foundry and run as a business user

Login to your SAP Cloud Platform Cockpit and select your global account.
Select Subaccounts.
Select your subaccount.
Click Spaces.
Select your space.
Select your application MTA_Project_XXX_appRouter.
Copy application routes URL for later use.
Switch to SAP Web IDE, select your MTA_Project_XXX and open the manifest.json file. Copy the ID and application version for later use.
Create your URL by using following:
<application_routes>/<id>-<version>/

Example Example: <application_routes>/MTA_Project_XXX-1.0.0/
Copy your URL into a browser of choice and logon to SAP Cloud Platform ABAP environment.
Select your Application MTA_Project_XXX.
Check your result.