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.
You can view and download all files in the Explored app in the Demo Kit under Data Binding - Step 9.
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.
<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>
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.
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).