Show TOC

Step 2: Creating a ModelLocate this document in the navigation structure

In this step, we create a model as container for the data on which your application operates.

The business data within a model can be defined using various formats:

  • JavaScript Object Notation (JSON)

  • Extensible Markup Language (XML)

  • OData

  • Your own custom format (not covered in this tutorial)

Note

There is also a special type of model called a "resource model". This model type is used as a wrapper object around a resource bundle file. The names of such files must end with .properties and are used typically for holding language-specific text.

We will use this in Step 6: Resource Models.

When JSON, XML and resource models are created, the data they contain is loaded in a single request (either from a file stored locally on the client or by requesting it from a Web server). In other words, after the model's data has been requested, the entire model is known to the application. These models are known as client-side models and tasks such as filtering and sorting are performed locally on the client.

An OData model however, is a server-side model. This means that whenever an application needs data from the model, it must be requested from the server. Such a request will almost never return all the data in the model, typically because this would be far more data than is required by the client application. Consequently, tasks such as sorting and filtering should always be delegated to the server.

In this tutorial, we will focus on JSON models since they are the simplest ones to work with.

Preview
Figure 1: Screen with text derived from a model object (No visual changes to last step)
Coding

You can view and download all files in the Explored app in the Demo Kit under Data Binding - Step 1.

webapp/index.html
...
    <script>
		// Attach an anonymous function to the SAPUI5 'init' event
		sap.ui.getCore().attachInit(function () {
			// Create a JSON model from an object literal
			var oModel = new sap.ui.model.json.JSONModel({
				greetingText: "Hi, my name is Harry Hawk"
			});
			// Assign the model object to the SAPUI5 core
			sap.ui.getCore().setModel(oModel);

			// Create a text UI element that displays a hardcoded text string
			new sap.m.Text({text: "{/greetingText}"})
				.placeAt("content");
		});
    </script>
...

Create a new JSON model passing the data as object literal and store the resulting model instance in a local variable called oModel.

Set oModel to be the default model within the entire SAPUI5 core.

This makes the model object globally available to all controls used within the application.

In this case we have bound the model object to the SAPUI5 core. This has been done for simplicity, but is not considered good practice. Generally speaking, a model object holding business data should be bound to the view that displays the data. We will correct this part of the code in the following steps.

Note

Models can be set on every control by calling setModel(). The model is then propagated to all aggregated child controls (and their children, and so on…). All child control will then have access to that model

The text that is displayed on the UI is still not taken from the model - we will do this in the next step.