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

December 29, 2020
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


Step 1: Create SAP Fiori application
  1. Open Visual Studio Code and select View > Command Palette.

    app
  2. Search Yeoman UI Generators and select it.

    app
  3. Select SAP Fiori elements application and click Next >.

    app
  4. Select List Report Object Page and click Next >.

    app
  5. Select Data Source and Service:

    • Data source: Connect to an SAP System
    • System: New System
    • System type: ABAP Environment on SAP Cloud 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 Cloud Platform Trial Cockpit.

  6. Select TravelProcessor and click Next >.

    app
  7. Add project attributes:

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

    Click Finish.

  8. Click Open in New Workspace.

    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, 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 your terminal, enter npx fiori add deploy-config and press enter.
    Enter following:

    • Target: ABAP
    • SAP Cloud Platform 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.
  6. Enter npm run deploy in your terminal. When prompted, check deployment configuration and press y.

    deploy

  7. Now your application is deployed.

    deploy

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