Lab 14: Custom Task Panes in InfoPath 2003
Microsoft Corporation
April 2004
Applies to:
Microsoft® Office InfoPath™ 2003
Summary: Learn how to add a custom task pane to a form and how to create context-sensitive Help by adding script to the OnContextChange event. (5 printed pages)
Download the odc_INF03_Labs.exe sample file.
Contents
Prerequisites
Scenario
Lab Objective
Setup
Exercises
Conclusion
Prerequisites
- An understanding of Hypertext Markup Language (HTML)
- An understanding of Microsoft® JScript®
- An understanding of the Microsoft Office InfoPath™ 2003 object model
Scenario
To reduce training costs, Contoso Corporation wants to make it easier for its sales representatives to fill out their sales report forms. The information technology (IT) department must add a custom task pane to InfoPath to provide Help content to the sales representatives.
Lab Objective
In this lab, you learn how to do the following:
- Create a custom task pane and add it to a form
- Create a form that responds to the OnContextChange event
- Update a task pane based on the form's state
Setup
To complete this lab, install Microsoft Script Editor during the InfoPath setup.
Exercises
Exercise 1: Enable a Custom Task Pane
The Contoso user assistance editor has provided the IT department with an HTML file that contains the Help content for the custom task pane. An InfoPath custom task pane is an HTML file that is displayed in a task pane when the form is opened. In this exercise, learn how to display the contents of an HTML file in a custom task pane.
Before you can create the custom task pane, open the form in design mode.
To open an existing form
Start InfoPath.
In the Fill Out a Form dialog box, click Design a Form.
In the Design a Form task pane, click On My Computer.
In the Open in Design Mode dialog box, locate the folder where you installed the training files, and then double-click the Lab 14 folder.
Select Lab14Template.xsn, and then click Open.
The Contoso sales report form opens in design mode.
Now that you have opened your form in design mode, you are ready to create a custom task pane.
To enable a custom task pane
- On the Tools menu, click Form Options.
- In the Form Options dialog box, click Advanced.
- Select the Enable custom task pane check box, and then click Resource Files.
- In the Resource Files dialog box, click Add.
- In the File name box in the Add File dialog box, type the location where ContosoSalesReportHelp.html is located (in the lab folder), and then click OK twice.
- In the Task pane location list on the Advanced tab, click ContosoSalesReportHelp.html.
- In the Task pane name box, type Contoso Sales Report Help.
Exercise 2: Create Context-Sensitive Help
The IT department has created the custom task pane. We need to add code that displays Help strings based on what the user has selected in the form when they are filling it out. In this exercise, you learn how to add the On Context Change event to the form, and add JScript code that displays Help strings by manipulating the task pane HTML file that you attached in the previous exercise.
Add the OnContextChange event to the form
With the form still open, on the Tools menu, point to Programming, and then click On Context Change Event.
The Microsoft Script Editor (MSE) starts, and the OnContextChange event is automatically inserted in the appropriate location.
Now that you have added the OnContextChange event, you need to add the appropriate script so that Help strings are displayed in the custom task pane when needed.
Add script for displaying Help strings
Copy the following code:
function XDocument::OnContextChange(eventObj) { if (eventObj.Type == "ContextNode") { // Retrieve task pane object var oTaskPane = XDocument.View.Window.TaskPanes.Item(0); // Retrieve html object for task pane var oHTMLDoc = oTaskPane.HTMLDocument.all; // Clear previous help topic from task pane if (helpString) oHTMLDoc.item(helpString).style.display="none"; // Display DIV statement having same ID as the context node name oHTMLDoc.item(eventObj.Context.nodeName).style.display=""; // Keep record of string displayed, so can later be cleared helpString=eventObj.Context.nodeName; return; } }
In the Microsoft Script Editor, select the following code (you are replacing it with the copied code), and paste the code from Step 1.
function XDocument::OnContextChange(eventObj) { if (eventObj.Type == "ContextNode") { // Selection or context in the form has changed. Write your code here to respond to the changes. return; } }
Add the following global variable definition before the OnContextChange event:
// // Global variable to keep track of last help topic displayed, // so that it can be cleared on context change and the // new topic will display alone. // var helpString = null;
To save your changes in MSE, click Save on the Standard toolbar.
Exercise 3: Preview the Form
If you want to make sure that the changes work correctly and that they appear the way that you expect, preview the form.
To preview the form
In InfoPath, on the Standard toolbar, click Preview Form.
The form opens in a new window and the custom task pane you created appears.
In the preview window, click in the various fields (such as the Sales Representative and Customer Name fields) to check that the text in the task pane displays correctly.
Conclusion
After completing this lab, you should know how to add a custom task pane to a form. You should also be able to create context-sensitive Help by adding script to the OnContextChange event.