Adding Dynamic Maps to Contact Forms with REST Web Services in InfoPath 2010

Article
07/24/2014

Summary: Learn how to use new REST Web service data connection feature in InfoPath 2010 to add a dynamic map to a list form for contacts in SharePoint Server 2010.

Applies to: InfoPath 2010 | Office 2007 | Office 2010 | SharePoint Server 2010 | Visual Studio Tools for Microsoft Office

In this article
Introduction
Part 1 ─ Setting up the InfoPath REST Lab Site
Part 2 ─ Adding the Map and REST Data Connection to the Form
Part 3 ─ Adding Logic to the Form to Update the Map to Show the Location of the Address in the Form
Part 4 ─ Publishing the Form and Using the Form in the Browser
Conclusion
Additional Resources

Contents

Download code

Introduction

Microsoft InfoPath 2010 makes designing and publishing electronic forms easier than ever. InfoPath enables you to create powerful, interactive forms without writing any code. By using only a few clicks, an Office user can customize a SharePoint list form, add custom layout elements, and add business rules to validate the data.

The following technologies are highlighted in this lab:

InfoPath 2010
SharePoint Server 2010
Bing Maps

Lab Objectives

After completing this lab, you will know how to:

Show a map by adding a picture control to a custom SharePoint list form.
Retrieve an address coordinate by adding a data connection to a Bing Maps Geocode service.
Show a Bing Map for the Geocode service coordinates by adding logic.
Include values from fields in the form by configuring the REST Web service URL.

Scenario

You currently manage your contacts using a SharePoint Contacts list. In this lab, you will use the new REST Web Service data connection in InfoPath 2010 to add a dynamic map to the 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 the user enters address information in the form, the map updates to display the specified address.

Part 1 ─ Setting up the InfoPath REST Lab Site

Before you can start the lab, you must set up the InfoPath REST Lab site that contains the lists and other resources that you must have to complete the lab exercises. To set up the site, download the InfoPath_REST_Lab.wsp solution package that contains the InfoPath REST Lab site template solution. Then, upload the WSP file to your SharePoint Server 2010 server. Finally, create a new site based on the package as described in the following steps.

To upload and activate the WSP file to a site collection

On the top-level site of the site collection, on the Site Actions menu, click Site Settings.
On the Site Settings page, in the Galleries section, click Solutions.
On the Solutions tab of the ribbon, in the New group, click Upload Solution.
In the Upload Document dialog box, click Browse.
In the Choose File to Upload dialog box, locate the InfoPath_REST_Lab.wsp file that you downloaded, select the file, and then click Open.
In the Upload Document dialog box, click OK.

The Solution Gallery – Activate Solution dialog box appears.
In the Solution Gallery – Activate Solution dialog box, click Activate.

Clicking Activate instructs SharePoint to make the site template solution available to create sites in the site collection. The name of the WSP file that you uploaded now appears in the Solutions Gallery with Status set to Activated.

In the next procedure, you will create a new site based on the InfoPath REST Lab site template solution.

To create a new site based on the site template solution

Open the top-level site in your site collection, and on the Site Actions menu, click New Site.
In the Create dialog box, under Filter By, click Blank & Custom.
Click the InfoPath REST Lab site.
In the Title box, type InfoPath REST Lab.
In the URL name box, type InfoPath REST Lab, and then click Create.

This will create a new site populated with the lists and items required to perform the lab. The URL for the site will be http://<site collection>/InfoPath%20REST%20Lab/.

Part 2 ─ Adding the Map and REST Data Connection to the Form

In this part of the lab, you will open the list form in the InfoPath 2010 Designer, and then add the data connection to the Bing Maps Web service that you will be using.

To navigate to the list and open the form in the InfoPath Designer

Navigate to http://<site collection>/InfoPath%20REST%20Lab/ in Internet Explorer.
Select My Contacts in the Lists list.
On the List tab of the ribbon, click the Customize Form button to open the list form in the InfoPath Designer as shown in Figure 1.

Figure 1. Opening the list form in the InfoPath Designer

Note

The form that opens in the InfoPath Designer already has a custom layout.

After you have located the form and opened the form in InfoPath Designer, you can add a picture control. Later on, you will connect the control to the Bing map service.

To add a Picture control to show the map

Place your cursor in the area under the main table, and then add a Picture control from the Controls group on the Home tab.
On the Control Tools Properties tab of the ribbon, rename the picture field that you previously added to map.
In the Modify group of the Control Tools Properties tab, set the field to Read-Only.

Your form should resemble Figure 2.

Figure 2. Adding the Picture control to show the map

Now that you have added the Picture control, you can add the REST Web service data connection.

To add a REST Web service data connection to the Bing Maps Geocode service

On the Data tab, click From Web Service, and then select From REST Web Service.

In the Data Connection Wizard, copy and enter the following URL as the URL of the REST Web service.

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=

Click Next.
Enter Geocode as the name for the REST Web service, and then clear the Automatically receive data when the form is opened check box.
Click Finish.

Now, convert the data connection information to a data connection file for use on SharePoint.

To convert the data connection

On the Data tab, click Data Connections.
Select the Geocode connection that you previously created, and then click Convert to Connection File.
Specify the URL of the new data connection file with the following URL. Be sure to replace <site collection> with the path of your site collection.
```
http://<site collection>/InfoPath%20REST%20Lab/Data%20Connections/Geocode.udcx
```
Click OK.
Close the Data Connections dialog box.

In the next part of this exercise, you will hook up the REST Web service to the fields in the form, and then add logic to show the map.

Part 3 ─ Adding Logic to the Form to Update the Map to Show the Location of the Address in the Form

In this part of the lab, you will add rules to the Address, City and State controls to query the REST Web service. The query will retrieve coordinates for the address that the user enters. You will then add logic to update the map to show the retrieved location. You start by adding a button that you will use to build up the set of rules, and then you will copy and paste the set of rules to the three text boxes.

To create a rule to change the URL of the REST Web service

From the Controls group on the Home tab, add a Button under the Picture control. You will build the logic to update the map location on the button.

Note

You will use the button as a temporary placeholder for creating the rules. In InfoPath 2010, you can copy and paste rules between controls. InfoPath has built-in logic so that when you copy a rule to a different control, InfoPath updates the field references. However, in this case, you do not want InfoPath to update the field references. Therefore, you will create the set of rules on the button, and then copy and paste the rules to the three address fields.
With the button selected, open the Rules task pane by clicking Manage Rules on the Home tab in the ribbon.
In the Rules task pane, click New, and then click Action.
Set the name of the rule to be Update Map instead of Rule 1.
In the Rules task pane, click Add, and then click Change REST URL rule action as shown in Figure 3. This displays the Rule Details dialog box.

Figure 3. Adding the Change REST URL action

In the next procedure, you will configure this rule using the Rule Details dialog box. Your configuration will create a formula that passes the address values from the form to the REST Web service.

To configure the rule to pass the address from the form to the REST Web service

To build an expression for the URL, in the Rule Details dialog box, click the fx button next to REST Web Service URL.
In the Insert Formula dialog box, paste the following expression in the Formula box.
```
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=")
```
This expression uses the XPath Concat function to pass address values to the Web service as parameters from the form. Because the Concat function concatenates strings, you must have each hard-coded part of the string in quotation marks. In the following steps, you use the Insert Field or Group button to replace the three field names in the pasted expression with the corresponding fields from the form.
Select the Address, City, and State/Province strings in the pasted expression one at a time and replace each one with the corresponding field from the form.

To do so, select a field name in the expression, and then click the Insert Field or Group button. Then, select the corresponding field from the Select a Field or Group dialog box. The three underlined field names that are shown in Figure 4 act as parameters in the URL. The form then uses the URL to pass the values to the Web service.

Figure 4. Replacing the field name strings
Click OK in the Insert Formula and Rules Details dialog boxes.
In the Rules task pane, add a second Action rule to Query for data, and select to query the Geocode data connection in the Rule Details dialog box.

Now that you have configured the rule, you can add a rule action to update the map.

To add a rule action to update the map

With the button still selected, click New in the Rules task pane, and then click Action.
Click Add, and then click Set a field's value.
In the Rule Details dialog box, specify map as the Field.
Click the fx button to the right of the Value box.

In the Insert Formula dialog box, paste the following expression.

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

Replace Latitude in the pasted expression with the corresponding field from the Geocode data connection response by using the following steps:
1. Select the pasted Latitude text, and then click Insert Field or Group.
2. In the Select a Field or Group dialog box, click Show advanced view, and then select the Geocode (Secondary) data connection from the Fields drop-down list.
3. Select the Latitude field after expanding the Results, GeocodingResult, BestLocation, and Coordinates groups as shown in Figure 5.
  
  Figure 5. Selecting the Latitude field
Repeat step 6 to replace the pasted Longitude text in the expression with the corresponding Longitude field from the Geocode data connection, and then click OK two times to close the dialog boxes.

After you added the rule action, you must then add conditions to the rule, and apply those conditions to the address controls.

To add conditions to the rule and copy and paste the conditions onto the address controls

With the button still selected, add a condition to the rule that you previously built by clicking None – Rule runs when button is clicked in the Rules task pane.
In the Condition dialog box, create a condition to run the rule only if Address, City, and State/Province are not blank as shown in Figure 6.

Figure 6. Specifying the condition that the address is not blank

Tip

You can confirm that the rules that are defined for the button are working correctly at this point by previewing the form. To do that, click Preview on the Home tab, enter values in the Address, City, and State/Province text boxes, and then click the button.
Copy and paste the rules from the button to the Address, City, and State/Province text boxes using the following steps:
1. Select the button, and then click the Copy All Rules icon in the Rules task pane.
2. Select the Address text box, and then click the Paste icon in the Rules task pane. Repeat for the City and State/Province text boxes.
Delete the button now, because it is no longer needed.

Finally, after applying the conditions to the controls, you should add a rule to hide the map if there is no relevant image.

To add a rule to hide the map if there is no image to show

Select the map picture control on the form.
In the Rules task pane, click New, and then click Formatting.
Below Condition:, click None, and then set the condition to map is blank in the Condition dialog box.
At the bottom of the Rules task pane, select the Hide this control check box.

Settings in the Rules task pane should resemble Figure 7.

Figure 7. The Rules task pane

Part 4 ─ Publishing the Form and Using the Form in the Browser

In this part of the lab, you will publish the form back to SharePoint and then open the form in Internet Explorer to test the functionality that you previously added. The first step is to publish the form.

To publish your form

Click the File tab on the ribbon.
Click Quick Publish.
Click OK on the confirmation dialog.

After you have published the form, you can test your form on SharePoint.

To use the form on SharePoint

Navigate to http://<site collection>/InfoPath REST Lab in Internet Explorer.
Select My Contacts from the list of lists.
Click Add new item.
The form will appear. Try out the features that you added:
- Type in an address, city, and state or province. After all three values are entered, a map of that location will appear.
- You can also try names of landmarks for the address.
Figure 8. The My Contacts form displaying a map

Conclusion

In this lab, you learned how to use the new REST Web service data connection feature of InfoPath 2010. You then used the data connection feature to add a dynamic map to a custom contacts list form in SharePoint Server 2010.

Additional Resources

For more information about how to develop with InfoPath, see the following resources:

Share via