Developing SAP Fiori App using SAP Fiori Tools in Visual Studio (VS) Code

[SaiNithesh_Gajula]

Hi Everyone,

Hope you have gone through my previous blog on Installing Visual Studio Code and Configuring SAP Extensions in Visual Studio Code

 

Now let us create our first app using SAP Fiori Tools in Visual Studio (VS) Code.

Once we open the Visual Studio (VS) Code, use Ctrl+Shift+P to launch command palette and search for Application Generator and choose that to create SAP Fiori App.

 

Now Yeoman Generators will launch as shown below and choose SAP Fiori Tools – Application Generator and click on Next.

 

Now we need to select template from the available Template Selection (List Report Object Page, Worklist, Analytical List Page, and Overview Page). We will choose List Report Object Page V2 and click on Next.

 

Now, we have to connect to backend system either by connecting to SAP System or using the OData service or through Metadata document. Here we will go with Connect to an OData Service and click on Next.

 

Here let us go with Northwind service https://services.odata.org/V2/Northwind/Northwind.svc/.

Provide Northwind service in Odata v2 Service URL, then available entities will be loading in Main Entity, I have choose Products and click on Next.

 

Now we need to project details like module name, title of your application, namespace for the application, description, and project path. When we choose Yes for Configure advanced options, it will enable UI5 version selection and theme selection of your choice. Click on Next to proceed further.

 

Now application will be created and opened as below.

 

Now open New Terminal using Ctrl+Shift+`. Enter the command npm install to install required dependencies.

 

 

Once the dependencies got install. Enter the command npm start.

 

App will open and run on http://localhost:8080/ which will be opened automatically in the default browser as below.

 

Click on Settings, it will pop up window with available filters as below. Choose “Select All” and click on “Ok”.

 

Click on Go.

 

 

Yeahhhh !!!!!!!!. Finally, we have created our first SAP Fiori Tools App in Visual Studio.

 

Hope you guys like this blog post.

Feel free to comment ?

 

Refer my blogs on VS Code

Develop SAP UI5 Apps using Visual Studio Code

Access SAP HANA records from VS (Visual Studio) Code

 

Regards,

Sai Nithesh Gajula

[santosh_kumar94]

hi sai,

I am getting error while connecting to O'data. Please refer the screenshot. my O'data service is Active then, what is Causing this issue ?

[former_member775867]

Hi,Sai Nithesh Gajula:

I encountered this problem, do you know the reason？

I am sure that my account  and password is correct.

[SaiNithesh_Gajula]

Hi Gang,

Try once removing the sap-client.

 

Regards,

Sai Nithesh Gajula

 

[former_member775867]

Hi

Thanks Reply！

I tried it, but it didn't work.

[josantonio_moreno]

Hi,Sai Nithesh Gajula:

Great blog, thank you very much.

How to debug backend from visual studio code ?.

[domenico_criaco]

Hi Sai Nithesh Gajula,

Nice blog,  thank you very much.

I connected VS with an Odata Service in SAP and the connection works with credentials.

When I run Preview Aplication the system asks me credentials for localhost

How can I solve?

Regards.

Domenico.

[SaiNithesh_Gajula]

Hi Domenico,

If you are using the OData service which requires authentication, definitely it will prompt for credentials for the first time.

Regards

Sai Nithesh Gajula

[former_member728540]

Hi Sai Nithesh Gajula,

Really nice blog, thanks a lot for this. i've connected into my SAP OData Services, but the browser is requesting a password for http://localhost:8080/, and it's not the same as i used into Odata connection. Can you help with this?


Thanks a lot!!

Regards, Michael

[sylvain_lepregassin]

Hi, when pasting Odata URL https://services.odata.org/V2/Northwind/Northwind.svc/ I get the message following in vs code :

A connection error occurred, please ensure the target host is available on the network: "http code: EACCES"

 

Any idea ?

Rds

[former_member6142]

I also couldn't display the UI with npm run command.

What I did was to go on your app folder and right click on it. Then you see preview application start-noflp.

Or simply run the command "npm run start-noflp"

[SaiNithesh_Gajula]

Hi fismar,

Can you check the console logs or share the error logs screenshot.

 

Regards,

Sai Nithesh

[former_member6142]

Hi Sai,

attached you will find the console log when running npm start.

[former_member826348]

Привет, Сай Нитеш Гаджула,

у меня такая проблема создала приложение, а когда вожу команду npm start  выдает

PS C:\Fiori\INFOW\infow> npm run start
npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.

> infow@0.0.1 start
> fiori run --open "test/flpSandbox.html?sap-ui-xx-viewCache=false#infow-tile"

"fiori" is not internal or external command, executable program, or batch file.

PS C:\Fiori\INFOW\infow>

[former_member826348]

 translated       I have such a problem created an application, and when I run the npm start command, I get      

[SaiNithesh_Gajula]

Hi Bepa,

Make sure you have installed all the required plugins like Yeoman Generators.

 

Regards,

Sai Nithesh

[P281512]

Hi SaiNithesh Gajula

I have VSCODE latest and latest version of Fiori tools
Any Elements app I generate deploys fine in S4HANA 1909

I have access to S4HANA 1809
When I try "npm run deploy" this message comes

Target system's SAPUI5 version is lower than the local minUI5Version. Testing locally with different Run Configurations recommended
https://help.sap.com/viewer/17d50220bcd848aa854c9c182d65b699/Latest/en-US/09171c8bc3a64ec7848f0ef317...

No luck

Fix the Minimum SAPUI5 Version Property (minUI5Version)
https://help.sap.com/docs/HTML5_APPLICATIONS/b98f42a4d2cd40a9a3095e9f0492b465/ad0d09f83d3e4ac297b5a9...

This looked promising but did not  work
edited manifest.json and tried
several changes but none work

"minUI5Version": "1.38"
"minUI5Version": "1.56"
"minUI5Version": "1.52"
"minUI5Version": "1.60.1"
"minUI5Version": "1.65"

Please suggest how I can use VSCODE to run FIORI Elements in SAP 1809

Regards
Jayanta

[deveshsin]

Hello @sainithesh.gajula ....Thanks for the blog

I have a specific question on my requirement to have a Fiori application in SAP BTP to show "Application Logs". I am following SAP's instructions to design it using "Reuse Libraries"

https://help.sap.com/docs/btp/sap-business-technology-platform/freestyle-app-integration?q=Applicati...

but not able to render the UI after embedding the components. I have very little knowledge on SAP Fiori and would really appreciate if you can help me find out what I am missing.

Thanks and Regards,

Devesh Singh

[xiswanto]

Hello sainithesh.gajula ,

thank you for the tutorial which is easily understood enough for me just start learning Fiori, I've followed your explanation and success until the last step ( opened the apps in default browser), but from my understanding, this is only accessible from my computer,

but what if I wanted to upload the apps into my sap server, so that other computer ( local or internet ) could access the page, could you guide me the next step?