Skip to Content

Develop and Run SAP Fiori Application with Visual Studio Code

test
0 %
Develop and Run SAP Fiori Application with Visual Studio Code
Details

Develop and Run SAP Fiori Application with Visual Studio Code

April 7, 2021
Created by
December 29, 2020
Develop and run your SAP Fiori Application with Visual Studio Code.

You will learn

  • How to create an SAP Fiori application
  • How to run an SAP Fiori application
  • How to deploy an SAP Fiori application
QR code

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.


Step 1: Create SAP Fiori application
  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
Log on to answer question
Step 2: Start SAP Fiori application
  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
Log on to answer question
Step 3: Deploy SAP Fiori application
  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.

Log on to answer question
Step 4: Check BSP library and SAP Fiori Launchpad app descriptor item in Eclipse
  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
Log on to answer question
Step 5: Create IAM App and business catalog
  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

Log on to answer question
Step 6: Run SAP Fiori application
  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

Log on to answer question
Step 7: Test yourself
Where can commands be executed in VS Code?
×

More Information

- SAP Help Portal: Introduction

Give us 55 seconds of your time to help us improve

Next Steps

Back to top