Lab 14: Custom Task Panes in InfoPath 2003

  • Article

 

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

  1. Start InfoPath.

  2. In the Fill Out a Form dialog box, click Design a Form.

  3. In the Design a Form task pane, click On My Computer.

  4. 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.

  5. 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

  1. On the Tools menu, click Form Options.
  2. In the Form Options dialog box, click Advanced.
  3. Select the Enable custom task pane check box, and then click Resource Files.
  4. In the Resource Files dialog box, click Add.
  5. 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.
  6. In the Task pane location list on the Advanced tab, click ContosoSalesReportHelp.html.
  7. 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

  1. 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;
   }
}

  2. 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;
   }
}

  3. 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;

  4. 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

  1. In InfoPath, on the Standard toolbar, click Preview Form.

    The form opens in a new window and the custom task pane you created appears.

  2. 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.