Show TOC

Step 7: JSON ModelLocate this document in the navigation structure

Now that we have set up the view and controller, it’s about time to think about the "M" in MVC. We will add an input field to our app, bind its value to the model, and bind the same value to the description of the input field. The description will be directly updated as the user types.

Preview
Figure 1: An input field and a description displaying the value of the input field
Coding

You can view and download all files in the Explored app in the Demo Kit under Walkthrough - Step 7.

webapp/controller/App.controller.js
sap.ui.define([
   "sap/ui/core/mvc/Controller",
   "sap/m/MessageToast",
   "sap/ui/model/json/JSONModel"
], function (Controller, MessageToast, JSONModel) {
   "use strict";
   return Controller.extend("sap.ui.demo.wt.controller.App", {
      onInit : function () {
         // set data model on view
         var oData = {
            recipient : {
               name : "World"
            }
         };
         var oModel = new JSONModel(oData);
         this.getView().setModel(oModel);
      },
      onShowHello : function () {
         MessageToast.show("Hello World");
      }
   });
});

We add an init function to the controller. onInit is one of SAPUI5’s lifecycle methods that is invoked by the framework when the controller is created, similar to a constructor function of a control.

Inside the function we instantiate a JSON model. The data for the model only contains a single property for the “recipient”, and inside this it also contains one additional property for the name.

To be able to use this model from within the XML view, we call the setModel function on the view and pass on our newly created model. The model is now set on the view.

The message toast is just showing the static "Hello World" message. We will show how to load a translated text here in the next step.

webapp/view/App.view.xml
<mvc:View
   controllerName="sap.ui.demo.wt.controller.App"
   xmlns="sap.m"
   xmlns:mvc="sap.ui.core.mvc">
   <Button
      text="Say Hello"
      press="onShowHello"/>
   <Input
      value="{/recipient/name}"
      description="Hello {/recipient/name}"
      valueLiveUpdate="true"
      width="60%"/>
</mvc:View>
We add an sap.m.Input control to the view. With this, the user can enter a recipient for the greetings. We bind its value to a SAPUI5 model by using the declarative binding syntax for XML views:
  • The curly brackets {…} indicate that data is taken from the value of the recipient's object name property. This is called "data binding".

  • /recipient/name declares the path in the model.

webapp/index.html
<!DOCTYPE html>
<html>
   <head>
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta charset="utf-8">
      <title>Walkthrough</title>
      <script
         id="sap-ui-bootstrap"
         src="/resources/sap-ui-core.js"
         data-sap-ui-theme="sap_bluecrystal"
         data-sap-ui-libs="sap.m"
         data-sap-ui-compatVersion="edge"   
         data-sap-ui-preload="async" 
	 data-sap-ui-resourceroots='{
		"sap.ui.demo.wt": "./"
	}' >
      </script>
      <script>
         sap.ui.getCore().attachInit(function () {
			sap.ui.xmlview({
				viewName: "sap.ui.demo.wt.view.App"
			}).placeAt("content");
         });
      </script>
   </head>
   <body class="sapUiBody" id="content">
   </body>
</html>

The binding of the value attribute is a simple binding example that contains only a binding pattern. We can also combine texts and binding pattern to a more complex binding result as seen in the description attribute. To be able to use the so-called complex binding syntax we have to enable it globally by setting the bootstrap parameter data-sap-ui-compatVersion to edge. If this setting is omitted, then only standard binding syntax is allowed, meaning "Hello {/recipient/name}" would not work anymore while "{/recipient/name}" would work just fine.

Note

You can either use data-sap-ui-compatVersion="edge" or data-sap-ui-bindingSyntax="complex" in the script. By setting the “edge” compatibility mode, the complex binding syntax is automatically enabled. The edge mode automatically enables compatibility features that otherwise would have to be enabled manually. For more information, see Compatibility Version Information.

Conventions
  • Use Hungarian notation for variable names.