Skip to Content

Deploy an SAP Fiori App to SAP Cloud Platform

Deploy a SAPUI5 app to your SAP Cloud Platform subaccount to use in a Portal freestyle site.
You will learn
  • How to connect to the SAP Gateway demo system OData service
  • How to get your apps from the GitHub repository
  • How to access SAP Web IDE
  • How to import a SAPUI5 app into Web IDE
  • How to deploy the app to your SAP Cloud Platform subaccount

Prerequisites

Any SAPUI5 app that is deployed to an SAP Cloud Platform subaccount, can be added to a portal site. In this tutorial we are going to show you how to deploy the ProductsList SAPUI5 app to your subaccount. We will then add this app to a launchpad page in your freestyle site.

  • Step 1

    First set up a destination and its parameters for making a connection to the SAP Gateway demo system OData service from your SAP Cloud Platform subaccount.

    1. From your SAP Cloud Platform Cockpit, click Connectivity > Destinations and click New Destination.

      Create destination
    2. Define the following properties:

      Field Value
      Name ES5
      Type HTTP
      URL https://sapes5.sapdevcenter.com
      Proxy Type Internet
      Authentication BasicAuthentication
      User Your ES5 user name
      Password Your ES5 password
      Destination properties
    3. Click New Property and define the following properties:

      Field Value
      sap-client 002
      Usage Backend
      WebIDEEnabled True
      WebIDESystem ES5
      WebIDEUsage odata_gen, odata_abap, bsp_execute_abap
      Additional properties

      The Usage property is not in the list of properties. In order to consume SAP backend apps, (SAP GUI for HTML and Web Dynpro ABAP) in SAP Cloud Platform Portal sites, you must add it manually with value Backend.

    4. Click Save.

    5. Click Check Connection.

      Verify that you get the following message:

      Connection to ES5 established
  • Step 2

    The SAP Cloud Platform Portal tutorial GitHub repository contains various SAPUI5 applications, Portal widgets, and Shell plugins used in Portal tutorials. Once deployed to your SAP Cloud Platform subaccount, they are available to add to your Portal site.

    1. Go to SAP Cloud Platform Portal Tutorial Samples.

    2. Click the Clone or download button and select Download ZIP.

      Download repository as ZIP

      A cloud-portal-tutorial-samples-master.zip file is downloaded to your computer.

    3. Right-click the cloud-portal-tutorial-samples-master.zip and extract the repository ZIP file into a folder.

      Download repository as ZIP

      A new cloud-portal-tutorial-samples-master folder is created

    4. Open the cloud-portal-tutorial-samples-master\TECHED2018 folder.

      For this tutorial we will be using the productslist app from the Portal samples repository:

      cloud-portal-tutorial-samples-master\TECHED2018\productslist.

  • Step 3
    1. Open the cloud-portal-tutorial-samples-master\TECHED2018\productslist\ folder.

    2. Create a ZIP file from all of the underlying files:

      1. Select all of the included files (Ctrl^A).
      2. Right-click and select Add to productlist.zip.

      CREATE ZIP
    3. A new ZIP file named productlist.zip is created inside the folder.

      NEW ZIP CREATED

      .

  • Step 4
    1. In the SAP Cloud Platform cockpit, click Services in the left panel and open the SAP Web IDE Full-Stack tile.

    2. From the SAP Web IDE Full-Stack- Overview page, click Go to Service to open the development environment.

    3. Click the Development perspective:

      Development Perspective in Web IDE

    You’ve opened your development environment, now let’s import our ProductsList SAPUI5 app into it.

  • Step 5
    1. In the development workspace, select the Workspace root folder.

    2. Right-click and select Import -> File or Project.

      Import to File System
    3. From the Import dialog box, select the productslist.zip file located in the cloud-portal-tutorial-samples-master\TECHED2018\productslist\folder.

      Find zip file
    4. Check Extract Archive and make sure that Import to is /productslist.

      ProductsList zip file
    5. Click OK to start the import.

    You have imported the ProductsList app and now you need to deploy it into your subaccount.

  • Step 6
    1. Still in SAP Web IDE, right-click the productslist folder and select Deploy -> Deploy to SAP Cloud Platform.

      Deploy app
    2. On the screen that opens, click Deploy.

      Deploy

      You will get a confirmation message when your app has been deployed.

      Deployed

    Now that the Products List app exists in your SAP Cloud Platform subaccount, you will be able to add it to the launchpad page in your Portal freestyle site.

    From where do you download the Portal tutorials repository?

Back to top