Skip to Content
Technical Articles
Author's profile photo Sauranil Dey

Setting up Visual Studio Code for UI5 development – part 2

Firstly, before you start reading this blog post I would like to recommend you to read the previous blog post ( part 1 ) of this series :

https://blogs.sap.com/2021/02/03/setting-up-visual-studio-code-for-ui5-development/

Introduction

In my previous blog post, I have demonstrated how to create a basic UI5 app using Visual Studio Code.

In this blog post, I would like to demonstrate how to develop UI5 apps using Visual Studio Code that consume OData services from an on-premise SAP System.

Visual Studio Code allows us to develop Ui5 apps using Data Services from various sources like :

  • Connect to SAP System
  • Connect to Odata Service
  • Connect to SAP API Hub
  • Upload a Metadata Document

In this blog post, we will look at Option 1 – Connect to SAP System and use Odata Services from it.

Steps are the same until before the Definition of Data Services mentioned in part 1 of this series. 

Steps :

  1. Start Application Generator
  2. Writing our code for the app
  3. Running the app

Open Application Generator ( Ctrl + Shift + P -> Fiori Tools : Open Application Generator )

Select SAP Fiori freestyle SAPUI5 application and click Start.

1. Start Application Generator

Select SAPUI5 application and click Next.

Data Source and Service Selection

Enter below details

Data source : Connect to an SAP System

System : New System

System type : ABAP On Premise

System URL : http://<system host>:<port number>

Enter SAP Client, Service username and password

Please check below screenshot.

After entering the above details click on Login icon ( circled in yellow ) below.

The System prompts to choose the desired OData Service.

Under option service : Press dropdown and type in the first few letters of your service. System will recommend the service name. Select Service and click Next.

Floorplan customization

Give a suitable View name. Click Next.

Project Attributes

Enter Project details. Click Finish.

Below system message will be displayed. Please wait for few minutes.

Below system message will be displayed.

If you wish to open your project in a new workspace, press the blue button or by default the project will be created in current workspace.

Project is created under Project Explorer.

2. Writing our code for the app

Open the view file under webapp and write your desired code.

For this demo, I will create a basic Table control to display the data from OData service in tabular format.

3. Running our app

Save your App and click on Run button on the left.

Click on the dropdown and select your application from the list.

You may see multiple entries for the same app name. This is because they are all different run configurations for the same app.

Choose default run configuration : App_name ( App_name )

if App_name is the name of my app 

Press the green button next to it.

You can see app run instructions getting executed in the Terminal Screen below.

The app opens up in default browser.

Conclusion

By this, we have learned how we can develop a simple UI5 app in Visual Studio Code that consumes Odata services from an on-premise SAP System.

Thank you for reading my blog post.

Please share your valuable feedback.

Assigned Tags

      6 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Germán Laso
      Germán Laso

      Hi Sauranil,

      Thanks for the post, is very usefull.

      It's possible to deploy the applications to Business Transformation Platform with any extension or some script?

      Thank you in advance,

      Germán.

      Author's profile photo Germán Laso
      Germán Laso

      I found a solution. I created a new SAPUI5 application on the subaccount and then cloned the repository and created labels for the versions. When I activated the application, the application started.

      Author's profile photo Hari Prasad
      Hari Prasad

      Hi Suranil,

      I'm getting authentication incorrect error while connecting to system.

       

      Regards,

      Parthibha

       

      Author's profile photo krishna vamsi
      krishna vamsi

      hi hari prasad did you get any solution,

       

      i'm also facing the same issue...

      Author's profile photo Jeevan Chand
      Jeevan Chand

      For local ABAP 7.52 server

      Author's profile photo Christian Dülsen
      Christian Dülsen

      Hi,

      i just installed my first WSL on my machiene and configured vscode, I can now develop in CAP on Linux on my local machine 😀 I also installed the CLI and successfully connected to our BTP Instance.

      So I normaly use the Business Application Studio to do development and deployment. We have allot of destinations configured witin the BTP that gives us access to our OnPremise-SAP-System.

      It is no problem to connect for example a new Fiori-App via wizard to one of this destinations using the BAS.

      But this does not work out of the box using my local vscode installation. So here is my question:

      is it possible to consume the odata-services on our OnPremise System using BTP destinations within my vscode?

       

      Thanks in Advance

      Christian Dülsen