Skip to Content
Technical Articles
Author's profile photo SaiNithesh Gajula

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

Assigned tags

      31 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Nik M Adam Hafiz Nik Mohd Adam Hafiz bin Nik Othman
      Nik M Adam Hafiz Nik Mohd Adam Hafiz bin Nik Othman

      Hey Nitesh,

       

      First and foremost, thank you so much for sharing this information. Very helpful as i am searching to use Visual Studio Code for all my Dev work.

      Quick one: searching for npm modules, there's quite a few related to SAPUI6 and OpenUii5 development - any further helper modules you would recommend, and perhaps some tutorial on how to use them?

      Thanks!

      Adam

      Author's profile photo SaiNithesh Gajula
      SaiNithesh Gajula
      Blog Post Author

      Hi Adam,

      SAP has made UI5 Language Assistant available for Visual Studio(VS) Code. Hope this will be useful for you.

       

      Regards,

      Sai Nithesh Gajula

      Author's profile photo udayagiri swamy
      udayagiri swamy

      Hello Nitiish,

       

      Can you extend the blog with the details of  deployment of created UI5 app to ABAP repository from VS code

      Author's profile photo SaiNithesh Gajula
      SaiNithesh Gajula
      Blog Post Author

      Sure Udayagiri, Even I am also thinking to extend. Thanks for your input.

      Author's profile photo SaiNithesh Gajula
      SaiNithesh Gajula
      Blog Post Author

      Hi udayagiri swamy.

      I have updated the blog with ABAP repository deployment. Please check.

       

      Regards,

      Sainithesh Gajula

      Author's profile photo udayagiri swamy
      udayagiri swamy

      Thanks a lot

       

      Author's profile photo Peter Matthews
      Peter Matthews

      Fantastic Blog - Just some feedback for uploading to on-premise - you might want to update the blog?

      • In file  ".nwabaprc", after copying the lines from the browser, I had to replace the double quotes around the user ID and password
      • I had to execute npx ui5 build -a  before npm run deploy

      Again, many thanks for this !

      Author's profile photo SaiNithesh Gajula
      SaiNithesh Gajula
      Blog Post Author

      I’m so pleased to hear that you liked it.

      Author's profile photo Subbaiah Kotha
      Subbaiah Kotha

      I also have to use command -  'npx ui5 build -a'  to build my 'dist' folder for the application. Command 'ui5 build' did not work for me. I only installed 'SAP Fiori Tools' extensions in my local VS code. This question and the entire blog helped me a lot in building my application.

      Author's profile photo Francisco Elizalde
      Francisco Elizalde

      Hello Nitesh,

      Fantastic Blog, I have a question. How can I choose in which version of UI5 I want to develop my app?

      Regards.

      Author's profile photo SaiNithesh Gajula
      SaiNithesh Gajula
      Blog Post Author

      Thanks Francisco.
      With the help of below commands, we can provide specific version or use latest.

      ui5 use sapui5@latest or ui5 use openui5@latest will be adding framework in the ui5.yaml
      framework:
        name: SAPUI5
        version: "1.81.0"

       

      Regards,

      SaiNithesh Gajula

      Author's profile photo Francisco Elizalde
      Francisco Elizalde

      Thanks for the info.

      Regards.

      Author's profile photo Maxim Fuchs
      Maxim Fuchs

      Hey Nitesh,

       

      thank you very much for this Blog!

      I have a question and a small problem:

      (1) Is it also possible to use other templates than the predefined ones? I would like to use the normal SAPUI5 template.

      (2) When I run the command npx ui5 serve -o test.html I´am getting the message "The baseUri test is not valid":

      Can you help me with that?

       

      thanks and regards,

      Maxim

      Author's profile photo SaiNithesh Gajula
      SaiNithesh Gajula
      Blog Post Author

      Thanks Maxim 🙂

      1. You can use or change the structure as normal UI5 template.
      2. Please check the baseURI provided in ui5.yaml file. Please find sample below.
      server:
        customMiddleware:
        - name: ui5-middleware-simpleproxy
          mountPath: /srv/
          afterMiddleware: compression
          configuration:
            baseUri: https://services.odata.org/V2/Northwind/Northwind.svc/

      Regards,

      Sai Nithesh

      Author's profile photo Jeroen Vanattenhoven
      Jeroen Vanattenhoven

      You are using nwabap-ui5uploader. I have read other articles using the npm abap-deploy module. What is the difference between the two?

      Author's profile photo Oh Hyuk
      Oh Hyuk

      nwabap-ui5uploader is 3rd party package and is not maintained anymore.

      @sap/abap-deploy is official sap package.

      Every sap official package starts with '@sap'.

       

      Author's profile photo Subbaiah Kotha
      Subbaiah Kotha

      Excellent blog Sai Nithesh.

      I was exactly looking for this info and thank you so much for publishing this.

      Keep posting more similar ones!

       

      Regards,

      Subbaiah Choudary Kotha

      Author's profile photo SaiNithesh Gajula
      SaiNithesh Gajula
      Blog Post Author

      Thanks Subbaiah 🙂

      Author's profile photo Greg Gipson
      Greg Gipson

      Hey Nithesh,

      Great blog!

      Is there template package that contains the Fiori elements templates?

      • List Report Object Page with OData V2
      • Worklist
      • Analytical List Page
      • Overview Page

      Regards,

      Greg

       

       

       

       

      Author's profile photo Ali Jibran
      Ali Jibran

      Yes,

      Yeoman has some very good generators.

      Check this link out https://www.npmjs.com/package/@sap/generator-fiori-elements

      Regards,

      Jibran

      Author's profile photo satish saurabh
      satish saurabh

      Hi Ali,

      Is there any generator to create a basic template instead of just Fiori elements template.

      Author's profile photo Bernard Fricaud
      Bernard Fricaud

      Hey Nitesh,

      i'm so happy to find this Blog. Thanks.

      I have follow your instructions, but after deploy the app and have try to run. I get this Error:

      Metadata%20not%20found

      Metadata not found

      Can you help me with that? Thanks

       

      regards

      Bernard

       

      Author's profile photo SaiNithesh Gajula
      SaiNithesh Gajula
      Blog Post Author

      Hi Bernard,

      Please verify ui5.yaml configuration as below

       

      Regards,

      Sainithesh Gajula

      Author's profile photo Parandhaman Natarajan
      Parandhaman Natarajan

      Hi Sainithesh Gajula,

       

      I have create ui5 application using web ide. now ,it is possible to import from visual studio .if we can means share solutions.

      Author's profile photo SaiNithesh Gajula
      SaiNithesh Gajula
      Blog Post Author

      Hi Parandhaman,

      Can you be little clear. Do you want to migrate WEB IDE to VS Code?

       

      Regards,

      Sai Nithesh Gajula

      Author's profile photo Parandhaman Natarajan
      Parandhaman Natarajan

      Hi SaiNithesh,

      yes I want to migrate  WEB IDE to VS Code.

      I created ui5 application using web ide tool. that application how to import from visual studio. I tried imported but can't run application.

       

      Author's profile photo Georgi Nushev
      Georgi Nushev

      Hi,

      how about the case, when we have an existing UI5 App on the ABAP Server and we would like to sync the app to the VS code, edit it and redeploy?

      Is there a preffered way to sync it? I guess in eclipse it was done through the ADT, but how it is here?

       

      Thanks and Regards,

      Georgi

      Author's profile photo Salvador Nava
      Salvador Nava

      I was unable to run the "ui5 build" command but i went to https://sap.github.io/ui5-tooling/ and execute

      # Global
      npm install --global @ui5/cli
      
      # In your project
      npm install --save-dev @ui5/cli

       

      Then i was already to continue. Thanks a lot!

      Author's profile photo Cristian Felipe Montoya Gallego
      Cristian Felipe Montoya Gallego
      Hi SaiNithesh Gajula 


      when i use the npm run deploy command i get the error ERR! constructor: custom implementation in abap Invalid URL: / sap / opu / odata / UI5 / ABAP_REPOSITORY_SRV   

      Author's profile photo Aseem Kher
      Aseem Kher

      Hi,

      I think there is an issue with either of the 2 things.

      1. The service required for the deployment is not active on the path specified in the error go and activate in SICF.
      2. The url provided by you for deployment is incorrect. use as specified sample URL below http://gatewaydevserver.companyname.com:8000

      Cheers !!!!!

      Author's profile photo Gokula Govindarajan
      Gokula Govindarajan

      Hi SaiNithesh,

      Nice blog.  If my account is enabled with SSO in the on-premise ABAP System, what changes do I need to make in .nwabaprc file?  I tried removing "conn_password" it throws me a error "Define both a username and password".  Any suggestion please?

       

      Thanks

      Gokul.