Show TOC

JSON ViewsLocate this document in the navigation structure

A JSON view is one of the predefined view types that are available in SAPUI5.

The JSON view type is defined in a file. The file name has to either end with .view.json or as a JSON string. The file name and the folder structure together specify the name of the view that equals the SAPUI5 module name within the modularization concept.

For the file resources/sap/hcm/Address.view.json, the view name is sap.hcm.Address. The application uses this view name for displaying an instance of this view.

The file looks as follows: 

 
{ 
   "Type":"sap.ui.core.mvc.JSONView",
   "controllerName":"sap.hcm.Address",
   "content": [{
      "Type":"sap.ui.commons.Image",
      "id":"MyImage",
      "src":"http://www.sap.com/global/ui/images/global/sap-logo.png"
   },
   {
      "Type":"sap.ui.commons.Button",
      "id":"MyButton",
      "text":"Press Me"

   }]

}

Nest the JSON objects analogous to the nesting of SAPUI5 controls and add the property values as attributes. The syntax is the same as the syntax of a JSON constructor for any control.

Note

You can use strings, boolean, and null in your JSON view.

Aggregation Handling in JSON Views

You add child controls as arrays. This is shown in the example above where an image and a button have been added to the view content aggregation.

Data Binding in JSON Views

You can bind data in JSON views. To bind the texts of a control to a language-dependent resource bundle, define the resource bundle via name (resourceBundleName property) or a URL (resourceBundleUrl property) and assign an alias (resourceBundleAlias property) for the bundle within the view definition. The binding path is the same for all other SAPUI5 data bindings.

Resource bundle content:

MY_TEXT=Hello World

Example:

{   "Type": "sap.ui.core.JSONView",
    "controllerName":"my.own.views.test",
    "resourceBundleName":"myBundle",
    "resourceBundleAlias":"i18n",
    "content": [{
        "Type":"sap.ui.commons.Panel",
        "id":"myPanel",
        "content":[{
            "Type":"sap.ui.commons.Button",
            "id":"Button1",
            "text":"{i18n>MY_TEXT}",
            "press": "doIt"
        }]
    }]
}

The ResourceModel for binding this texts is created during view instantiation. The model is set as secondary model with the given alias to the view instance. To bind other properties to another model, create the model in the corresponding controller or HTML page and attach it to the view with another alias.

Related Information