Create an Empty SAPUI5 Project

Start a dev space of kind SAP Fiori and open it by clicking its name.

Have a look at this tutorial if you are unsure how to get here or how to create a dev space.

Make sure you are connected to a Cloud Foundry endpoint to deploy the SAPUI5 application later.

1. Click on the bottom-left corner of the screen to start the connection flow.

   

2. Enter the Cloud Foundry endpoint you want to use. If your environment runs in the EU10-region, this is https://api.cf.eu10.hana.ondemand.com. Enter your email and your password to proceed.

   

3. Next, you need to select the Cloud Foundry Organization and space you want to use. You will see that you are connected to the endpoint once these prompts have been answered.

   

1. Click on the link New project From template on the Welcome screen.

   

2. Select SAP Fiori Freestyle - Project Generator as the template category you want to use and click Next.

   

3. Specify the target environment ( Cloud Foundry ) and the template ( SAPUI5 Application ) and go to the Next screen.

   

4. Name the project tutorial and proceed by clicking Next.

   

5. Choose Standalone Approuter for the runtime and click Next.

   

6. Name of the module webapp and the namespace sap.cp and turn authentication off. Go to the Next screen.

   

7. Keep the default view name and select Yes to add a data service on this project.

   

8. Select My SAP Systems and the source Northwind. Enter /v2/northwind/northwind.svc/ for the path - don’t forget the ending slash. Click Next to create the new project.

   

9. Once the project has been created, the Business Application Studio will prompt you to open the project in a new workspace. Click Open in New Workspace.

   

Create a run configuration to be able to run the web app. This configuration needs to be created only once.

1. To run the UI module, switch to the Run Configuration panel on the left-hand bar. Click on the + icon to add a new run configuration.

   

2. In the prompt, select the UI module webapp as the app you want to run.

   

3. Then, select index.html to add a new run configuration for your app.

   

4. Choose the latest UI5 version.

   

5. Choose Run Web App as the name of the configuration to create the configuration.

   

6. You can see the configuration on the left side now. Expand it to view the Data Source (Destination) dependency and click on it to connect the run configuration to the data source.

   

7. Select the Northwind data source from the list.

   

1. Now you should see your (blank) SAPUI application. Right-click on the web page, and choose Inspect

2. The inspector will appear. Click on the Network tab to view the network traffic for the application.

3. To view all the network traffic, reload the page. The network traffic will appear as the page is loading.

4. Scroll down until you find the $metadata item - or use the filter box to search for it.

   NOTE Typing in metadata to the filter box in the upper right corner will make it easy to find the correct row.

5. Click on $metadata, then click the Preview tab.

   This will show you the data coming from the server to the browser. If you see this, the OData request is working. You are ready to move on to the next step of the tutorial.

   

Expand the nodes <edmx:Edmc>, <edmx: DataServices> and the first <Schema> node in the Chrome Network trace.