Technical Articles
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
- Enter module name
- Enter module namespace
- Select template – you can navigate and select using up and down arrows and enter
- SAP Fiori Worklist Application
- SAP Fiori Master-Detail Application
- 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
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
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
Hello Nitiish,
Can you extend the blog with the details of deployment of created UI5 app to ABAP repository from VS code
Sure Udayagiri, Even I am also thinking to extend. Thanks for your input.
Hi udayagiri swamy.
I have updated the blog with ABAP repository deployment. Please check.
Regards,
Sainithesh Gajula
Thanks a lot
Fantastic Blog - Just some feedback for uploading to on-premise - you might want to update the blog?
Again, many thanks for this !
I’m so pleased to hear that you liked it.
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.
Hello Nitesh,
Fantastic Blog, I have a question. How can I choose in which version of UI5 I want to develop my app?
Regards.
Thanks Francisco.
With the help of below commands, we can provide specific version or use latest.
Regards,
SaiNithesh Gajula
Thanks for the info.
Regards.
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
Thanks Maxim 🙂
Regards,
Sai Nithesh
You are using nwabap-ui5uploader. I have read other articles using the npm abap-deploy module. What is the difference between the two?
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'.
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
Thanks Subbaiah 🙂
Hey Nithesh,
Great blog!
Is there template package that contains the Fiori elements templates?
Regards,
Greg
Yes,
Yeoman has some very good generators.
Check this link out https://www.npmjs.com/package/@sap/generator-fiori-elements
Regards,
Jibran
Hi Ali,
Is there any generator to create a basic template instead of just Fiori elements template.
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
Hi Bernard,
Please verify ui5.yaml configuration as below
Regards,
Sainithesh Gajula
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.
Hi Parandhaman,
Can you be little clear. Do you want to migrate WEB IDE to VS Code?
Regards,
Sai Nithesh Gajula
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.
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
I was unable to run the "ui5 build" command but i went to https://sap.github.io/ui5-tooling/ and execute
Then i was already to continue. Thanks a lot!
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
Hi,
I think there is an issue with either of the 2 things.
Cheers !!!!!
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.
Hi Gokula Govindarajan !
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
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
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