Skip to Content
Technical Articles
Author's profile photo SaiNithesh Gajula

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

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

Assigned Tags

      66 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Manoj Kumar Thatha
      Manoj Kumar Thatha

      Hi Nithesh,

      I have also started exploring visual studio for fiori apps. My app is not displaying data it is giving Nodata error. I know issue  is the issue with odata service path to get the metadata. How to resolve the issue any idea.

      Thanks,

      Manoj

       

       

      Author's profile photo SaiNithesh Gajula
      SaiNithesh Gajula
      Blog Post Author

      Hi Manoj,

      Can you please share error log.

       

      Regards,

      Sai Nithesh Gajula

      Author's profile photo Bernard Fricaud
      Bernard Fricaud

      Hello Nithesh,

      i have the same issue.

      Because the app try to request the URL: http://localhost:8080/V2/Northwind/Northwind.svc/

      I have put the url: https://services.odata.org/V2/Northwind/Northwind.svc/ in the input field.

      How i can solve this??

      regards

      Bernard

       

      Author's profile photo SaiNithesh Gajula
      SaiNithesh Gajula
      Blog Post Author

      Hi Bernard,

      Make sure your yaml configuration are correct. you can also refer the attached screenshot.

       

      Regards,

      Sainithesh Gajula

       

       

      Author's profile photo Markus Fischer
      Markus Fischer

      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"

      Author's profile photo SaiNithesh Gajula
      SaiNithesh Gajula
      Blog Post Author

      Hi Markus Fischer,

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

       

      Regards,

      Sai Nithesh

      Author's profile photo Markus Fischer
      Markus Fischer

      Hi Sai,

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

       

       

      Author's profile photo Alex Glorie
      Alex Glorie

      How can I see the details page ???

      Author's profile photo SaiNithesh Gajula
      SaiNithesh Gajula
      Blog Post Author

      Hi Alex,

      By default, it detail navigation is enabled you should able to navigate by clicking in the item.

       

      Regards,

      Sai Nithesh Gajula

      Author's profile photo Jeremiah Duroya
      Jeremiah Duroya

      Hi Nitesh,

      Will VS Code be the IDE to go and will it be supported long term? Since Eclipse tooling was only supported until version 2019-12.

      Author's profile photo SaiNithesh Gajula
      SaiNithesh Gajula
      Blog Post Author

      Hi Jeremiah,

      Hope it will be supported for long term, because SAP Business Application Studio and VS Code playing the same role as Online IDE and Offline IDE

       

      Regards,

      Sai Nithesh

      Author's profile photo poornima prasanna jonna
      poornima prasanna jonna

      Hi Nitesh,

      Installed all the required extension for creating the application. Is there any particular reason for not being displayed SAP Fiori Tools – Application Generation  card.

      Author's profile photo Fikret Somay
      Fikret Somay

      Hi poornima prasanna jonna,

      Do you have Node.js installed on your system?

      Please refer to link and the comments below.

      Author's profile photo Priyaranjan gupta
      Priyaranjan gupta

      I am also having same issue.

      Author's profile photo Priyaranjan gupta
      Priyaranjan gupta

      I ran this command again and now its working fine.

      npm i -g @sap/generator-fiori-elements

      Author's profile photo Priyaranjan gupta
      Priyaranjan gupta

      Hi ,

      I am getting blank screen on Select Generator page.Please let me know what is missing. All the needed extensions are installed.

      Screenshot

      Screenshot

      Author's profile photo Freddy Collao Blas
      Freddy Collao Blas

      sudo npm i -g @sap/generator-fiori-elements --@sap:registry=https://registry.npmjs.org

      Author's profile photo Priyaranjan gupta
      Priyaranjan gupta

      Thanks.  I ran npm i -g @sap/generator-fiori-elements and now its working fine.

      Author's profile photo Freddy Collao Blas
      Freddy Collao Blas

      Excelent!

      Author's profile photo SaiNithesh Gajula
      SaiNithesh Gajula
      Blog Post Author

      Hi Priyaranjan,

      Hope you followed my previous blog to configure VS Code. Try executing below command and restart VS Code.

       

      Windows

      npm install -g @sap/generator-fiori-elements

      MacOS

      npm i @sap/generator-fiori-elements

       

      Regards,

      Sainithesh Gajula

      Author's profile photo Priyaranjan gupta
      Priyaranjan gupta

      Thanks Sai. Yeah , It worked

      Author's profile photo Alvin Santiago
      Alvin Santiago

      Hi SaiNithesh,

      Thank you for this article!

       

      Do you have any idea how to fix this error?

      Author's profile photo SaiNithesh Gajula
      SaiNithesh Gajula
      Blog Post Author

      Hi Alvin Santiago ,

      Please try by executing below command and try installing required npm tools

      npm config set @sap:registry https://npm.sap.com

       

      Regards,

      Sainithesh

      Author's profile photo Alvin Santiago
      Alvin Santiago
      Hi SaiNithesh, 
      
      
      Finally, it was solved with this:
           npm config set registry "https://registry.npmjs.com"
      
      Thanks a lot.
      
      
      Regards,
      Alvin
      Author's profile photo SaiNithesh Gajula
      SaiNithesh Gajula
      Blog Post Author

      It's great to hear Alvin

      Author's profile photo Alvin Santiago
      Alvin Santiago

      SaiNithesh,, I already have created the Odata service in ABAP onprem. What are other things I need to setup so that I can use this Odata here in VSCode?

      Author's profile photo SaiNithesh Gajula
      SaiNithesh Gajula
      Blog Post Author

      Hi Alvin ,

      You can provide your ODATA Service in the Service and Entity section which will be accessable in your browser where you are using VS Code

      Author's profile photo Alvin Santiago
      Alvin Santiago

      Here is what I am getting so far..

      An error occurred: Validation error happened: code: InvalidTag, message: Tag 't.length;i++)r(t[i]);return' is an invalid name.

      Author's profile photo SaiNithesh Gajula
      SaiNithesh Gajula
      Blog Post Author

      Make sure you are providing the URL in the below format

      http://<hostname>:<port>/sap/opu/odata/sap/ZPRODUCT_SRV/
      
      http://abc:8001/sap/opu/odata/sap/ZPRODUCT_SRV/
      Author's profile photo VIJAYA CHANDRAN UVARAJAN
      VIJAYA CHANDRAN UVARAJAN

      Hi SaiNitesh.,

      how to run the command? In terminal window i am getting the below error. help me to resolve.

      Npm%20Install%20Error

      Npm Install Error

      Author's profile photo SaiNithesh Gajula
      SaiNithesh Gajula
      Blog Post Author

      Hi Vijay,

      By seeing the error screenshot, as per my understanding NodeJS is not installed correctly. Can you please make sure node path is configured in the environmental variable.

       

      Regards,

      SaiNithesh Gajula

      Author's profile photo VIJAYA CHANDRAN UVARAJAN
      VIJAYA CHANDRAN UVARAJAN

      Hi Nithesh.,

      Thanks for the suggestion. Actually node.js was not configured. It's working now.

       

      Author's profile photo Manh Nguyen Tien
      Manh Nguyen Tien

      Hi Nithesh,

       

      Thank you for this article! It is very helpful!

      But I have a existed SAPUI5 Application project in WebIDE and i want to run my project in local machine on visual studio code. Do you have any idea for that???

       

      Regard,

      Manh

      Author's profile photo SaiNithesh Gajula
      SaiNithesh Gajula
      Blog Post Author

      Thanks for your compliment Manh.

      You can refer my blog Develop SAP UI5 Apps using Visual Studio Code to use SAP UI5 Application in VS Code,

      Regards,

      SaiNithesh

      Author's profile photo Manh Nguyen Tien
      Manh Nguyen Tien

      Thank Nithesh,

      Now, I can run my project in local machine. It seems that the system is operating well however I still got the error as shown in the below image. I am wondering if there is any hidden issue which cause this error. Do you have any idea about this error. Hope you can investigate more on the issue and give me some updates about it.

      Regards,

      Manh

      Author's profile photo SaiNithesh Gajula
      SaiNithesh Gajula
      Blog Post Author

      Hi Manh,

      By looking into the screenshot, below are my understandings.

      1. Failed to load resource Component-preload.js- This file will be created automatically in WebIDE, but locally we need to generate it. In general, it is optional. you can follow this blog to create component-preload.js
      2. For i18n related file issues, make sure file path is correct while loading.

      Let me know if you still face any issues.

       

      Regards,

      SaiNithesh

      Author's profile photo Abdul Qayyum
      Abdul Qayyum

      Hi ,

       

      I have installed generators , created app but getting below error at npm start.

      Author's profile photo SaiNithesh Gajula
      SaiNithesh Gajula
      Blog Post Author

      Hi Abdul,

      Please check navigation intent in the SAP Fiori app. For reference please check below screenshot of flpSandbox.html

      Regards,

      Sai Nithesh

      Author's profile photo Aditya Gupta
      Aditya Gupta

      Hi,

      How can I connect my OData v4 service in VSCode?

      Currently, it is asking me to provide v2 service URL.

      Thanks.

      Author's profile photo Parandhaman Natarajan
      Parandhaman Natarajan

      Hi Nitesh,

      while connect my OData it's asking user name and password.

       

      Author's profile photo SaiNithesh Gajula
      SaiNithesh Gajula
      Blog Post Author

      Hi Natarajan,

      If service need authentication, it will ask to enter credentials.

       

      Regards,

      SaiNithesh Gajula

      Author's profile photo Jose Barajas
      Jose Barajas

      Hi SaiNithesh Gajula

       

      The SAP that we use to develope is internal (Not accessible from the network).

      Now, we have a configuration created in the SAP Cloud Connector to be able to work with WebIDE.

      How can we work from visual studio code with the configuration of SAP Cloud Connector?

       

      Thanks,

       

       

      Jose

      Author's profile photo SaiNithesh Gajula
      SaiNithesh Gajula
      Blog Post Author

      Hi Jose,

      Once you connect to the VPN, you should able to access it locally in Visual Studio Code.

       

      Regards,

      Sai Nithesh

      Author's profile photo Nilesh Jain
      Nilesh Jain

      Hi I am not getting option to add main entity

      Author's profile photo SaiNithesh Gajula
      SaiNithesh Gajula
      Blog Post Author

      Hi Nilesh,

      Seems like your system cant able to reach the service might be because of proxy. If you are connected to any proxy. Execute the below command in console and try to create the app.

      npm config set proxy http://host:port

       

      Regards,

      Sai Nithesh Gajula

      Author's profile photo Irfan Gokak
      Irfan Gokak

      Hi Nithesh,

       

      Great blog. But one question, how do we set sap-client for Fiori application for testing. Where we have 2 different client for testing and development. Where it should be defined?

       

      Regards,

      Irfan G.

      Author's profile photo Sachin Kulkarni
      Sachin Kulkarni

      Hi Irfan,

      Fiori application consumes the service end point i.e. OData service which is configured to talk to a specific client. Hence client configuration doesn't arise at VS configuration level when consuming an OData service.

      Alternately if during the creation of the Fiori app via VS, if it is chosen to "Connect to an SAP system", then the configuration provides an option to specify the client if it is ABAP On Premise.  Connecting to an ABAP environment on SAP BTP would be driven by service key file.

      I hope this information helps.

      Regards

      Author's profile photo Osman Kartal
      Osman Kartal

      Hello

       

      Great blog, thank you very much.

      I have followed the steps and my App is starting, but it starts not in the Fiori Launchpad. I think i am missing a configuration or something?

       

      I have created an Freestyle SAPUI5 Application.

       

      Any idea what i must configure, that it runs in the Fiori Launchpad environment?

       

      Thanks

      Author's profile photo Amel Saidani
      Amel Saidani

      Hello,

      I think this can help https://blogs.sap.com/2020/09/11/building-a-central-launchpad-using-sap-cloud-platform-launchpad-service-developing-html5-apps/.

      Regards,

      Author's profile photo Amel Saidani
      Amel Saidani

      Hello

      Is it to possible to connect to a SAP system configured in SCP/BTP ?

      Regards,

      Author's profile photo Sachin Kulkarni
      Sachin Kulkarni

      Hi Amel,

      Please try if this works. In the template wizard, at the step 'Data Source and Service Selection' the following configuration might enable connection to SAP system over BTP.

      Data%20source%20and%20Service%20Selection

      Data source and Service Selection

      Regards,

      Author's profile photo Blazenko Babic
      Blazenko Babic

      Hi SaiNithesh Gajula

      Thank you for your great blog! Do you know any VS extensions where I could add Fiori Elements Extensions to my Fiori Elements App? I use the List Report Template, but I need to expand it with a Dialog or Fragment in order to display an PDF Viewer. Currently it is impossible to find some info about this. There are only blogs, docs and tutorials for WebIDE.

       

      Thank you and regards,

      Blazenko

      Author's profile photo SaiNithesh Gajula
      SaiNithesh Gajula
      Blog Post Author

      Hi Blazenko,

      We should able to add extensions to Fiori Elements App using Fiori Open Guided Development which is part of Fiori tools extension. Attached screenshot for reference.

       

       

      Regards,

      Sai Nithesh Gajula

       

      Author's profile photo santosh kumar
      santosh kumar

      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 ?

      Author's profile photo GANG WANG
      GANG WANG

      Hi,Sai Nithesh Gajula:

      I encountered this problem, do you know the reason?

      I am sure that my account  and password is correct.

      Author's profile photo SaiNithesh Gajula
      SaiNithesh Gajula
      Blog Post Author

      Hi Gang,

      Try once removing the sap-client.

       

      Regards,

      Sai Nithesh Gajula

       

      Author's profile photo GANG WANG
      GANG WANG

      Hi

      Thanks Reply!

      I tried it, but it didn't work.

      Author's profile photo Jose Moreno
      Jose Moreno

      Hi,Sai Nithesh Gajula:

      Great blog, thank you very much.

      How to debug backend from visual studio code ?.

      Author's profile photo Domenico Criaco
      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.

      Author's profile photo SaiNithesh Gajula
      SaiNithesh Gajula
      Blog Post Author

      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

       

      Author's profile photo Michael Douglas
      Michael Douglas

      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

      Author's profile photo Sylvain LEPREGASSIN
      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

      Author's profile photo Former Member
      Former Member

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

      у меня такая проблема создала приложение, а когда вожу команду 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>

      Author's profile photo SaiNithesh Gajula
      SaiNithesh Gajula
      Blog Post Author

      Hi Bepa,

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

       

      Regards,

      Sai Nithesh

      Author's profile photo Former Member
      Former Member
       translated       I have such a problem created an application, and when I run the npm start command, I get      
      Author's profile photo Jayanta Choudhuri
      Jayanta Choudhuri

      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/09171c8bc3a64ec7848f0ef31770a793.html

      No luck

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

      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