14.3. Providing Context-Sensitive Help

Besides displaying view choices in a custom task pane as shown back in Chapter 11, "Working with Code in Your InfoPath Form," you can also use the custom task pane to display context-sensitive help. Context-sensitive help is information displayed based on where the user is on a form. For example, when a customer is in a field such as Customer ID, you can display a description for the field or give instructions on how to enter certain types of data. In Figure 14-13, you can see an example of the form taken from Chapter 6, "Working with Controls in General," modified to use context-sensitive help.

Just as when you're using the custom task pane for displaying views, you specify the custom task pane properties using the Advanced tab of the Form Options dialog box. In addition to this, you will supply an HTML page providing the information in the task pane. Finally, you will add code to the ContextChange event so that as you are moving to each part of the form, the task pane will change the description text to match.

Figure 14.13. Figure 14-13

The actual steps are:

  1. Create the Form: In the case of this example, the form from Chapter 6 is used.

  2. Create the HTML Web page: In creating the HTML Web page, you will use standard HTML statements (tags) in a format that can be used by the code written for the ContextChange event. You can see an example of the code in Figure 14-14.

    Figure 14.14. Figure 14-14

    The main object to notice is the <div> object. This object is used to display HTML in a specific section. In this case the code will look up the ID of the object and display the HTML in task pane. The other tags specify different formatting commands.

    Notice also the first two DIVs, dfs:myfields and d:tblCustomers. The first node, dfs:myfields, displays its message when you are on the blank part of the form and the heading. d:tblCustomers is displayed when you are on the tblCustomers table part of the form, when the individual fields aren't being displayed.

    TagDescription
    <p>Specifies the start of a new paragraph.
    <b>Sets text between the beginning and end tags to bold.
    <font>Set different properties of the font of text between the beginning and end tags.

  3. Create the Code in the ContextChange Event: Using the Microsoft Script Editor, you will create the following code on the ContextChange event:

    var strHelp = null;
function XDocument::OnContextChange(eventObj)
{
if (eventObj.Type == "ContextNode")
{
         var objTP = XDocument.View.Window.TaskPanes.Item(0);
         var objDoc = objTP.HTMLDocument.all;

         if (strHelp)
                 objDoc.item(strHelp).style.display="none";

         objDoc.item(eventObj.Context.nodeName).style.display="";

         strHelp=eventObj.Context.nodeName;

         return;

  }

}

After testing for the context node, a reference is created for the task pane in the line of code that reads:

var objTP = XDocument.View.Window.TaskPanes.Item(0);

Next, a string variable called strHelp is queried to see if it was set to a value; if not, then it is cleared.

if (strHelp)
       objDoc.item(strHelp).style.display="none";

Finally, set the task pane to the current node of data, and store the node name for later use.

objDoc.item(eventObj.Context.nodeName).style.display="";

strHelp=eventObj.Context.nodeName;

That's it. Now try it out yourself.

14.3.1.

14.3.1.1. Try It Out: Creating a Context-Sensitive Help Task Pane

For the purposes of this Try It Out the Chapter 6 form has been copied into the Chapter 14 folder for this book on the WROX Web site (ContextSensitiveHelp.xsn) and ContextSensitiveHelp.htm with the commands in it.

  1. Open InfoPath.

  2. Create the InfoPath form as desired. You can see the form used for this example in Figure 14-15; you will want to make note of the field names.

    Figure 14.15. Figure 14-15

  3. Using NotePad or your favorite editor, create the HTML Web page containing the help text. If using the form with the layout displayed in Figure 14-15, the text would look as follows:

    <html>
  <body>
     <font face="arial" color="black">
   <div id="dfs:myFields" style="display:none">
      <p><font color="Red">Context Help</font></p>
        <br />

    Place the cursor in the Customer ID, Company Name or Contact Name Fields.
     </div>
     <div id="d:tblCustomers" style="display:none">
        <p><font color="Red">Customer Table</font></p>
        <br />
        This is where all the main customer information is presented."
     </div>
     <div id="CustomerID" style="display:none">
        <p><font color="Red">Customer ID</font></p>
        <br />
        The Customer Identification Number of the customer.
     </div>
     <div id="CompanyName" style="display:none">
        <font color="Red"><p>Company Name</p></font>
        <br />
        Company Name of the Customer.
     </div>
     <div id="ContactName" style="display:none">
        <font color="Red"><p>Contact Name</p></font>
        <br />
        Name of the Contact.
     </div>
     <div id="ContactTitle" style="display:none">
        <font color="Red"><p>Contact Title</p></font>
        <br />
        Contact's Title.
     </div>
     <div id="Phone" style="display:none">
        <font color="Red"><p>Phone</p></font>
        <br />
        Contact's Phone.
      </div>
       ...
  </body>
<html>

    Note that you can fill out the HTML Web page with as many of the fields as you want to cover.

  4. Save and close the HTML Web page, noting where it is saved.

  5. Choose ToolsForm Options.

  6. Click the Advanced tab.

  7. Put a checkmark in the check box labeled Enable custom task pane.

  8. Click on the Resource Files... button. Using this form, you will locate and specify the HTML Web page you created in Steps 3 and 4.

  9. Click Add....

  10. Locate the HTML Web page you created.

  11. Click OK. You can see the HTML Web page specified in the Resource Files dialog box in Figure 14-16.

    Figure 14.16. Figure 14-16

  12. Click OK. You will be taken back to the Form Options dialog box on the Advanced page.

  13. Type the name you want to use in the Task pane name field.

  14. Pick the name of the HTML Web page you specified in Task pane location. You are now done filling out the Form Option for the task pane information, as shown in Figure 14-17.

    Figure 14.17. Figure 14-17

  15. Click OK.

  16. Click Preview Form. The form opens. If you click various parts of the form, help will be displayed, as shown in Figure 14-18. The cursor is placed on the table called tblCustomers.

    Figure 14.18. Figure 14-18

Make sure you test all areas of the form. If you don't have a node entered into the HTML Web page, an error will occur.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.147.103.15