Step 8: Binding Paths: Accessing Properties in Hierarchically Structured Models

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.

Preview

Figure 1: Second panel with additional data

Coding

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

webapp/index.html

...
    <script>
    // ------------------------------------------------------------------------
    // 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.

webapp/view/App.view.xml

<mvc:View xmlns="sap.m" xmlns:l="sap.ui.layout" xmlns:mvc="sap.ui.core.mvc">
  <Panel headerText="{i18n>panel1HeaderText}" class="sapUiResponsiveMargin" width="auto">
    <content>
      <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}" />
    </content>
  </Panel>
  <Panel headerText="{i18n>panel2HeaderText}" class="sapUiResponsiveMargin" width="auto">
    <content>
      	<l:VerticalLayout>
          <Label class="sapUiSmallMargin" text="{i18n>address}:" />
          <Text class="sapUiSmallMargin" 
                text="{/address/street}\n{/address/zip} {/address/city}\n{/address/country}" 
                width="200px" />
        </l:VerticalLayout>   
    </content>
  </Panel>

</mvc:View>

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.

webapp/i18n/i18n.properties

# Field labels
firstName=First Name
lastName=Last Name
enabled=Enabled
address=Address


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

webapp/i18n/i18n_de.properties

# Field labels
firstName=Vorname
lastName=Nachname
enabled=Aktiviert
address=Adresse


# Screen titles
panel1HeaderText=Data Binding Grundlagen
panel2HeaderText=Adressdetails

Note

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.