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
Field or Group
Drop-Down List Box
title + link
Add an additional Button Control to
the form and modify the form and controls so that they resemble Figure 2.
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:
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
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
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.
Go to the Tools > Data Connections… menu item.
Click on the Add… button on the Data Connections dialog box.
Select the Receive Data option on the first
screen of the Data Connection Wizard and then click
on the Next >
Select the XML document option on the second
screen of the Data Connection Wizard and then click
on the Next > button.
Click on the Resource Files… button to open the Resource Files dialog box.
Click on the Add… button to browse to and add
the XSL file as a resource file to the form.
Click on the OK button to close the Resource Files dialog box.
Click on the Next > button.
Name the data connection "Stylesheet"
on the last screen of the Data Connection Wizard.
on the Finish button to close the Data
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 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 2 - Functions to instantiate and use the XMLHTTPRequest
var req = null;
function SendRequest(url, params)
req = newActiveXObject("Microsoft.XMLHTTP");
req.onreadystatechange = OnReadyStateChange;
req.open("GET", url, true);
XDocument.UI.Alert("Cannot sendrequest. " + e.message);
if (req.readyState == 4)
Append the code for the FillForm()
function shown in Listing 3 to the existing code in the code editor.
The FillForm() function:
Loads the RSS data that was passed to it into an XML document object.
Loads the XSL to perform the transformation into an XML document object.
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.
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
var rssXmlDoc = XDocument.CreateDOM();
var xsltXmlDoc =XDocument.GetDOM("Stylesheet");
var transformedRSSXml =rssXmlDoc.transformNode(xsltXmlDoc);
var transformedRSSXmlDoc =XDocument.CreateDOM();
var rssFeedNode = XDocument.DOM.selectSingleNode("/my:myFields/my:rssFeed");
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
function GetRSS: : OnClick(eventObj)
var rssURLField =XDocument.DOM.selectSingleNode("//my:rssURL");
var rssUrl = rssURLField.text;
if (rssUrl != "")
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
Figure 3 - The completed InfoPath form in preview