Microsoft InfoPath 2010
The official blog of the Microsoft InfoPath team

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

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

Rate This
  • Comments 25

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.

Get Microsoft Silverlight

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. Data Tab, From REST Web Service
  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. Data Connection Wizard - Web Service Details 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”. Data Connection Wizard - Data Connection Name
  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)Data Ribbon tab - Data Connections

RESTSaveConnectionFile

RESTSaveConnectionFile2

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.RESTManageRules

    (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 RESTRuleDetails
    • In the “Insert Formula” dialog, select the existing URL  RESTInsertFormula
    • 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. RESTInsertFormula2
    • 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

Leave a Comment
  • Please add 3 and 2 and type the answer here:
  • Post
  • Hi Phil,

    Cool idea to make the forms richer! I decided to try it out, but my form didn't show any map pictures. Some troubleshooting pointed me to the two URL's you use in your blog:

    http://dev.virtualearth.net/Services/v1/GeocodeService/GeocodeService.asmx gives me a Runtime Error.

    http://api.tiles.virtualearth.net/api/GetMap.ashx gives me a HTTP 400 Bad Request.

    Could it be that I need to use different URL's?

    Thanks!

    Maarten

  • Maarten,

    I just tried using the form from the video and everything is still working.  I do, however, get failures when I try to access the URLs from your comments.  The services that I'm using are not yet in full production so it's expected that they might fail if you don't provide any parameters.

    Did you hook up your fields in the form to the URL using the expressions builder?  Can you try outputting the new REST URL to a text box and trying that in the browser to see if that works?  Any additional information that you can provide would be helpful.

    Thanks!

    Phil

  • Hi Phil,

    Thanks for your reply!

    I didn't change anything in my form, but when I opened it just now, to do some more checking, it worked like a charm!

    Thanks again :-)

    Maarten

  • Looks good. But is InfoPath now requiring the user to know if they are connecting to a soap or rest web service? How will a power user know what to select?

  • We are expecting form designers to know which type of Web service they are using.  For most of the web services I've seen, the technology they use is documented along with instructions on how to use them.

    SOAP and REST web services are very different in the way that you interact with them. In a nutshell, you pass parameters to REST Web services in InfoPath by changing parameters in the URL while for SOAP Web services, the URL doesn't change and parameters are set using query fields in the form. Please let me know if you have any other questions.

    Phil

  • Hi Phil,

    I used the picture control but it doesn´t work fine.

    Any idea?

  • Can you provide more details on the problem you're having.

    thanks.

  • Hi Phil,

    Thank you for such a great post.

    Can you please upload the XSN file you have worked on the above feature.

    Not sure, why Picture control does not work out for me.

    Ref : When the Rule executes, it produces following error Message over the picture control,

    "Only base-64 encoded boinary data allowed".

    Plese help !

  • I have a feeling you are using an embedded picture control instead of a linked picture control.  Can you try re-adding the picture control and make sure that the "As a link" option is selected in the "Insert Picture Control" dialog.  Let me know if that doesn't work.

  • Hi Phil,

    Thanks for the response.

    Unfortunately, embedded picture control instead of a linked picture control did not work either.

    Can you please upload the xsn file instead.

    Kind Regards,

    Srikrushna Patro.

  • Hi Srikrushna,

    Unfortunately, the .xsn won't be much help because it can only be published to the list from which it was created.

    From your last comment, it looks like you're still using the embedded picture control which includes the picture data in the form as 64-bit encoded binary.  Can you try re-adding the picture control checking the "As a link" option?  Make sure the control is also bound to a new field.  The linked and embedded picture controls have different field types.  You shouldn't have to worry about any of this if you insert the linked control.

    Phil

  • Hi Phil,

    I'm trying to replicate what youre doing but I keep getting the following message when I try add the REST Web Service Data Connection:

    "Infopath cannot open the XML document...

    Not enough storage is available to process this command."

    Any ideas?

  • Hi Phil,

    Please ignore my previous comment, it was a connectivity issu on my side. I was able to continue. I've followed your instructions through and successfully published my form, however when I click my geolocate button and it queries the data connection, it is giving the following error:

    "A query to retrieve form data cannot be completed because this action would violate cross-domain restrictions. "

    Any suggestions? Thank-you.

    Rogan

  • Rogan,

    For this to work, InfoPath Forms Services must be configured to allow cross-domain data connections.  Ask your SharePoint Administrator to check the "Allow cross-domain data access for user form templates that use connection settings in a data connection file" checkbox on the "Configure InfoPath Forms Services" page in central admin.  That should solve the problem.

    Phil

  • Thanks Phil,

    I sorted that out now.

    Another problem though, I'm getting an error "Unable to connect to the remote server" Log ID:5566.

    The environment here gets interent access through a proxy, so I assume it has something todo with that but I don't know how to get around this or tell infopath about this proxy etc. Make sense? Any ideas?

    Rogan

Page 1 of 2 (25 items) 12