Skip to Content
Technical Articles
Author's profile photo Chaitali Pandya

Develop UI5/Fiori Application in Visual Studio Code- Part-I

Hello Everyone,

In this Blog post, we will see how to create SAP UI5 application in Visual studio code. Before we Start, I just want to highlight one thing, SAP Business Application Studio(BAS) does not require any kind of installation on your system, as its all on the cloud, but in case of Visual Studio Code, you would be required to install node.js and other dependencies on your local system. To create SAP UI5 application, we can create in two ways. 

  1. Using NPM Commands
  2. Using Yeoman Generators

In this blog we will create our application in both the ways.


Before we start, we need to ensure that our computer is setup properly. Node.js should be installed and configured properly.

Must Install

  1. Node.js –
  2. VsCode –


How to check node has installed.

  1. Type cmd  and Run as Administrator . one popup will come click on ‘Yes’.


2. Now check node intalled or not , by using command node -v and npm -v in the command terminal.

Congrats..!!, Node.js has installed successfully in your system. Now we will quick starts developing UI5 application in VScode. As I have said above We can create in two Ways.

Lets Start with Yeoman Generators.

   1.  Using Yeoman Generators.

Step 1. In Visual Studio Code’s Activity Bar, click the icon for extensions.

Step 2. Type SAP Fiori Tools in the search bar, and press enter.

Click the extension called “SAP Fiori tools – Extension Pack”, and then click Install.

Recommended Extension to install

  1. SAP UI5 Extension
  2. XML Toolkit

Once you install the Extension pack, it is recommended that you restart Visual Studio Code.

Now that everything has installed properly, its time to create UI5 application with OData Services. We will be taking help of Application Generator, i.e. a wizard-style approach to create apps based on SAP Fiori Elements page types and UI5.

Step 3. In Visual Studio Code, open the Command Palette.

Step 4. Type Application Generator, and click on it.


Step 5. Now the command pallete will close and a new window would open. Here, You will see Application Type , comes in ComboBox, where you can select your application type i.e. either you want to create SAP Fiori elements application or SAPUI5 freestyle.

As we will create UI5 Application, so I have selected SAPUI5 freestyle. In that , select SAPUI5 Appplication and click on Next.


Step 6. In the Next step, we have to define our datasource for our application. If you don’t have any services then select None and proceed. But in our case , we are using OData Service. So we have to select ‘Connect to an OData Services’. Copy and paste the URL of your OData Service. 

URL : – http://hostname:port/sap/opu/odata/SAP/ZCRUD_SRV/

You may be prompted to enter credentials to access the service. Enter your username and password, and click the Login button.

After successfully connecting to the supplied OData service, click Next to customize the template.


Step 7. Give the View Name and click on Next.

Note: If you are creating Fiori Application, then two more fields will appear. One for the Main Entity and another for the Navigation Entity.


Step 8. With the page type and data source defined, the next step is to configure the main project attributes and at last click on Finish.

Here is the Application, which gets created with Yeoman Template.


Step 9. To run this application, right-click on the project folder, select Preview Application. Four options will come, from that select Start and press Enter.

Note : If you want to create more view and controllers, you have to create it manually with this approach. There is no option like it was in WEBIDE. 🙁 .

Hope, this blog was helpful to quick start creating UI5 application in Visual Studio Code.

We will see the other way i.e. Using NPM Commands in my next blog(Part-II). 🙂


Thanks and Cheers!!

Chaitali Pandya

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Volker Buzek
      Volker Buzek

      hi, nice getting started guide!

      you might also want to check out the "easy-ui5" generator for UI5 scaffolding. gives you lots of bang for the buck for OpenUI5 development!

      Author's profile photo Chaitali Pandya
      Chaitali Pandya
      Blog Post Author

      Hi Volker Buzek,

      Yeah, thought to show "easy-ui5" generator , but unfortunately it got skipped.

      Thanks for bring it out here.



      Chaitali Pandya

      Author's profile photo Jayakrishnan Chandramohan
      Jayakrishnan Chandramohan

      Hi Chaitali Pandya ,

      Thank you , it is very informative with clear steps. I have below doubts. Could you please help me to sort it out.

      1. I followed the same steps which working fine in my local machine. However i tried the same approach in the VDS(Virtual Desktop Service : used to connect client system) , there i dont see the fiori>open application generator is working. I created another post regarding this on SCN. . I tested the node and npm in the cmd level, it is installed and i can see the version.
      2. How do i add more services with my project, i want to include sap and non sap services also.

      Thanks in advance,


      Author's profile photo Chaitali Pandya
      Chaitali Pandya
      Blog Post Author

      Hi Jayakrishnan Chandramohan,

      Thanks for the comment. For your 1st query, you have to reinstall extension again, if the issue still there , install extension package through CLI, then it will be resolved.

      and for your 2nd query , you have to right click on manifest.json-> select open service Manager . There you can add Multiple services.


      Chaitali Pandya

      Author's profile photo Jayakrishnan Chandramohan
      Jayakrishnan Chandramohan

      Hi Chaitali Pandya ,

      Thanks for your reply. I tried to install the extensions via CLI. It is installed but while creating the

      project from CLI/VS Code wizard there are some decencies are missing.

      i.e.) node modules, package.json, UI5.yaml and some of the files are not generated

      i am suspecting in the npm registry level.

      As i am using the client network, they are restricting the npm registry. so i am accessing the registry to proxy URL. Do you have any idea on this?