Skip to Content

Create and Deploy HTML5 and SAP Fiori Launchpad Site Modules

test
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
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
  1. If you are using your trial user, then login to your SAP Cloud Platform trial cockpit and select Launch SAP Web IDE.

    open web ide

    Otherwise login to your SAP Cloud Platform cockpit, click Services, choose SAP Web IDE Full-Stack and click Go to Service.

    open web ide

    go to service

  2. In your SAP Web IDE account select File > New > Project from Template.

    template

  3. Search for multi-target, select Multi-Target Application and click Next.

    multi target

  4. Enter project name MTA_Project_XXX and click Next.

    project name

  5. Enter MTA_Project_XXX as application ID, select 0.0.1 as application version.
    Check Use HTML5 Application Repository and click Finish.

    HTML5 app

Log on to answer question
Step 2: Copy API endpoint
  1. Login to your SAP Cloud Platform cockpit trial and select trial.

    global

    Or Login to your SAP Cloud Platform cockpit and select your global account. Select Subaccounts and your subaccount.

    global

    subaccount

    sub2

  2. Copy your API endpoint for later use.

    global

Log on to answer question
Step 3: Configure project settings
  1. Switch to SAP Web IDE and right-click on your project MTA_Project_XXX select Project > Project Settings.

    open web ide

  2. Select Cloud Foundry as Project and custom Cloud Foundry settings.

    • API Endpoint: <your_api_endpoint>
    • Organization: <your_organization>
    • Space: <your_space>

    Click Save.

    open web ide
Log on to answer question
Step 4: Add ABAP service to multi-target application
  1. Select your project MTA_Project_XXX > New > SAP Cloud Platform Service.

    open web ide

  2. If you are using the SAP Cloud Platform trial cockpit, search for ABAP, select abap-trial and click Next.

    open web ide

    If you are using the SAP Cloud Platform cockpit, then search for ABAP, select it and click Next.

    open web ide

  3. Select Reuse instance, your instance, provide a resource name and click Finish.

    open web ide

Log on to answer question
Step 5: Create HTML5 module
  1. Right-click on your project MTA_Project_XXX and select New > HTML5 Module.

    HTML5 Module

  2. Choose List Report Application and click Next.

    Module

  3. Provide following information:

    • Module Name: TRAVEL_APP_XXX
    • Title: TRAVEL_APP_XXX
    • Namespace: namespace_xxx

    Click Next.

    Module
  4. Select SAP Cloud Platform Service, then click on your resource.

    Choose service catalog

  5. Logon to SAP Cloud Platform ABAP environment trial or SAP Cloud Platform ABAP environment and switch back to SAP Web IDE.

    Environment

  6. Select your resource ZUI_C_TRAVEL_M_XXX and click Next.

    Service

  7. Check Selected Service Metadata and click Next.

    Service

  8. Select TravelProcessor as OData collection and click Finish.

    Service

Log on to answer question
Step 6: Remove destination service resource
  1. Open your mta.yaml file, click on MTA Editor and Resources.

    HTML5 Module

  2. Select your destination resource dest_MTA_Project_XXX and delete it.

    Module

  3. Save your mta.yaml file.

Log on to answer question
Step 7: Disable csrfProtection
  1. In the HTML5 module open the file xs-app.json.

    run

  2. 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.

    add

  3. 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"
        }
      ]
    }
    
  4. Save your file.

Log on to answer question
Step 8: Test UI on Cloud Foundry
  1. Right-click on TRAVEL_APP_XXX and select Run > Run Configurations.

    run

  2. Click + to add a new run configuration.

    add

  3. Select Run as Web Application.

    run

  4. 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.

    run
  5. Logon to your SAP Cloud Platform ABAP environment trial or SAP Cloud Platform ABAP environment.

    run

  6. Select the TRAVEL_APP_XXX tile to test your application.

    test

  7. Select Go, to see your result.

    run

  8. Check your result.

    run

Log on to answer question
Step 9: Create SAP Fiori launchpad site module
  1. Open SAP Web IDE and right-click on your project MTA_Project_XXX and select New > SAP Fiori Launchpad Site Module.

    Define inbound tile

  2. Create a SAP Fiori launchpad site module:

    • Module name: FLP_Site_Module_XXX
    Define inbound tile Click Finish.
Log on to answer question
Step 10: Create inbound tile
  1. 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

    Define inbound tile

  2. Save your changes.

Log on to answer question
Step 11: Create SAP Fiori launchpad site module
  1. Open the CommonDataModel.json file in FLP_Site_Module_XXX and click Add Group.

    Define inbound tile
  2. Create new group:

    • Group name: Travel App XXX
    Define inbound tile
  3. Click on your group.

    Define inbound tile
  4. Add your project app Travel_App_XXX to your group and click Select.

    Define inbound tile
  5. Now your project app Travel_App_XXX is added to your group.

    Define inbound tile
Log on to answer question
Step 12: Deploy UI to Cloud Foundry
  1. Right click on MTA_Project_XXX and select Build > Build with Cloud MTA Build Tool (recommended).

    Deploy UI to Cloud Foundry

  2. Open mta_archives.

    Deploy UI to Cloud Foundry

  3. Right-click on MTA_Project_XXX_0.0.1.mtar, select Deploy > Deploy to SAP Cloud Platform.

    Deploy UI to Cloud Foundry

  4. Deploy your mtar file to SAP Cloud Platform.

    • Cloud Foundry API Endpoint: <your_api_endpoint>
    • Organization: <your_organization>
    • Space: <your_space>

    Click Deploy.

    Deploy UI to Cloud Foundry

Log on to answer question
Step 13: Run application on Cloud Foundry as business user
  1. Open SAP Cloud Platform cockpit trial or SAP Cloud Platform cockpit and navigate to your trial subaccount.
    Select your space dev.

    Deploy UI to Cloud Foundry

  2. Select MTA_Project_XXX_appRouter.

    Deploy UI to Cloud Foundry

  3. Click on your application routes to open your application in your launchpad.

    Deploy UI to Cloud Foundry

  4. Logon to your SAP Cloud Platform ABAP environment trial or SAP Cloud Platform ABAP environment system.

    Deploy UI to Cloud Foundry

  5. You application is now available as a tile in the launchpad. Select your application Travel_App_XXX.

    Deploy UI to Cloud Foundry

  6. Click Go to see your result.

    Deploy UI to Cloud Foundry

  7. Check your result.

    Deploy UI to Cloud Foundry

Log on to answer question
Step 14: Test yourself
Where can you find the application routes?
×

Give us 55 seconds of your time to help us improve

Next Steps

Back to top