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

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