Building an RSS Feed Reader with Microsoft Office InfoPath
 
Published: 19 May 2006
Unedited - Community Contributed
Abstract
While Microsoft Office InfoPath 2003 offers out of the box connections to several types of data sources such as XML files, databases, SharePoint lists and web services, we can also use InfoPath to connect to web sites to retrieve or submit data. In this article we will create an RSS feed reader sample form in InfoPath to retrieve data from the Internet.
by S.Y.M. Wong-A-Ton
Feedback
Average Rating: This article has not yet been rated.
Views (Total / Last 10 Days): 75895/ 71

Introduction

Microsoft Office InfoPath 2003 Service Pack 1 offers connectivity to several types of data sources including XML files, Access databases, SQL Server databases, SharePoint lists and web services.  Additional connectivity can be achieved by using the XMLHTTPRequest object to connect InfoPath to the web for data retrieval and submission.

In this article we are going to create a simple RSS feed reader that demonstrates the use of the XMLHTTPRequest object to retrieve XML data from the Internet for display in InfoPath.

Basic Concept

The XMLHTTPRequest object allows for asynchronous data retrieval from web servers.  The data format is typically XML, but it works well with any text-based data.   The XMLHTTPRequest object is also a key component of AJAX (Asynchronous JavaScript and XML) applications.  We will not get into the details of AJAX, but for a quick overview I recommend reading this article.

RSS feeds are documents that adhere to a pre-defined XML structure.  Since InfoPath is based entirely on XML technology, we can use the XMLHTTPRequest object to retrieve XML documents like RSS feeds and apply an XSL transformation to transform the XML data into a format that can be loaded and displayed in an InfoPath form.

Creating an RSS Feed Reader in InfoPath

Designing the Form

Open Microsoft Office InfoPath and create a New Blank Form.  Use the field names and data types shown in Figure 1 to construct the main data source of the form.

Figure 1 - Main data source of the InfoPath form

Drag the fields onto the form and convert them into the controls listed in Table 1.

Table 1 - Fields or groups and their corresponding InfoPath controls

Field or Group

Control

rssURL

Drop-Down List Box

item

Repeating Section

title + link

Hyperlink

description

Text Box

Add an additional Button Control to the form and modify the form and controls so that they resemble Figure 2.

Figure 2 - InfoPath form in design mode

Visit a couple of your favorite web sites that also publish RSS feeds, copy the URLs to these RSS feeds and enter them as static entries into the Drop-Down List Box.  Here are two of my own favorite URLs:

http://aspalliance.com/rss.aspx

http://msdn.microsoft.com/office/rss.xml

Since we will be using JScript as the programming language for our RSS feed reader sample form, we need to make sure that our InfoPath form is set to use JScript:. Go to the Tools > Options… menu item to open the Options dialog box, click on the Design tab and select JScript from the Default programming language drop-down list box.

Creating an XSLT to Transform the RSS Feed into the Form's XML Structure

Create an XSL file with the content as shown in Listing 1.  This XSLT takes all of the item nodes in an RSS feed along with corresponding title, description and link child nodes and transforms them into my:item nodes as defined in our InfoPath form.  Then it places them under a my:rssFeed node.  The latter will be used to replace the original my:rssFeed node of the InfoPath form.

The my XML namespace alias in the XSL file corresponds to the same namespace used by the InfoPath form.  If you ignore this fact, you will not be able to replace the my:rssFeed node of the InfoPath form with the newly generated my:rssFeed node from the XSLT.  So you must replace the my XML namespace with the correct namespace used by your InfoPath form before proceeding.  Go to the Tools > Programming > Microsoft Script Editor menu item to open the form's code editor. The my XML namespace for your InfoPath form will be defined at the top of the code editor as a SelectionNamespaces property of the XDocument.DOM.  Copy this value over to the XSL file.

Listing 1 - XSLT used to transform the RSS data

<?xml version="1.0"encoding="UTF-8"?>
<xsl:stylesheet
 xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
 xmlns:my="http://schemas.microsoft.com/office/infopath/2003/myXSD/2006-04-03T12:51:43"
  version="1.0">
<xsl:template match="/rss">   
  <my:rssFeed>
   <xsl:apply-templatesselect="channel/item"/>
  </my:rssFeed>
</xsl:template>
<xsl:template match="item">
  <my:item>
   <my:title><xsl:value-ofselect="title"/></my:title>
   <my:description><xsl:value-ofselect="description"/></my:description>
   <my:link><xsl:value-ofselect="link"/></my:link>
  </my:item>
</xsl:template>
</xsl:stylesheet>

After creating the XSL file, you must add it to the InfoPath form as a secondary data source.  Perform the following steps to add and connect the XSL file to the InfoPath form.

1.      Go to the Tools > Data Connections… menu item.

2.      Click on the Add… button on the Data Connections dialog box.

3.      Select the Receive Data option on the first screen of the Data Connection Wizard and then click on the Next > button.

4.      Select the XML document option on the second screen of the Data Connection Wizard and then click on the Next > button.

5.      Click on the Resource Files… button to open the Resource Files dialog box.

6.      Click on the Add… button to browse to and add the XSL file as a resource file to the form.

7.      Click on the OK button to close the Resource Files dialog box.

8.      Click on the Next > button.

9.      Name the data connection "Stylesheet" on the last screen of the Data Connection Wizard.

10.  Click on the Finish button to close the Data Connection Wizard.

11.  Click on the Close button to close the Data Connections dialog box.

Adding Code to the Form

The code for instantiating and using the XMLHTTPRequest object is shown in Listing 2.  Switch to the code editor and append the code from Listing 2 to the existing code.

First we declare a global req variable that is used to save a reference to the instantiated XMLHTTPRequest object.  Then we define two functions to be able to use the XMLHTTPRequest object.

The SendRequest() function instantiates the XMLHTTPRequest object, sets the onreadystatechange property to a callback handler function called OnReadyStateChange(), initializes the request using a GET HTTP method and URL and sends the request to the web server along with any parameters passed to the function.

The OnReadyStateChange() function is a callback handler function that is called whenever the readyState property of the request changes.  As soon as the readyState property has a value equal to 4, which corresponds to the state COMPLETED, we can retrieve the value of the responseText property of the request.  This is actually the RSS data that is being returned by the web server.  Then we pass it to a function called FillForm() (see Listing 3).

Listing 2 - Functions to instantiate and use the XMLHTTPRequest object

var req = null;
function SendRequest(url, params)
{
  try
  {
    req = newActiveXObject("Microsoft.XMLHTTP");
    if (req)
    {
      req.onreadystatechange = OnReadyStateChange;
      req.open("GET", url, true);
      req.send(params);
    }
  }
  catch (e)
  {
    XDocument.UI.Alert("Cannot sendrequest. " + e.message);
  }
}
 
function OnReadyStateChange()
{
  if (req.readyState == 4)
  {
    FillForm(req.responseText);
  }
}

Append the code for the FillForm() function shown in Listing 3 to the existing code in the code editor.

The FillForm() function:

1.      Loads the RSS data that was passed to it into an XML document object.

2.      Loads the XSL to perform the transformation into an XML document object.

3.      Transforms the RSS data into the XML structure of the form and then loads the results into an XML document object that will become the new my:rssFeed node of the form.

4.      Retrieves the original my:rssFeed node of the form and replaces it with the new my:rssFeed node that was generated through XSLT.

Listing 3 - Function to transform and load data into the InfoPath form

function FillForm(data)
{
  try
  {
    var rssXmlDoc = XDocument.CreateDOM();
    rssXmlDoc.loadXML(data);
 
    var xsltXmlDoc =XDocument.GetDOM("Stylesheet");
 
    var transformedRSSXml =rssXmlDoc.transformNode(xsltXmlDoc);
    var transformedRSSXmlDoc =XDocument.CreateDOM();
   transformedRSSXmlDoc.loadXML(transformedRSSXml);
 
    var rssFeedNode = XDocument.DOM.selectSingleNode("/my:myFields/my:rssFeed");
   rssFeedNode.parentNode.replaceChild(transformedRSSXmlDoc.documentElement,
      rssFeedNode);
  }
  catch (e)
  {
    XDocument.UI.Alert("Cannot read RSS." + e.message);
  }
}

Switch back to Microsoft Office InfoPath and double-click on the Get RSS button to open its properties dialog box.  Change the ID of the button to GetRSS and then click on the Edit Form Code… button to add an OnClick event handler for the button to the InfoPath form's code.  Add the code as shown within the function in Listing 4 to the OnClick event handler for the Get RSS button.  This code initiates sending a request to retrieve an RSS feed.

Listing 4 - Function to handle the OnClick event of the Get RSS button

function GetRSS: : OnClick(eventObj)
{
  var rssURLField =XDocument.DOM.selectSingleNode("//my:rssURL");
  if (rssURLField)
  {
    var rssUrl = rssURLField.text;
    if (rssUrl != "")
    {
      SendRequest(rssUrl, null);
    }
    else
    {
      XDocument.UI.Alert("Empty URL!");
    }
  }
}

Previewing the Form

Figure 3 shows the completed InfoPath form in preview mode after clicking on the Get RSS button, retrieving the RSS data from the given URL and transforming the data for display in the InfoPath form.

Figure 3 - The completed InfoPath form in preview mode

 

Conclusion

In this article we used the XMLHTTPRequest object to create a simple RSS feed reader in InfoPath and demonstrate how to retrieve XML data from the Internet for use in InfoPath.  The advantage of this technique is that it is not limited to a specific web technology, but can be applied to any that can return XML data including classic web technologies such as Active Server Pages (ASP) and Common Gateway Interface (CGI) applications.  This effectively connects InfoPath to the web through XMLHTTP.



User Comments

No comments posted yet.

Product Spotlight
Product Spotlight 





Community Advice: ASP | SQL | XML | Regular Expressions | Windows


©Copyright 1998-2020 ASPAlliance.com  |  Page Processed at 2020-02-18 8:18:32 PM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search