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

[former_member723794]

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.

Prerequisites

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 - https://nodejs.org/en/download/


2. VsCode - https://code.visualstudio.com/download

 

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