Open Microsoft Office InfoPath and create a New Blank Form. Use the controls, field names, and data
types listed in Table 1 to construct the form and modify it to resemble Figure
1.
Table 1 - Settings for the controls on the InfoPath
form
Control
|
Field Name
|
Data Type
|
Drop-Down List Box
|
listItems
|
Text (string)
|
Text Box
|
newItem
|
Text (string)
|
Button
|
btnDeleteItem
|
-
|
Button
|
btnAddItem
|
-
|
Figure 1 - InfoPath form in design mode
Create the Database Table
Use the information displayed in Table 2 to create a table
called Properties in Microsoft SQL Server.
Table 2 - Table column settings for Properties
table in Microsoft SQL Server
Column Name
|
Data Type
|
Allow Nulls
|
Value
|
int (identity, primary key)
|
No
|
Name
|
varchar(50)
|
No
|
Add a Data Connection for the Secondary Data Source
Create and bind the drop-down list box to the secondary data
source.
1.
Double-click on the drop-down list box to open its Properties
dialog box.
2.
Select the Look up values in a data connection to a
database, Web service, file, or SharePoint library or list radio button
under List box entries.
3.
Click on the Add… button to open the Data Connection Wizard.
4.
Select the Database (Microsoft SQL Server or
Microsoft Office Access only) radio button and click on Next >.
5.
Click on the Select Database… button.
6.
Click on the New Source… button and follow the
instructions to set up a connection to the database table you previously
created in Microsoft SQL Server and select this new source to be used as a
secondary data source in the InfoPath form.
7.
Click on the Next > button when you get back
in the first Data Connection Wizard.
8.
Click on the Finish button to close the Data Connection Wizard.
9.
Back in the Properties dialog box, click on the Select XPath button behind the Entries
field.
10. Select
the Properties node in the Select a
Field or Group dialog box and click on OK.
11. Back
in the Properties dialog box, click on the Select XPath button behind the Value
field.
12. Select
the Value node in the Select a Field
or Group dialog box and click on OK.
13. Back
in the Properties dialog box, click on the Select XPath button behind the Display
name field.
14. Select
the Name node in the Select a Field
or Group dialog box and click on OK.
15. Click
on OK to close the Properties
dialog box.
Add Event Handlers and AJAX Code
Make sure the default programming language of the form is
set to JScript by selecting the Tools > Options…
menu item, clicking on the Design tab on the Options dialog box, and setting the Default
programming language to JScript.
Open the Microsoft Script Editor by selecting the Tools > Programming > Microsoft Script Editor menu item.
Append the code displayed in Listing 1 to the code that InfoPath has added for
you by default.
Listing 1 - AJAX functions
var req = null;
var READY_STATE_COMPLETE = 4;
function sendRequest(url, params, HttpMethod)
{
if (!HttpMethod)
{
HttpMethod = "GET";
}
req = new ActiveXObject("Microsoft.XMLHTTP");
if (req)
{
req.onreadystatechange = onReadyState;
req.open(HttpMethod, url, true);
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
req.send(params);
}
}
function onReadyState()
{
var ready = req.readyState;
var data = null;
if (ready == READY_STATE_COMPLETE)
{
data = req.responseText;
XDocument.DataObjects["Properties"].Query();
XDocument.DOM.selectSingleNode("//my:listItems").text =
XDocument.DOM.selectSingleNode("//my:newItem").text;
XDocument.DOM.selectSingleNode("//my:newItem").text = "";
}
}
Listing 1 displays two core functions needed to make AJAX calls to the web server. The first function, sendRequest(),
creates an XMLHTTPRequest object to be able to prepare and send a request to
the web server, while the second function, onReadyState(),
is an asynchronous event handler that continuously polls for responses coming
back from the web server. When a response comes back from the web server, you can
retrieve the XML data sent back from the web server using
and refresh the list of items in the drop-down list box by using
the Query() method of the secondary data source as in
XDocument.DataObjects["Properties"].Query();.
Finally, you can set the selected value of the listItems drop-down list box to the value of the newItem text box
XDocument.DOM.selectSingleNode("//my:listItems").text =
XDocument.DOM.selectSingleNode("//my:newItem").text;
and then clear the newItem text
box with
XDocument.DOM.selectSingleNode("//my:newItem").text = "";.
Switch back to
Microsoft Office InfoPath and double-click on the Add Item
button to open its Properties dialog box. Click on the
Edit Form Code… button to switch back to the Microsoft
Script Editor and add an OnClick event handler for this
button. Add the code displayed in Listing 2 in the OnClick
event handler you just added.
Listing 2 - Code in the OnClick event handler for
the Add Item button
var value = XDocument.DOM.selectSingleNode("//my:newItem").text;
sendRequest("http://localhost/UpdateDSwithAjax/Default.aspx","q="+value+"&a=a","POST");
The code in
Listing 2 passes two parameters (q and a) to an ASP.NET page called Default.aspx
that is located on a web server at http://localhost/UpdateDSwithAjax/.
"q" is set to the value of the text in the newItem text box, while "a"
is set to an "a" to indicate that the item should be added.
Switch back to Microsoft Office InfoPath and double-click on
the Delete Item button to open its Properties
dialog box. Click on the Edit Form Code… button to
switch back to the Microsoft Script Editor and add an OnClick
event handler for this button. Add the code displayed in Listing 3 in the OnClick event handler you just added.
Listing 3 - Code in the OnClick event handler for
the Delete Item button
var value = XDocument.DOM.selectSingleNode("//my:listItems").text;
sendRequest("http://localhost/UpdateDSwithAjax/Default.aspx","q="+value+"&a=d","POST");
The code in Listing 3 passes two parameters (q and a) to the ASP.NET page. "q" is set to the value of the selected item in the listItems drop-down list box, while "a"
is set to a "d" to indicate that the item should be deleted.