Set Up and Generate a New SAP Fiori App Project

SAP Fiori tools includes an Application Generator that provides a wizard-style approach for creating applications based on SAP Fiori elements page types. You are going to use it to create your List Report Object Page app.

In Visual Studio Code, open the Command Palette using CMD/CTRL + Shift + P, type Application Generator, and select Fiori: Open Application Generator.

In Visual Studio Code, the Command Palette provides convenient access to a variety of commands. These commands give you access to certain functionality in Visual Studio Code, including the custom commands that are part of SAP Fiori tools.

The Command Palette will then close and a new tab for the Application Generator will open. Since the purpose of this tutorial is to create an SAP Fiori elements List Report Object Page app, ensure that SAP Fiori elements is selected in the Application Type menu.

Select the List Report Object Page tile and press Next.

Now you need to select the page type you would like to use. Since this tutorial involves a list report, select List Report Object Page, and then click Next.

With the page type selected, it is time to connect a data source. You will use the OData service mentioned in the prerequisite section of this tutorial.

Select Connect to an OData Service from the dropdown menu. A field to enter the OData service URL will appear. Copy and paste the service URL:

https://sapes5.sapdevcenter.com/sap/opu/odata/sap/SEPMRA_PROD_MAN/

You may be prompted to enter credentials to access the service. Enter your username and password, and click the Next button.

These credentials were the ones you created if you had to request access to the OData service.

After successfully connecting to the supplied OData service, click Next to customize the template.

Two more fields will appear. One for the Main Entity and another for the Navigation Entity. Since this list report is intended to display products, select SEPMRA_C_PD_Product for Main Entity. The application is simply meant to display a list of products, so set the Navigation Entity to None.

Click Next.

With the page type and data source defined, the next step is to configure the main project attributes:

Click Finish.

At this point, your application folder will be generated based on the input from above.

Once your project has been generated, you will have the option to add it to your existing workspace. Verify that your project has been created and looks similar to this:

Since the given OData service came with pre-configured backend annotations, you can preview your app right away.

From the Visual Studio Code Explorer on your left, right-click your project and select Preview Application.

From the options, you will need to select a npm script. Select start and press Enter to preview your app with backend data. A new browser window will open with your List Report Object Page application running.

You may need to enter the credentials you created if you had to request access to the OData service.

During your app development, you may face a slow internet connection or an unavailable backend system. SAP Fiori tools provides the option to run your application with mock data.

To download the mock data we have provided for you, navigate to the SAP Fiori tools Sample repository on GitHub. Click Download to download the zip file of the project.

Extract the zip file to a location of your choice. Drag the extracted folder into the localService folder in your app, under **webapp** > **localService**

From the Visual Studio Code Explorer on your left, right-click your project and select Preview Application.

From the options, you will need to select a npm script. Select start-mock and press Enter to preview your app with mock data.

A new browser window opens with your List Report Object Page application running with mock data.

For the remainder of this tutorial group, if the backend service becomes unavailable at any point or you have trouble viewing data, you can preview your application with mock data.

At this point, you should have the following:

• A List Report Object Page SAP Fiori elements project generated by the SAP Fiori tools Application Generator

• A running application using real backend data

Good job! In the next tutorial, you will enhance the functionality of this application by configuring the List Report Page using SAP Fiori tools.