Wednesday, 5 May 2021

Develop UI5 / Fiori App Using VS code.

Step 1:

1. Install Node.js  – Node.js® is a JavaScript runtime built on Chrome’s V8 JavaScript engine.

2. Install VS Code – Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications Link.

Step 2:

Create a folder and open it in VS code.

In VS code go to Extensions(cntrl +shift+ X).

Search “Sap Fiori Tools” . and Install the Extension

This Extension for the development of the UI5/ Fiori application.

SAP HANA, SAP HANA Studio, SAP HANA Certification, SAP HANA Learning, SAP HANA Career, SAP HANA Learning, SAP HANA Preparation

search ” UI5 Tools” and install

this Extension will create a local launchpad server for your application.

SAP HANA, SAP HANA Studio, SAP HANA Certification, SAP HANA Learning, SAP HANA Career, SAP HANA Learning, SAP HANA Preparation

Step 3:


Open Command palette(ctrl +shift+p).

SAP HANA, SAP HANA Studio, SAP HANA Certification, SAP HANA Learning, SAP HANA Career, SAP HANA Learning, SAP HANA Preparation

Search and open “Template Wizard”.

Select the generator as per your Requirement and click on Start.

*I will go with the sap Fiori application for the demo.

SAP HANA, SAP HANA Studio, SAP HANA Certification, SAP HANA Learning, SAP HANA Career, SAP HANA Learning, SAP HANA Preparation

On the next screen, you can choose the application type from the drop-down and the floor plan for the app.

*I will go with the SAPUI5 freestyle and SAPUI5 Application for this demo.

SAP HANA, SAP HANA Studio, SAP HANA Certification, SAP HANA Learning, SAP HANA Career, SAP HANA Learning, SAP HANA Preparation

on the next screen, we can choose Data Source and Service for our application from the drop down.

*  I am using Northwind service for this demo going with the option “Connect with an OData Service”.

and giving the URL of Northwind.

SAP HANA, SAP HANA Studio, SAP HANA Certification, SAP HANA Learning, SAP HANA Career, SAP HANA Learning, SAP HANA Preparation

On Next Screen we can give the 1st view Name.

SAP HANA, SAP HANA Studio, SAP HANA Certification, SAP HANA Learning, SAP HANA Career, SAP HANA Learning, SAP HANA Preparation

On Next Screen, give the project Details. And click on Finish.

SAP HANA, SAP HANA Studio, SAP HANA Certification, SAP HANA Learning, SAP HANA Career, SAP HANA Learning, SAP HANA Preparation

It will Generate the project in our workspace.

Step 4:


We will just Put Some sample Code in Our Application To test.

Sample codes are added to view1.view.xml.

SAP HANA, SAP HANA Studio, SAP HANA Certification, SAP HANA Learning, SAP HANA Career, SAP HANA Learning, SAP HANA Preparation

Step 5:


Start the UI5 Tools Server from the left side down Corner.

SAP HANA, SAP HANA Studio, SAP HANA Certification, SAP HANA Learning, SAP HANA Career, SAP HANA Learning, SAP HANA Preparation

It will open a new Tab our default browser with the live server.

SAP HANA, SAP HANA Studio, SAP HANA Certification, SAP HANA Learning, SAP HANA Career, SAP HANA Learning, SAP HANA Preparation

We can see the application which one is created in our ws.

we can also go to launchpad and launch our application.

SAP HANA, SAP HANA Studio, SAP HANA Certification, SAP HANA Learning, SAP HANA Career, SAP HANA Learning, SAP HANA Preparation

we can see our application is running a launchpad with a live server.

No comments:

Post a Comment