To make the active field more visible to the form user, you can use conditional formatting, the OnContextChange event, and named node properties. This technique will not work for the following editable controls: Radio Button, Check Box, Bulleted List, Numbered List, Plain List, and Button. This technique can be used with Sections and other container controls.
In this task we will create a simple form with various types of controls. We will add functionality to highlight the active control, or the control with the active focus, using yellow shading. Because of InfoPath security restrictions, there is no way to directly modify a control in the view using code; therefore, conditional formatting must be used to accomplish this task. Let's start by designing a new blank form.
Design the view:
- Open the Controls task pane.
- Click Text Box, Drop-Down List Box, Date Picker, and then press Enter.
- Click Repeating Table, and then click OK to accept the default number of columns.
Add the OnContextChange event handler code:
- Choose Programming | On Context Change Event from the Tools menu.
- In the Microsoft Script Editor, replace any generated code in the event handler with the following code:
if (eventObj.Type != "ContextNode" || eventObj.IsUndoRedo)
return;
try
{
XDocument.SetNamedNodeProperty(oActiveContext, "active", "0");
}
catch(e){} // Ignore exceptions. Field might have been deleted. oActiveContext = eventObj.Context;
XDocument.SetNamedNodeProperty(oActiveContext, "active", "1"); |
- Add the following global variable outside of the OnContextChange function:
var oActiveContext = null; |
- Save the code, and then exit the Microsoft Script Editor.
We make use of the SetNamedNodeProperty and GetNamedNodeProperty methods to keep track of which field is active. These methods allow us to store a custom value on a custom property and associate it with any node in our main DOM. Our property is named active and we store the value of 1 if the field has focus, and return the value to 0 when the focus changes.
Add conditional formatting to each control:
- Double-click the Text Box in the view.
- On the Display tab of the Text Box Properties dialog box, click Conditional Formatting, and then click Add.
- In the Conditional Format dialog box, select The Expression from the first drop-down list, and then type the following expression:
xdXDocument:GetNamedNodeProperty(my:field1, "active", "0") = "1" |
- Choose the light yellow shading, as shown in Figure 1.
Figure 1. Choose the light yellow shading.
- Click OK four times to close all open dialog boxes.
- Add similar conditional formatting to each of the other controls in the view, replacing my:field1 with the name of the field you are modifying (i.e. my:field2, my:field3, etc).
It is interesting to note that you use the element name in the conditional formatting instead of the context node (i.e. ".", which is the abbreviated syntax for self::node()). This is different from most conditional formatting where you can use the context node to refer to the current field. If we were to use the condition xdXDocument:GetNamedNodeProperty(., "active", "0") = "1", the context node would, in this method, refer to the container rather than the field.
Try it:
Preview the form and tab between the controls. As each control receives focus, the shading changes to light yellow, and as the control loses focus, the shading is restored to its default.
You might find some strange selection behavior for the List Box and Drop-Down List Box controls. We are not sure, at this time how to correct these irregularities.
©2005 Greg Collins. All rights reserved. Licensed to Autonomy Systems, LLC for display on InfoPathDev.com.