Step 7: JSON Model


Now that we have set up the view and controller, it’s about time to think about the M in MVC.


Step 7: JSON Model - 第1张  | 优通SAP


You can view and download all files at Walkthrough – Step 7.


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.


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.


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.


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.

6. Conventions

  • Use Hungarian notation for variable names.



20 + nine =