Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
cancel
Showing results for 
Search instead for 
Did you mean: 
former_member501093
Participant
91,850
Last year around November, the free trial of SAP Web IDE was discontinued and developers were encouraged to start using SAP Business Application Studio ( BAS ). I set up the development environment on SAP BAS and migrated all my existing projects. However, I faced a lot of challenges with this new IDE. Then I came across Visual Studio Code which is widely used by developers across the globe. In this blog post for absolute beginners, I shall cover how to set up Visual Studio Code step by step and develop UI5 apps.

Visual Studio Code


Visual Studio Code ( VSCode ) is a powerful and light-weight source code editor available for Windows, macOS, and Linux. It comes with built-in support for many languages like JavaScript, TypeScript, NodeJS, etc. As it is locally installed on your system it loads quickly and developers can focus on problem statements rather than worry about glitches.

Features :

  • Auto code completion with Intellisense

  • Debugging options

  • Powerful editing features

  • Code navigation and refactoring


Steps to create basic UI5 app using VSCode


Install Visual Studio Code

You can download and install Visual Studio Code from the below URL :

https://code.visualstudio.com/

Visual Studio Code uses a lot of NodeJS packages and modules even for SAP UI development so I would recommend installing NodeJS along with it.

You can download and install NodeJS from the below URL :

https://nodejs.org/en/

Install Node modules

Visual Studio Code makes use of various node modules to run the UI5/Fiori app.

We need to make sure all relevant node modules are installed for running our application.

Execute the below command in the Terminal below to install all the node modules.
npm install 

 

Install UI5 and Fiori extensions for VSCode


This is a one-time setup.

Open Visual Studio Code. On the left tab, there is an icon called 'Extensions' ( circled in blue). Click on it.


VSCode Initial Screen


You will be able to see all extension packages available for VSCode.


Extensions


We will be using SAP Fiori Tools: an extension available for SAP Business Application Studio and Visual Studio Code which helps us develop UI5 / Fiori apps.

Search for fiori and install the packages marked in red in the image below.To install click on the "Install" blue button. As it is already installed on my system it is not showing. Once a package is installed, the "Install" button will disappear.


SAP Fiori Tools Extensions


After all packages are successfully installed, press Ctrl + Shift + P. This will fire up the Command Pallete with the help of which you can execute many readily available commands.

Select Fiori : Open Application Generator


Open Application Generator


Visual Studio Code has a lot of generators that are nothing but wizards to create your applications. Let me demonstrate how to use it.

The screen will look like below. At the first, you may not see any generators available). We need to install the appropriate generator.


Application Wizard - Generator screen


Add a generator for SAP UI5 development

Click on Explore and Install Generators on the top right. You will see below screen.

Type in fiori in Search bar ( underlined in blue )


Explore and Install Generator



Edit: Generator got updated in VSCode


The generator got updated in Visual Studio Code ( Fiori freestyle and Fiori elements Generator has been combined together into one ) so I have updated the below content with the latest information.

You will be able to see @Sisn/generator-fiori ( underlined in red ). Click on the blue Install button under it.

As it is already installed for me, it is showing Uninstall button for me.


Fiori Freestyle generator


Once it is installed, you will get a system message below stating that it has been installed.


Fire up Command Pallete ( Press Ctrl + Shift + P ) and search for Fiori: Open Application Generator.

Start the Generator

Select SAP Fiori Freestyle generator from the dropdown and click on Start ( Blue button below )

Floorplan selection: Select SAP UI5 Application and click Next.


Data Source and Service Selection

Data source: Click on the dropdown and select None. After that, click Next.

As this is a demo for a simple UI5 application I am not including any data source. I shall demonstrate it in later blogs.


Floorplan customization

Enter a view name. By default it will be View1. Click Next.


Project Attributes

Enter relevant project details like Module name, app title, path etc. After that click Finish.


After you click Finish. You can see below message : "Installing dependencies"


Once dependencies are installed, we can see below popup.We can either chose to open it in a new workspace or by default it will be added to existing workspace.


Let's select Open in New Workspace. Below is how the screen will look like.

Project structure is similar to Web IDE except one or two additional files specific to VSCode.



Writing our code for the app


Let's open our View file from the webapp folder.


Let's add a simple element for eg. Button inside our page. Save the file. ( Ctrl + S )


Let's add some logic to function press in the corresponding Controller file. Save the file. ( Ctrl + S )


On the left side, choose the Run icon ( highlighted in blue below ).


On the top, select the app which we have to run from the dropdown and click on the Green play button next to it.


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

The app opens up in the default browser.


Automatically your default browser will be opened and the app launches.


You can pause, stop or rerun the app from the controls ( in the figure below )

Once the app is stopped, these controls will disappear.


Well, that's all for this blog post.

This is my first blog post so I would really appreciate feedback from everyone.

Thank you for reading my blog post.

What's next?


Please read my next blog post on how to create a UI5 app on Visual Studio Code that consumes OData Services from an on-premise SAP System.

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

 
39 Comments
partha2909
Explorer
0 Kudos
Nice one Sauranil 🙂
former_member501093
Participant
0 Kudos
Thank you partha2909 🙂
crus_ch
Explorer
0 Kudos
Thanks for sharing!

Looking forward to your next blog post!
vgag_docs53
Explorer
0 Kudos
Great work, step by step procedure with screenshot is very helpful.

Thanks for sharing!!
former_member501093
Participant
0 Kudos
Thank you Christian !
former_member501093
Participant
0 Kudos
Thank you Vineet. Glad you liked it.
Jan-WillemK
Active Participant
Nice one! I like how you point out all the nice extensions. However, in order to get my VS up and running completely, I needed to install the UI5 CLI as well, next to Node using
npm install --global @ui5/cli

After that it was running as expected.
former_member501093
Participant
Hi Jan ! Thank you for your comment. I have edited my blog post.
bharatbajaj
Active Participant
I have a question.

How to add the UI5 Visual Layout Editor for XML views in VS CODE?

( I have been using VS code with Fiori Tools Installed already)

The layout editor was available in SAP WebIDE earlier and also available in Business Application Studio ( BAS), but somehow still missing for VS Code.

I even tried to search the corresponding extension in VS code Marketplace, but found nothing.

Appreciate if someone can guide on this.

 

Regards,

Bharat Bajaj
0 Kudos
Good job,
very intuitive blog
former_member501093
Participant
0 Kudos
Thank you mamadou.faye
0 Kudos
Hello, I have followed your article and not sure about the command
npm install

You were launching the new folder right, so there is not any package.json. Thus, how can you install the node_modules folder without stating the specific dependencies?

And for the generator things, do I need to initialize my git account first?
former_member501093
Participant
0 Kudos
You need to execute the command after creating your project.

Initializing git is optional. You can install and use the generators without initializing git account.

Regards,

Sauranil
ritesh_patel1
Explorer
0 Kudos
Thanks Sauranil, I was thinking to try this for a long time and finally I did it today. Faced issue during launching Application Generator but after installing yeoman it solved.
former_member501093
Participant
0 Kudos
That's great rit22100 !
0 Kudos
Good blog. Very informative. Thank you.
guptadu
Newcomer
Very Nice blog.

I faced a problem while performing the steps. When I try to open the generator- Fiori: Open Application Generator, I get the error:

{"message":"@sap/fiori:app generator failed - runGenerator() EPERM: operation not permitted, mkdir 'C:\\'","stack":"Error: runGenerator() EPERM: operation not permitted, mkdir 'C:\\'"}

 

This error is genuine, as I do not have Admin rights. My question is that, is it possible that I can change the folder VSCode chooses to create the folder on by default. Is there a setting or something that I can change to acheive this?

 

BR,

Durgesh
arpit8105
Advisor
Advisor
0 Kudos
Hello Durgesh,

Even after a long period when i tried to create a new application by clicking on 'Application Generator" I am also getting exactly the same error. Have you figured out the reason?
arpit8105
Advisor
Advisor
0 Kudos
Hey Ritesh,

I am also facing a similar issue. I have installed yeoman as well but it is still not working. May I know what else you did?
former_member618678
Discoverer
0 Kudos
Hi sauranil,

 

While trying to execute the command "Open Application Generator" then I am getting the below screen and blank.

I have already installed node and is up to date.

can you please guide me here

priyankasap4592
Explorer
0 Kudos

Thanks a lot Sauranil. Very helpful.

I also wanted to know if there is a feature where I create a view and it takes care of creating corresponding controller and the minimal boiler plate code similar to cloud web IDE.

former_member501093
Participant
0 Kudos
Hi Priyanka,

VS Code SAP Fiori Generator handles it for you. Once you create a UI5 project using the Fiori generator as I demonstrated in my blog post, apart from the view, you will also see the corresponding controller and boiler plate code.

Hope this helps 🙂

Regards,

Sauranil
former_member501093
Participant
0 Kudos
Hi Deepak,

Make sure you have installed the LTS version of Node JS. I have found such issues after installing the current version.

Try to reinstall NodeJS with LTS version and then try again.

At the end of the installation, it will ask you to install some additional components like Chocolatey as well, install that too.

It should work.

Regards,

Sauranil
priyankasap4592
Explorer
0 Kudos
That is clear. It creates the whole structure with the creation of the project. But if I want to add more views after the project is generated. Is it possible with the SAP Fiori Generator plugin?
former_member501093
Participant
0 Kudos
As far as I know as of now, it is not possible. You have to create your additional view and controller files manually. I hope in the future, they add this feature.
former_member91075
Discoverer
Thanks for sharing, really helpful.

 
former_member501093
Participant
0 Kudos
Thank you beck.zhang
smritigupta
Explorer
0 Kudos
Many thanks for the nice blog. Could you please tell if its possible to get SAP Ui5 Visual Editor in VSCode? I want to configure functionalities like clear filter button. Also when I change the Table type to Grid, then the width of the columns is not adjusted automatically. I have Ui5 version 1.71.35. When I change version to 1.93, then it comes well. I undeerstand that width can be adjusted in Visual Editor too but can we get it in VSCode.

 

 

Many thanks

Smriti
former_member648499
Discoverer
0 Kudos
Hi sauranil

 

Thanks it is very useful

Good job

 

 

 
0 Kudos
Good job Sauranil!

Cannot wait to try it out!!

Thanks.
shrikantpatil
Explorer
0 Kudos
This is an SSL certificate problem... You can disable it using the command.

 
bhalajikharthik
Associate
Associate
0 Kudos
Hi Sauranil,

The blog was helpful, I was able to create an empty application from the template and was able to edit it. But I find it difficult to remove the features that comes with the template. Any ideas to remove that or create an empty application from scratch?
sondredanielsen
Explorer
0 Kudos
How do you deploy the code to the front end server with VS Code?

Thanks.
shais
Participant
sondredanielsen
Explorer
0 Kudos
Thanks, I'll give it a try.
diya_ds
Associate
Associate
0 Kudos
Hi,

 

When trying to open Application Generator, I am running into the following error :

@sap/fiori:app generator failed - runGenerator().

 

Also is it normal for generator to take a while to install.

 

Thanks.
TimHemig
Discoverer
0 Kudos
Hi!
Thank you very much for this blog entry!
Do you, or any of the readers, have any advice on how to migrate such a IDE-setup into an offline environment?

On the systems I may develop, I do not have any connection to the internet (resulting out of security reasons). Some parts can be solved by copying the ~/.ui5 folder an the node_modules folder along with the project, and most of the VSCode-Plugins can be locally installed via the .vsix-files from the marketplace. but still there are essential things accessed live from the internet, that I cannot substitute with a local cache.
Sadullah
Participant
0 Kudos
I'm following with my baby steps, thanks for blog.
brhnkara
Discoverer
0 Kudos

Hello, there is something I don't understand. We developed the project, we organized it, we are done, I want to deploy it? how will I do?

Labels in this area