Show TOC

Step 9: Formatting ValuesLocate this document in the navigation structure

How can we make our example more useful? Let’s use the address data we have to show the address location on a map. For this we will use the openly available Google Maps API. (Make sure you meet Google’s terms and conditions if you decide to use their API in your applications.) So in this step we will look at how model property values can be programmatically formatted according to the requirements of the Maps API.

Preview
Figure 1: Address visualized in Google Maps
Coding

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

webapp/controller/App.controller.js (New)
sap.ui.define(["sap/ui/core/mvc/Controller"],
	function (Controller) {
		"use strict";
	return Controller.extend("sap.ui.demo.db.controller.App", {
		formatMapUrl: function(sStreet, sZip, sCity, sCountry) {
			return "https://maps.googleapis.com/maps/api/staticmap?zoom=13&size=500x300&markers="
			+ jQuery.sap.encodeURL(sStreet + ", " + sZip +  " " + sCity + ", " + sCountry);
		}
	});
});

Create a new folder controller within your webapp folder as a general location for all controller files for this app and create a new file App.controller.js.

webapp/view/App.view.xml
<mvc:View xmlns="sap.m" xmlns:l="sap.ui.layout" xmlns:mvc="sap.ui.core.mvc" controllerName="sap.ui.demo.db.controller.App">
  <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" />
        <Image class="sapUiSmallMargin" width="500px" height="300px" src="{ parts: [ '/address/street', '/address/zip', '/address/city', '/address/country' ], formatter: '.formatMapUrl' }" />
      </l:VerticalLayout>
    </content>
  </Panel>
</mvc:View>
For more complex bindings we cannot use the simple binding syntax with the curly braces anymore. The src property of the Image element now contains an entire object inside the string value. In this case, the object has two properties:
  • parts

    This is a JavaScript array in which each element is an object containing a path property. The number and order of the elements in this array corresponds directly to the number and order of parameters expected by the urlFormatter function..

  • formatter

    A reference to the function that receives the parameters listed in the parts array. Whatever value is returned by the formatter function becomes the value set for this property.

Note

When using formatter functions the binding automatically is switched to "one-way2. So you can’t use a formatter function for "two-way" scenarios, but you can use data types (which will be explained in the following steps).