Develop SAP UI5 Apps and deploy to ABAP repository using Visual Studio Code

Hello Everyone

This Blogs will helps you to create SAP UI5 Apps using Visual Studio Code.

If you are new to Visual Studio (VS) Code. You can follow my below my blogs and set up and configuration.

Installing Visual Studio Code and Configuring SAP Extensions in Visual Studio Code

To create SAP UI5 App, below are some of the pre-requisite.

Step 1: Create a folder, open application folder in Visual Studio Code and click Ctrl+Shift+~ to open Terminal

Step 2: Install Generators.

  npm install -g yo @sapui5/generator-sapui5-templates

Step 3: Enter the command yo @sapui5/sapui5-templates to choose the SAP UI5 template

1. Enter module name
2. Enter module namespace
3. Select template – you can navigate and select using up and down arrows and enter
   1. SAP Fiori Worklist Application
   2. SAP Fiori Master-Detail Application
   3. SAP Fiori Worklist Application OData V4

              4. Enter remaining details like Title, Description and other details as shown in below screen

Step 4: Once the project created install the dependencies using npm install in Terminal

Step 5: Now run the application using below command

   npx ui5 serve -o test.html

Click on “test/flpSandbox.html”

Now application will be launched as shown below and click on the list item to view item detail

Now application will be launched as shown below and click on the list item to view item detail

Step 6: Let us build app using ui5 build, and then dist folder will be created in the root, which we can deploy to ABAP repository.

Step 7: We can deploy app to the ABAP repository using nwabap-ui5uploader. Let us install this locally to out project.

npm install nwabap-ui5uploader –save-dev

Step 8: Now create .nwabaprc in the root folder with the below properties

{
    "base": "./dist",
    "conn_usestrictssl" : false,
    "conn_server": "http://<hostname>:<port>/",
    "conn_client" : "client",
    "conn_user": “UserName”,
    "conn_password": “Password”,
    "abap_package": "$TMP",
    "abap_bsp": "ZVSCODE_APP",
    "abap_bsp_text": "UI5 upload through VSCode App"
}

Step 9: Add “deploy”: “npx nwabap upload” in the package.json.

Step 10: Now let us deploy to ABAP repository using npm run upload

Git Link : https://github.com/SaiNithesh/SAPUI5UsingVisualStudio.git 

Hope you people like this blog post ?

Feel free to comment

Refer my blogs on VS Code

Developing SAP Fiori App using SAP Fiori Tools in Visual Studio Code

Access SAP HANA records from VS (Visual Studio) Code

Regards,

Sai Nithesh Gajula