Step 1: Set Up the Initial App

To set up your project for this tutorial, download the files for Step 1 from the Explored app in the Demo Kit under Navigation and Routing - Step 1. Copy the code to your workspace and make sure that the application runs by calling the webapp/index.html file.

Depending on your development environment you might have to adjust resource paths and configuration entries. The project structure and the files coming with this tutorial are explained in detail in the Walkthrough tutorial.

Figure 2: Folder structure with downloaded files

With the downloaded coding, you have an initial app with recommended settings that provides the basic features of an SAPUI5 app:

• Home Page

  The home page of our app is defined in the webapp/index.html file. In this file we bootstrap SAPUI5 and tell the runtime where to find our custom resources. Furthermore, we initialize the MockServer to simulate back-end requests as we do not have a real back-end service throughout this tutorial. Finally, we instantiate the application component, assign it to a sap.m.Shell control, and place the shell into the body. The corresponding Components.js file in the webapp folder will be extended throughout this tutorial.

• Data

  In the webapp/localService/mockserver.js file, we configure the mock server. Using the mock server in this tutorial allows us to easily run the code even without network connection and without the need of having a remote server for our application data.

  The metadata.xml file used by the mock server describes our OData service. The service only has two OData entities:

  • Employee

    An employee has typical properties like FirstName and LastName as well as a navigation property to a resume entity referenced by a ResumeID. Of course, the entity also has an ID property: EmployeeID. The corresponding EntitySet is Employees. The actual test data containing several employees is located in the webapp/localService/mockdata/Employees.json file.

  • Resume

    In our case, we want to keep the resume of employees very simple. Therefore, we just have simple properties of type Edm.String. The properties are Information, Projects, Hobbies and Notes; all of them contain textual information. The entity has an ID property ResumeID and the corresponding EntitySet is Resumes. The resume data for an employee is located in file webapp/localService/mockdata/Resumes.json.

• Configuration of the App

  In the webapp/manifest.json descriptor file, we configure our app. The descriptor file contains the following most interesting sections:

  • sap.app

    In this section we reference an i18n.properties file and use a special syntax to bind the texts for the title and description properties.

    In the dataSources part, we tell our app where to find our OData service employeeRemote. As you might guess, the uri correlates to the rootUri of our mock server instance which can be found in webapp/localService/mockserver.js. It is important that these two paths match to allow our mock server to provide the test data we defined above. The localUri is used to determine the location of the metadata.xml file.

  • sap.ui5

    Under sap.ui5 we declare with the rootView parameter that our sap.ui.demo.nav.view.App view shall be loaded and used as the rootView for our app. Furthermore, we define two models to be automatically instantiated and bound to the i18n component and a default model "". The latter references our employeeRemote dataSource which is declared in our sap.app section as an OData 2.0 data source. The i18n file can be found at webapp/i18n/i18n.properties. This data source will be mocked by our mock server.

So far we have a basic app that does not really have any navigation or routing implemented. This will change in the next steps when we implement our first navigation features.