Develop and Run SAP Fiori Application with Visual Studio Code

Open Visual Studio Code and select View > Command Palette.

Search Yeoman UI Generators and select it.

Select SAP Fiori elements application and click Next >.

Select List Report Object Page and click Next >.

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>

Click Next >.

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

Select TravelProcessor and click Next >.

Add project attributes:

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

Click Finish.

Click Open in New Workspace.

Right-click ztravel_app_xxx and select Open in Integrated Terminal.

Start your application with npm start and press enter.

Press Go and check your result.

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

Enter following:

• Semantic object: ztravel_app_xxx
• Action: display
• Title: Travel App XXX
• Subtitle: (press enter)

Open manifest.json in your webapp folder.

Check your semantic object. It should be ztravel_app_xxx.

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>

Enter npm run deploy in your terminal. When prompted, check deployment configuration and press y.

Now your application is deployed.

In Eclipse right-click your package ZTRAVEL_APP_XXX and select New > Other Repository Object.

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

Create a new IAM App:

• Name: ZTRAVEL_IAM_XXX
• Description: IAM App

Click Finish.

Select Services and add a new one.

Select following:

• Service Type: OData V2
• Service Name: ZUI_C_TRAVEL_M_XXX_0001

Click OK.

Right-click your package ZTRAVEL_APP_XXX and select New > Other Repository Object.

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

Create a new business catalog:

• Name: ZTRAVEL_BC_XXX
• Description: Business catalog

Click Finish.

Select Apps and add a new one.

Create a new business catalog:

• IAM App: ZTRAVEL_IAM_XXX_EXT
• Name: ZTRAVEL_BC_XXX_0001

Click Finish.

Click Publish Locally to publish your business catalog.

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

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

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