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

[SaiNithesh_Gajula]

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

[adamothman]

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

[SaiNithesh_Gajula]

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

[dv_u]

Hello Nitiish,

 

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

[SaiNithesh_Gajula]

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

[SaiNithesh_Gajula]

Hi dv.u

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

 

Regards,

Sainithesh Gajula

[Peter_M]

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 !

[dv_u]

Thanks a lot

 

[SaiNithesh_Gajula]

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

[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.

[SaiNithesh_Gajula]

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

[francisco_elizalde]

Thanks for the info.

Regards.

[Maxim]

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

[SaiNithesh_Gajula]

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

[jvanattenhoven]

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

[Hyuk_Oh]

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'.

 

[kschoudary]

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

[SaiNithesh_Gajula]

Thanks Subbaiah 🙂

[kschoudary]

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.

[Greg-55]

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

 

 

 

 

[BernardF]

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 not found

Can you help me with that? Thanks

 

regards

Bernard

 

[SaiNithesh_Gajula]

Hi Bernard,

Please verify ui5.yaml configuration as below

 

Regards,

Sainithesh Gajula

[dukejib5]

Yes,

Yeoman has some very good generators.

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

Regards,

Jibran

[former_member710055]

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.

[SaiNithesh_Gajula]

Hi Parandhaman,

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

 

Regards,

Sai Nithesh Gajula

[former_member710055]

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.

 

[satishcsehitk]

Hi Ali,

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

[Georgi]

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

[former_member219496]

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!

[former_member611537]

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   

[former_member232184]

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 !!!!!

[mgggkn]

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.

[mrbino]

Hi SaiNithesh,

First of all very nice blog ! it was really handy for my SAPUI5 development . Is there any function available for importing zip file or cloning repo from git with these extension ?

could you put the link with the deployments steps

[vykuntrao]

Hi Nitesh

Can you help me am facing issue while typing command UI5 build .Not sure why it is?

 

Checked version of node -v it is above 18. Could you help me Here is the screen shot

ui5 build error

[PedroLazaro]

Hi mgggkn !

 

I'm facing a similar scenario, as well!

Did you manage to find a way to connect the vscode with an SSO on-premise ABAP System?

 

If yes, could you, please, give me some inputs about how to achieve this?

Thanks,

Pedro Lázaro