Skip to Content

Create a SAP Fiori App in Visual Studio Code and Deploy it to SAP BTP, ABAP Environment

Create a SAP Fiori Elements app for a RAP business object from SAP BTP, ABAP Environment in Visual Studio Code and deploy it to SAP BTP, ABAP Environment.
You will learn
  • How to create an SAP Fiori application
  • How to run an SAP Fiori application
  • How to deploy an SAP Fiori application
mervey45Merve TemelJune 10, 2022
Created by
mervey45
December 29, 2020
Contributors
mervey45
jmmargo

Prerequisites

HINT: If you are not able to see the Fiori Application Generator, please install the generator again by opening the terminal and adding following: npm install -g yo.

More Information

- SAP Help Portal: Introduction

  • Step 1
    1. Open Visual Studio Code and select View > Command Palette.

      app
    2. Search Fiori: Open Application Generator and select it.

      app
    3. Select SAP Fiori elements as application type, List Report Object Page as floorplan and click Next >.

      app
    4. Select Data Source and Service:

      • Data source: Connect to an SAP System
      • System: New System
      • System type: ABAP Environment on SAP Business Technology Platform
      • ABAP environment definition source: Upload a Service Key File
      • Service key file path: <your_service_key>
      • System name: <your_system_name>
      • Service: <your_service_definition>
      app

      Click Next >.

      You have downloaded the service key earlier in the SAP BTP Trial Cockpit.

    5. Select TravelProcessor and click Next >.

      app
    6. Add project attributes:

      • Module name: ztravel_app_xxx
      • Application title: Travel App XXX
      • Project folder path: C:\Users\<your_user>\projects
      • Add deployment configuration: Yes
      • Add FLP configuration: Yes
      app

      Click Next >.

    7. Configure deployment:

      • Target: ABAP
      • Is this an SAP Business Technology Platform system? Yes
      • Target System URL: <your_abap_system_url>
      • Name: ztravel_app_xxx
      • Package: ztravel_app_xxx
      • Transport Request: <your_transport_request>
      • Deployment description: deployment xxx
      app

      Click Next >.

      HINT: If you want to copy your transport request, please do following: Open Eclipse, search your package ZTRAVEL_APP_XXX and open it. Open your transport organizer to see your transport request. Copy your transport request for later use. You can find your transport request underneath the Modifiable folder.

      deploy

    8. Configure Fiori Launchpad:

      • Semantic Object: ztravel_app_xxx
      • Action: display
      • Title: Travel App XXX
      app

      Click Finish.

    9. Now all files have been generated.

      app
  • Step 2
    1. Right-click ztravel_app_xxx and select Open in Integrated Terminal.

      start
    2. Start your application with npm start and press enter.

      start
    3. Press Go and check your result.

      start
  • Step 3
    1. Open your terminal and enter npm run deploy. When prompted, check deployment configuration and press y.

      deploy
    2. Now your application is deployed.

      deploy

    HINT: If you want to update your SAP Fiori Launchpad configuration, then you can do following steps:

    1. Open your terminal, enter npx fiori add flp-config and press enter.

      deploy

    2. Enter following:

      • Semantic object: ztravel_app_xxx
      • Action: display
      • Title: Travel App XXX
      • Subtitle: (press enter)
      deploy
    3. Open manifest.json in your webapp folder.

      deploy
    4. Check your semantic object. It should be ztravel_app_xxx.

      deploy
    5. Open Eclipse, search your package ZTRAVEL_APP_XXX and open it. Open your transport organizer to see your transport request. Copy your transport request for later use. You can find your transport request underneath the Modifiable folder.

      deploy
    6. Open your terminal, enter npx fiori add deploy-config and press enter.
      Enter following:

      • Target: ABAP
      • SAP BTP System: Y
      • Target System URL: <your_target_system_url>
      • Name: (press enter)
      • Package: ztravel_app_xxx
      • Transport Number: <your_transport_number>
    deploy

    Your yaml file should be written after entering all information.

  • Step 4
    1. Open Eclipse and check the BSP library and SAP Fiori Launchpad app descriptor item folder in your package ZTRAVEL_APP_XXX. If you are not able to see BSP applications and SAP Fiori Launchpad app description items, refresh your package ZTRAVEL_APP_XXX by pressing F5.
      library
  • Step 5
    1. In Eclipse right-click your package ZTRAVEL_APP_XXX and select New > Other Repository Object.

      iam
    2. Search for IAM App, select it and click Next >.

      iam
    3. Create a new IAM App:

      • Name: ZTRAVEL_IAM_XXX
      • Description: IAM App
      iam
      Click Next >.
    4. Click Finish.

      iam
    5. Select Services and add a new one.

      iam
    6. Select following:

      • Service Type: OData V2
      • Service Name: ZUI_C_TRAVEL_M_XXX_0001
      iam

      Click OK.

      Save and activate your IAM app.
    7. Right-click your package ZTRAVEL_APP_XXX and select New > Other Repository Object.

      catalog
    8. Search for Business Catalog, select it and click Next >.

      catalog
    9. Create a new business catalog:

      • Name: ZTRAVEL_BC_XXX
      • Description: Business catalog
      catalog
      Click Next >.
    10. Click Finish.

      catalog
    11. Select Apps and add a new one.

      catalog
    12. Create a new business catalog:

      • IAM App: ZTRAVEL_IAM_XXX_EXT
      • Name: ZTRAVEL_BC_XXX_0001
      catalog
      Click Next >.
    13. Click Finish.

      catalog
    14. Click Publish Locally to publish your business catalog.

      catalog
  • Step 6
    1. Switch to Visual Studio Code and open the integrated terminal. Enter npm run deploy. When prompted, check deployment configuration and press y.

      deploy
    2. Press CTRL and click the following link to open the URL in a browser.

      deploy
    3. Log in to your system and press go to see your result.

      deploy
  • Step 7

    Where can commands be executed in VS Code?

Back to top