Skip to Content

Create a SAP Fiori App and Deploy it to SAP BTP, Cloud Foundry environment

Create a SAP Fiori app using SAP-managed app router for a RAP business object from SAP BTP, ABAP Environment in SAP Business Application Studio and deploy it to SAP BTP, Cloud Foundry environment.
You will learn
  • How to create MTA projects
  • How to create SAP Fiori applications
  • How to run applications
  • How to build MTA projects
  • How to deploy MTA archive files
  • How to check deployment
  • How to open SAP launchpad service
mervey45Merve TemelJune 10, 2022
Created by
mervey45
February 23, 2022
Contributors
mervey45
jmmargo

Prerequisites

  • Trial: You need an SAP BTP, ABAP environment trial user or a license.
  • User has authorization to execute the OData service​
  • The user is Space Developer in the targeted Cloud Foundry Space​
  • Business Application Studio is subscribed and the SAP Business Application Studio Developer role collection is assigned​
  • SAP Launchpad Service is subscribed and the Launchpad Admin role collection is assigned
  • Limitation: SAP Business Application Studio must be subscribed in same subaccount as the ABAP instance
  • Step 1
    1. Log in to SAP BTP Trial cockpit and click Enter Your Trial Account.

      SAP Business Application Studio
    2. Select your subaccount trial.

      SAP Business Application Studio
    3. Select Service Marketplace and search for SAP Business Application Studio and select it.

      SAP Business Application Studio
  • Step 2
    1. Create a new dev space:

      • Name: Managed_App_Router
      • Type: SAP Fiori

      Click Create Dev Space.

      dev
    2. Click Managed_App_Router.

      dev
    3. Select Open Folder.

      dev
    4. Select projects and click Open.

      dev
  • Step 3
    1. Select View > Find Command.

      MTA project
    2. Search for Open CF: Application Router Generator and select it.

      MTA project
    3. Create MTA project:

      • MTA ID: ztravel_app_xxx
      • MTA description: Travel App XXX
      • Add router module: Managed Approuter

      Click Finish.

      MTA project
    4. Check your result.

      MTA project
  • Step 4
    1. Select View > Find Command.

      login
    2. Search for Login to Cloud Foundry and select it.

      login

    3. Press Enter to set your API endpoint.

      login
    4. Enter your email address and press Enter.

      login
    5. Enter your password and press Enter.

      login
    6. Select your global account.

      login
    7. Select your dev space.

      login
    8. Now you are logged in and your organization and space have been set.

      login
  • Step 5
    1. Select View > Find Command.

      Fiori application
    2. Search for Open Application Generator and select it.

      Fiori application
    3. Select SAP Fiori elements as application type and List Report Object Page as floorplan.

      Click Next >.

      Fiori application
    4. Configure data source, system and service:

      • Data source: Connect to a SAP System
      • System: ABAP Environment on SAP Business Technology Platform
      • ABAP Environment: default_abap-trial
      • Service: ZUI_C_TRAVEL_M_XXX(1) - OData V2

      Click Next >.

      organization
    5. Select TravelProcessor and click Next >.

      Fiori application
    6. Configure project attributes:

      • Name: ztravel_app_xxx
      • Title: Travel App XXX
      • Description: A Fiori application.
      • Project folder path:
        /home/user/projects/ztravel_app_xxx
      • Add deployment configuration: Yes
      • Add FLP configuration: Yes
      • Configure advanced options: No

      Click Next >.

      Fiori application

      HINT: Make sure, you have selected your MTA project in the folder path.

    7. Configure deployment:

      • Target: Cloud Foundry
      • Destination Name:
        <your_destination_system_url>

      Click Next >.

      Fiori application
    8. Configure SAP Fiori Launchpad:

      • Semantic Object: ztravel_app_xxx
      • Action: maintain
      • Title: Travel App XXX

      Click Finish.

      Fiori application
  • Step 6

    Check your result

    result
  • Step 7
    1. Right-click your SAP Fiori Application ztravel_app_xxx and select Open in Terminal.

      run
    2. Enter npm run start to run your application.

      run
    3. Click Go.

      run
    4. Check your result.

      run
  • Step 8
    1. Right-click your mta.yamlfile inside your SAP Fiori Application ztravel_app_xxx and select Build MTA Project.

      build
    2. Check your result. A new mta_archives folder has been created.

      build

      HINT: You can also create the mta_archives by right-click on the project > open terminal, and check where the mta_archive is present, and then run the command npm run build. The mta_archives file will then get generated.

  • Step 9
    1. Right-click your ztravel_app_xxx_0.0.1.mtarfile inside your mta_archives folder and select Deploy MTA Archive.

      deploy
    2. Check your result.

      deploy

      HINT: You can also deploy the application from command line by opening the terminal, check where the mta_archive is present, and then run the command npm run deploy.

  • Step 10
    1. Go back to SAP BTP trial cockpit, select HTML5 Applications on the left menu and select your application ztravelappxxx.

      deployment
    2. Click Go.

      deployment
    3. Check your result.

      deployment
  • Step 11
    1. Go back to SAP BTP trial cockpit, select Service Marketplace on the left menu, search for Launchpad Service and select Go to Application.

      service
    2. Click Content Providers on the left menu. Now you can see your HTML5 application. Click the refresh button.

      service
    3. Go to your content explorer and select your HTML5 app.

      service
    4. Check your result. Your Travel App XXX should appear here.

      service
  • Step 12

    Why is a second destination (step 5.7) needed?

Back to top