Add a Dynamic Map to a Contact Form using REST Web Services

Update: Due to a change in the Bing Maps REST Web Service, the steps outlined in this blog post no longer work. We are looking into the possibility of using a different API, and will update this post soon with details.

Hi, Phil Newman here from the InfoPath team. In this post, I’ll explain how to use the new REST Web service data connection in InfoPath 2010 to add a dynamic map to a contacts form. The form connects to two Web services. The first is a REST Web service that returns the coordinates of a given address from Bing Maps, the second returns an image of a map for a given coordinate set. When users enter address information in the form, the map will update to display the specified address.

The following steps assume that:

1. You’ve already created your Contacts list in SharePoint and customized the form for the list in InfoPath.
2. You have a Bing Maps key (see http://msdn.microsoft.com/en-us/library/ff428642.aspx)

Add the Data Connections

1. In InfoPath Designer, click “From REST Web Service” on the “Data” tab.
2. On the first page of the Data Connection wizard, enter the URL of the Bing Maps REST Web service that will return the GPS coordinates for the specified address. The URL must contain sample parameters that will return valid values at runtime. Otherwise the connection will not be configured. Here is my starting URL (you will need to replace YourBingMapsKey with your own Bing Maps key value) :

   http://dev.virtualearth.net/Services/v1/GeocodeService/GeocodeService.asmx/Geocode?culture=en-us&count=10&query=1%20Microsoft%20Way%20Redmond%20wa%20&landmark=&addressLine=&locality=&postalTown=&adminDistrict=&district=&postalCode=&countryRegion=&mapBounds=&currentLocation=&curLocAccuracy=&entityTypes=&rankBy=&key=YourBingMapsKey 

   Note that I’ve included a default address of “1 Microsoft Way Redmond WA” so that the Web service will return valid XML.
3. On the next page of the Data Connection wizard, specify a name for the data connection. Since in this scenario we only want the map to be displayed when the user enters an address, clear the “Automatically retrieve data when the form is opened” check box, and click “Finish”.
4. Because the Bing Maps Web service is not on the SharePoint server, the data connection must be converted to a data connection (.udcx) file. Click “Data Connections” on the “Data” tab, select the data connection, and click “Convert to Connection File”. The connection file must be saved to a Data Connection Library on the SharePoint site and approved before it can be used.  (For more about data connections and UDC files, go here)

Add a Rule to query the REST Web Service

The next step is to create a rule to change the parameters in the REST Web Service URL based on the address values entered in the form. The Web service will then be queried using these parameters.

1. Add a button to the form.
2. Select the button and click “Manage Rules” on the “Home” tab.

   (NOTE – the button is being used as a temporary placeholder for creating the rules. In InfoPath 2010, you can copy and paste rules between controls. We’ve built in smarts so that when you copy a rule to a different control, field references are updated. In this case we do not want the references to be updated so we will create the rules on the button and then copy and paste it on to the Address fields.)

3. On the “Rules” task pane, click “New”, “Action” and add a “Change REST URL” rule action. 
4. Build an expression that concatenates values in the form to create the URL
   • In the “Insert Formula” dialog, select the existing URL 
   • Click the “Insert Function” button and add the Concat function from the “Text” category.
   • Replace the default value for the address with parameters from the form. Since the Concat function concatenates strings, each hard coded string must be in quotes. Use the “Insert Field or Group…” button to add fields from the form to the expression.
   • Click OK in the “Insert Formula” and “Rules Details” dialogs. The underlined words in the image below are fields in the form being used as parameters in the URL.
   • Here is the Formula (you will need to replace YourBingMapsKey with your own Bing Maps key value) :

     concat("http://dev.virtualearth.net/Services/v1/GeocodeService/GeocodeService.asmx/Geocode?culture=en-us&count=10&query=", Address, ", ", City, ", ", State/Province, "&landmark=&addressLine=&locality=&postalTown=&adminDistrict=&district=&postalCode=&countryRegion=&mapBounds=&currentLocation=&curLocAccuracy=&entityTypes=&rankBy=&key=YourBingMapsKey") 

5. Add a “Query for Data” rule action to query the REST Web Service with the new URL parameters.

Add a Rule action to set the URL of the Map picture control

To display the map of the current location in the picture control, append the latitude and longitude values returned by the Bing Maps REST Web Service to the URL for that image.

1. Add a “Set a field’s value” rule action to set the URL of the picture control to the map of the current location.
2. Set the value of the field to the following expression in which “Latitude” and “Longitude” are fields from the REST Web service response. The expression used to build the map image URL is as follows (you will need to replace YourBingMapsKey with your own Bing Maps key value) :

   concat("http://api.tiles.virtualearth.net/api/GetMap.ashx?ppl=24,,", Latitude, ",", Longitude, "&key= YourBingMapsKey")

3. Add a condition to the rule so that it only executes if the Address, City and State / Province fields are not blank.
4. Copy the rule from the button you created earlier and paste it onto the Address, City and State / Province controls.
5. Add a rule to the picture control to hide it if the URL is blank.
6. From the File tab, click “Quick Publish”.

Now, open the form in the browser and fill it out. As soon as you have entered an address, the map of that location will appear in the form.

3 important things to remember when using the REST Web Service data connection:

1. Always start with a valid URL for your REST Web service.
2. To change the parameters in the URL, add a “Change REST URL” rule action.
3. To execute the connection, add a “Query for Data” rule action.

Please leave a comment if you have any questions or feedback about this feature!

Phil Newman

Program Manager