Switching between day sections in InfoPath using xdExtensions and JScript

Use JScript to determine the day of the week (Monday through Sunday) based on a specified date chosen from a Date Picker, and use the result to conditionally show/hide sections on an InfoPath form.

Problem

You have a TODO list in InfoPath for each working day of the week (similar to a daily agenda) and would like to be able to display the list for a day of the week (Monday, Tuesday, Wednesday, Thursday, or Friday) which is determined by a chosen date.

Solution

Use an xdExtension function written in JScript to determine which day of the week pertains to the selected date and use Conditional Formatting in InfoPath to show/hide the section that belongs to a particular day of the week.

Discussion

You can accomplish this functionality as follows:

1. Create a New Blank Form in InfoPath.
2. Add a Table with Title to the InfoPath form.
3. Add a Date Picker control to the table and rename it to date.
4. Add 5 Section controls below the Date Picker control.

Your Main data source should now resemble the following figure:

Figure 1. Main data source of the InfoPath form.
5. Type the text Monday, Tuesday, Wednesday, Thursday, and Friday on each subsequent Section control.
6. Modify the table and controls to resemble the following figure:
   
   Figure 2. The InfoPath form in design mode.
7. Go to Tools > Programming > Microsoft Script Editor to open Microsoft Script Editor and add the following code at the end of the script.js file:
   function isDay(dayNo)
{
var retVal = false;

var isoDate = XDocument.DOM.selectSingleNode("//my:date").text;
var year = isoDate.substr(0,4);
var month = isoDate.substr(5,2);
var day = isoDate.substr(8,2);
var date = new Date(parseFloat(year), parseFloat(month) - 1, parseFloat(day));

if (dayNo == date.getDay())
{
retVal = true;
}

return retVal;
}

8. Double-click on the Section control for Monday to open its properties dialog box.
9. Click on the Display tab and then on the Conditional Formatting... button.
10. Click on the Add... button on the Conditional Formatting dialog box.
11. Select The expression from the first drop-down list box and then type in the following expression:
    xdExtension:isDay(1) = false()
12. Under Then apply this formatting: check the Hide this control checkbox.
13. Click on OK when closing all open dialog boxes.
14. Repeat steps 8 through 13 for all the other Section controls, using the following expressions:
    xdExtension:isDay(2) = false()
    for the Tuesday section,
    xdExtension:isDay(3) = false()
    for the Wednesday section,
    xdExtension:isDay(4) = false()
    for the Thursday section, and
    xdExtension:isDay(5) = false()
    for the Friday section.
15. Double-click on the Date Picker control to open its properties dialog box.
16. Click on the Insert Formula button behind the Default Value text box.
17. Click on the Insert Function... button on the Insert Formula dialog box and select today from the list of functions.
18. Click on OK when closing all open dialog boxes.

You should now have fully functional day of the week section selection based on a specified date.

Related InfoPath Articles:

• Calculating time differences in InfoPath using custom JScript code
• Date and time basics in Microsoft Office InfoPath