Developing SAP Fiori App using SAP Fiori Tools in Visual Studio Code

Hi Everyone,

Hope you have gone through my previous blog about installing and configuration of Visual Studio Code.

https://blogs.sap.com/2020/06/28/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 Code.

Once we open the Visual Studio 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 🙂

Regards,

Sai Nithesh Gajula