Show TOC

Step 8: Binding Paths: Accessing Properties in Hierarchically Structured ModelsLocate this document in the navigation structure

In step 6 , we stated that the fields in a resource model are arranged in a flat structure; in other words, there can be no hierarchy of properties; however, this is true only for resource models. The properties within JSON and OData models almost always are arranged in a hierarchical structure. Therefore, we should take a look at how to reference fields in a hierarchically structured model object.

Figure 1: Second panel with additional data

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

    // ------------------------------------------------------------------------
    // Attach an anonymous function to the 'init' event    
    sap.ui.getCore().attachInit(function () {
      var oModel = new sap.ui.model.json.JSONModel({
        firstName : "Harry",
        lastName  : "Hawk",
        enabled   : true,
        address   : {
		street : "Dietmar-Hopp-Allee 16",
		city : "Walldorf",
		zip : "69190",
		country : "Germany"

The JSON model object now contains an additional sub-object called address. Within this object are four properties: street, city, zip, and country.

<mvc:View xmlns="sap.m" xmlns:l="sap.ui.layout" xmlns:mvc="sap.ui.core.mvc">
  <Panel headerText="{i18n>panel1HeaderText}" class="sapUiResponsiveMargin" width="auto">
      <Label text="{i18n>firstName}" class="sapUiSmallMargin" />
      <Input value="{/firstName}" valueLiveUpdate="true" width="200px" enabled="{/enabled}" />
      <Label text="{i18n>lastName}" class="sapUiSmallMargin" />
      <Input value="{/lastName}" valueLiveUpdate="true" width="200px" enabled="{/enabled}" />
      <CheckBox selected="{/enabled}" text="{i18n>enabled}" />
  <Panel headerText="{i18n>panel2HeaderText}" class="sapUiResponsiveMargin" width="auto">
          <Label class="sapUiSmallMargin" text="{i18n>address}:" />
          <Text class="sapUiSmallMargin" 
                text="{/address/street}\n{/address/zip} {/address/city}\n{/address/country}" 
                width="200px" />


We add a new panel to the XML view with a new Label and Text pair of elements.

The text property of the Label element is bound to the i18n resource bundle field address.

The text property of the Text element is bound to three i18n properties: /address/street, /address/zip, /address/city, and /address/country. The resulting address format is achieved by separating each one of these model property references with a hard-coded newline character while zip and city are separated by a space.

# Field labels
firstName=First Name
lastName=Last Name

# Screen titles
panel1HeaderText=Data Binding Basics 
panel2HeaderText=Address Details
# Field labels

# Screen titles
panel1HeaderText=Data Binding Grundlagen

The resource bundle files now contain new properties for the Address and a new panel header text. Both panel properties have been numbered.

In the XML view, inside the curly brackets for the binding path of the Text element, notice that the first character is a forward slash. This is required for binding paths that make absolute references to properties in JSON and OData models, but must not be used for resource models. After the first forward slash character, the binding path syntax uses the object names and the property name separated by forward slash characters ({/address/street}).

As has been mentioned previously, all binding path names are case-sensitive.