Fiori Development with VSCode and NodeJS

[beyhan_meyrali]

Hi,

In this post, I would like to share with you, how to develop and run SAP Fiori apps on your local computer with Visual Studio Code and NodeJS. In that way, you can explore, learn, develop SAP UI5 and Fiori Elements on your computer.

Download VSCode - link.

Download NodeJS - link.

Install VSCode and NodeJS.

Save path of NodeJS to Environment Variables -> System Variables -> Path. - Restart your computer.

Open VSCode and go to extensions and install "Sap Fiori Tools Extension Pack". This will install all required extensions.

Install SAP Fiori Tools - Extension Pack

To create a new project, open command palette and run > "fiori open application generator"

 

Choose template from template wizard. In this example application type is SAP Fiori Elements, but instead you can choose SAP UI5 freestyle as type and you can have a classic SAP UI5 Fiori app.

Choose data source - We will be using odata northwind in this example.

Url : https://services.odata.org/v2/northwind/northwind.svc/

 

Select Main Entity

 

Provide project details

Note: Version of SAP UI is important. Some versions does not load!

Pay Attention: Module name is project1, therefore a new folder will be created under workspace folder with project1 name. We need to run npm commands in this folder!

Project1 is created and info is above.

Now open a terminal screen.

We need to be in project folder to run npm commands. we run "cd project1" to change folder in terminal screen.

We are now in project folder and we need to run "npm update" command.

Project is ready to run.

We need to run "npm start" to start our server. A new browser page will open.

 

Now go to new browser page and change columns display settings and click "Go" to load data.

That is all. Now you have a working Fiori elements example with oData service. You can explore and enhance that app as you wish. If you want, you can create a new project for SAP UI5. Steps are exactly same, just choose SAPUI5 freestyle for application type.

SAP UI5 Project Info

 

Finally, a few links on topic,

• a link for fiori elements with code and layout samples.


• and this blog post by Sai was really helpful on VSCode setup and sample app.


• Another blog on Fiori and VsCode development. Sap Developers link.


• A blog post on extending SAP Fiori elements app.


• Fiori Demo apps with tutorial by SAP(on step 25 of walktrough you may need that blog and that too).

 

Deploying to Repo

• How to deploy UI5 application to SAP Abap repository by pandya123.


• Download and Deploy UI5 Code by using SE38:/UI5/UI5_REPOSITORY_LOAD


• Another blog post by Sai Nithesh.


• Another Deploy Via SE38


• Deploying to Git Repo

 

Tools

• A useful VSCode extension for UI5 development.


• Application Wizard Extension for VSCODE

 

Hopefully that is useful for you and helps you to gain new skills without need for BTP trial accounts.

Feel free to add your samples and links to comments.

Thanks for reading.