Technical Articles

SaiNithesh Gajula

Posted on July 16, 2020 2 minute read

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

Follow RSS feed Like

17 Likes 13,667 Views 46 Comments

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

Alert Moderator

46 Comments

You must be Logged on to comment or reply to a post.

Manoj Kumar Thatha

July 17, 2020 at 2:13 am

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
- Like(0)
- SaiNithesh Gajula Post author
  
  July 17, 2020 at 5:04 am
  
  Hi Manoj,
  
  Can you please share error log.
  
  Regards,
  
  Sai Nithesh Gajula
  - Like(0)
  - Bernard Fricaud
    
    December 16, 2020 at 9:42 pm
    
    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
    Like(0)
    - SaiNithesh Gajula Post author
      
      December 17, 2020 at 3:08 pm
      
      Hi Bernard,
      
      Make sure your yaml configuration are correct. you can also refer the attached screenshot.
      
      Regards,
      
      Sainithesh Gajula
      
      Like(0)
      /
Alex Glorie

July 22, 2020 at 12:14 pm

How can I see the details page ???
- Like(0)
- SaiNithesh Gajula Post author
  
  August 2, 2020 at 11:02 am
  
  Hi Alex,
  
  By default, it detail navigation is enabled you should able to navigate by clicking in the item.
  
  Regards,
  
  Sai Nithesh Gajula
  - Like(0)
Jeremiah Duroya

July 22, 2020 at 2:30 pm

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.
- Like(2)
- SaiNithesh Gajula Post author
  
  July 25, 2020 at 6:35 am
  
  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
  - Like(0)
poornima prasanna jonna

July 24, 2020 at 9:13 am

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.
- Like(0)
/
- Fikret Somay
  
  July 24, 2020 at 3:10 pm
  
  Hi poornima prasanna jonna,
  
  Do you have Node.js installed on your system?
  
  Please refer to link and the comments below.
  - Like(0)
- Priyaranjan gupta
  
  July 25, 2020 at 6:01 am
  
  I am also having same issue.
  - Like(0)
  - Priyaranjan gupta
    
    July 25, 2020 at 6:14 am
    
    I ran this command again and now its working fine.
    
    npm i -g @sap/generator-fiori-elements
    Like(0)
Priyaranjan gupta

July 25, 2020 at 6:00 am

Hi ,

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

Screenshot
- Like(0)
/
- Freddy Collao Blas
  
  July 25, 2020 at 6:14 am
  
  sudo npm i -g @sap/generator-fiori-elements --@sap:registry=https://registry.npmjs.org
  - Like(0)
  - Priyaranjan gupta
    
    July 25, 2020 at 6:15 am
    
    Thanks. I ran npm i -g @sap/generator-fiori-elements and now its working fine.
    Like(0)
    - Freddy Collao Blas
      
      July 25, 2020 at 6:19 am
      
      Excelent!
      
      Like(0)
- SaiNithesh Gajula Post author
  
  July 25, 2020 at 6:31 am
  
  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
  - Like(0)
  - Priyaranjan gupta
    
    July 26, 2020 at 10:12 am
    
    Thanks Sai. Yeah , It worked
    Like(0)
Alvin Santiago

August 16, 2020 at 2:53 am

Hi SaiNithesh,

Thank you for this article!

Do you have any idea how to fix this error?
- Like(0)
/
- SaiNithesh Gajula Post author
  
  August 16, 2020 at 3:06 am
  
  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
  - Like(1)
  - Alvin Santiago
    
    August 16, 2020 at 4:19 am
    Hi SaiNithesh, Finally, it was solved with this: npm config set registry "https://registry.npmjs.com" Thanks a lot. Regards, Alvin
    Like(0)
    - SaiNithesh Gajula Post author
      
      August 16, 2020 at 4:24 am
      
      It's great to hear Alvin
      
      Like(0)
      - Alvin Santiago
        
        August 16, 2020 at 5:13 am
        
        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?
        
        Like(0)
      - SaiNithesh Gajula Post author
        
        August 16, 2020 at 6:27 am
        
        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
        
        Like(0)
      - Alvin Santiago
        
        August 16, 2020 at 6:42 am
        
        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.
        
        Like(0)
        
        /
      - SaiNithesh Gajula Post author
        
        August 16, 2020 at 8:22 am
        
        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/
        
        Like(0)
VIJAYA CHANDRAN UVARAJAN

August 26, 2020 at 2:27 pm

Hi SaiNitesh.,

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

Npm Install Error
- Like(0)
/
- SaiNithesh Gajula Post author
  
  August 26, 2020 at 3:10 pm
  
  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
  - Like(0)
  - VIJAYA CHANDRAN UVARAJAN
    
    August 26, 2020 at 5:52 pm
    
    Hi Nithesh.,
    
    Thanks for the suggestion. Actually node.js was not configured. It's working now.
    Like(0)
Manh Nguyen Tien

September 23, 2020 at 12:55 pm

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
- Like(0)
- SaiNithesh Gajula Post author
  
  September 23, 2020 at 4:43 pm
  
  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
  - Like(0)
  - Manh Nguyen Tien
    
    September 24, 2020 at 3:47 am
    
    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
    Like(0)
    /
    - SaiNithesh Gajula Post author
      
      September 24, 2020 at 11:16 am
      
      Hi Manh,
      
      By looking into the screenshot, below are my understandings.
      
      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
      
      For i18n related file issues, make sure file path is correct while loading.
      
      Let me know if you still face any issues.
      
      Regards,
      
      SaiNithesh
      
      Like(0)
Abdul Qayyum

October 19, 2020 at 8:46 pm

Hi ,

I have installed generators , created app but getting below error at npm start.
- Like(0)
/
- SaiNithesh Gajula Post author
  
  October 20, 2020 at 4:53 am
  
  Hi Abdul,
  
  Please check navigation intent in the SAP Fiori app. For reference please check below screenshot of flpSandbox.html
  
  Regards,
  
  Sai Nithesh
  - Like(0)
  /
Aditya Gupta

November 3, 2020 at 10:37 am

Hi,

How can I connect my OData v4 service in VSCode?

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

Thanks.
- Like(0)
Parandhaman Natarajan

December 16, 2020 at 8:13 am

Hi Nitesh,

while connect my OData it's asking user name and password.
- Like(0)
- SaiNithesh Gajula Post author
  
  December 16, 2020 at 2:50 pm
  
  Hi Natarajan,
  
  If service need authentication, it will ask to enter credentials.
  
  Regards,
  
  SaiNithesh Gajula
  - Like(0)
Jose Barajas

January 27, 2021 at 10:04 am

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
- Like(0)
- SaiNithesh Gajula Post author
  
  January 30, 2021 at 11:37 am
  
  Hi Jose,
  
  Once you connect to the VPN, you should able to access it locally in Visual Studio Code.
  
  Regards,
  
  Sai Nithesh
  - Like(0)
Nilesh Jain

February 23, 2021 at 5:07 pm

Hi I am not getting option to add main entity
- Like(0)
/
- SaiNithesh Gajula Post author
  
  February 24, 2021 at 5:30 am
  
  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
  - Like(0)
Irfan Gokak

April 7, 2021 at 9:16 am

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.
- Like(0)
Osman Kartal

April 21, 2021 at 12:18 pm

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
- Like(0)
- Amel Saidani
  
  April 22, 2021 at 8:46 am
  
  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,
  - Like(0)
Amel Saidani

April 22, 2021 at 8:47 am

Hello

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

Regards,
- Like(0)

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

Assigned tags

Related Blog Posts

Related Questions