January 2006 - Posts - Matt Faus
in

InfoPath Dev

Matt Faus

January 2006 - Posts

  • Create a Tabbed Content Pane

    When filling out a form with several different sections it is very convenient to use tabs to separate these sections. Tabs quickly and easily let the user know what sections are available and have become a vital part of graphical user interfaces. Using advanced design techniques, InfoPath can be used to create a fantastic and appealing tabbed interface.

    In this task we will use a layout table, buttons with code, and three views to create a tabbed content pane. Let's start by creating a new blank form.

    Add the layout table and buttons:

    1. Open the Layout task pane and choose Custom Table to create a table with 3 columns and 2 rows.
    2. Highlight the entire second row, right-click and choose Merge Cells to create one big cell.
    3. Change the size of the one big cell by clicking and dragging its bottom border down the page.
    4. Click inside the first column of the first row to set the insertion point.
    5. Open the Controls task pane and select Button.
    6. Repeat steps 4 and 5 for the next two columns so that there is a button in each of the columns of the first row.

    Format the buttons to look like tabs:

    1. Double-click the button in the first column, change the Label to Tab 1, change the ID to btnTab1, and then click OK.
    2. Right-click the Tab 1 button and choose Borders and Shading.
    3. Click None under the Presets section of the Borders tab to remove the borders of the button.
    4. Switch to the Shading tab of the Borders and Shading dialog box, select No Color, and then click OK.
    5. Resize the button so that it will almost fill the entire cell.
    6. Right-click inside the table cell that contains the button and choose Borders and Shading. If you have a hard time doing this try clicking on the button and then pressing the right arrow key to set the insertion point inside the table cell. After this right-click on the insertion point to access the menu.
    7. Switch to the Shading tab, choose a dark grey color from the drop-down list, and then click OK.
    8. Repeat steps 1 through 6 for the other two buttons naming them Tab 2 and Tab 3, respectively. Also, instead of a dark grey color for the shading of the table cells select a light grey color. Refer to Figure 1.


    Figure 1. The completed default view.

    Add the other views:

    1. Open the Views Task Pane, double-click View 1, rename it to Tab 1, and then click OK.
    2. Click Add A New View, name the view Tab 2, and then click OK.
    3. Add one more view named Tab 3.

    Now that the form is starting to take shape, let's add some functionality via rules on each of the buttons. Please note that the following actions can also be achieved with code. For this example, we chose to use rules, but you may substitute code if you prefer. Also note that although rules will be carried along with a button after copying and pasting, adding rules later will require another copy and paste for the rules to propagate.

    Add rules to the buttons:

    1. In the Views task pane select Tab 1 to switch to the view with the tabbed content pane.
    2. Double-click the Tab 1 button to open the Button Properties dialog box, click Rules, and then click Add.
    3. Name the rule Switch Views to Tab 1, and then click Add Action.
    4. Select Switch Views from the Action drop-down list, select Tab 1 from the View drop-down list, and then click OK four times to close the Button Properties dialog box and apply the rule.
    5. Follow steps 2 through 4 for the other two buttons, adding actions to switch to their respective views.

    Copy the tabbed content pane to the other views:

    1. Copy all of the content of the Tab 1 view by choosing Select All from the Edit menu, and then choosing Copy from the Edit menu. This can also be done by pressing Ctrl+A then Ctrl+C.
    2. In the Views task pane select Tab 2 to switch to the Tab 2 view, and then choose Paste from the Edit menu. This can also be done by pressing Ctrl+V.
    3. Switch to the Tab 3 view and Paste again.
    4. Reformat the table cells on each view so that the dark grey cell on the view corresponds to which view it is.
    5. Type some identifying text into the one big cell of each view. Refer to Figures 2 and 3.


    Figure 2. The Tab 2 view.


    Figure 3. The Tab 3 view.

    Try it:

    1. Preview the form by clicking the Preview Form button or pressing Alt+P.
    2. Observe how clicking the buttons switches views and changes the formatting of the buttons to display a tabbed content pane.

    You will see that we have now achieved a very functional and easy-to-use tabbed content pane. With the help of images and careful adjustments, this simple tabbed content pane can be transformed into a very clean and professional looking interface.

  • Create a Custom Task Pane to Switch Views

    Custom task panes, and their ability to interface with objects and functions in InfoPath, can be very useful. One such example of utilizing this functionality is creating a custom task pane using some simple JavaScript code that dynamically generates links to the different views in a form. The main difference between changing views in the task pane and changing views in InfoPath is that the task pane requires code to change views, whereas you can use rules or simply the View menu items in InfoPath.

    In this task we will create a custom task pane HTML file in a text editor and add it to an InfoPath sample form.

    Create a custom task pane:

    Copy the following code into a text editor, and then save the file as SwitchViewsTaskPane.htm.

    <html>
    <head>

    <script language="JavaScript">

    var XDocument;
    var View;

    function PrintLinks()
    {
        // Get a reference to the XDocument object for the InfoPath Form.
        XDocument = window.external.Window.XDocument;

        // Set the reference to the View object.
        View = XDocument.View; 

        // Get the ViewInfos object.
        var oViewInfos = XDocument.ViewInfos;

        var sInnerHtml = "";

        // Loop through the views, generate the HTML, and store it in sInnerHtml.
        for(i = 0; i < oViewInfos.Count; i++)
        {
            sInnerHtml = sInnerHtml
                + "<a href='#' OnClick=\"View.SwitchView('" + oViewInfos(i).Name + "');\">"
                + (i+1) + ". &nbsp;" + oViewInfos(i).Name + "</a><br />" ;   
        }

        // Display the HTML that was just generated.
        ViewLinks.innerHTML = sInnerHtml; 
    }

    </script>
    </head>

    <body onload="PrintLinks()">

     <div id="ViewLinks"></div>

    </body>
    </html>

    Customize the Project Plan sample form:

    1. Open InfoPath, click Design A Form in the Fill Out A Form dialog box, and then click Customize A Sample in the Design A Form task pane.
    2. Select Project Plan from the Samples tab, and then click OK.
    3. Choose Form Options from the Tools menu.
    4. Switch to the Advanced Tab, select Enable Custom Task Pane, and then click Resource Files.
    5. Click Add, locate the SwitchViewsTaskPane.htm file that was created above, and then click OK.
    6. Name the task pane Switch Views (as shown in Figure 1), and then click OK to close the Form Options dialog box.


    Figure 1. Adding the custom task pane.

    Preview the form and notice that the task pane automatically generates links to all of the available views within the form, as shown in Figure 2.


    Figure 2. The completed task pane applied to the Project Plan sample form.

  • Programmatically Move Focus to Lists, Check Boxes, and Radio Buttons without Allowing Deletion

    The XDocument.View.SelectNodes() function can be very useful when you need to "jump" and give focus to a certain field on your form with code. However, the SelectNodes() function only allows for the selection of certain controls and there are several common controls that are not normally selectable. Drop-down and normal lists, check boxes, radio buttons, and ink picture controls cannot be selected directly in InfoPath. To get around this problem we will place the non-selectable controls within a section control that is bound to the same node as our target control. Once this is accomplished we can use the SelectNodes() function on the containing section to achieve the desired effects.

    In this task we will create a drop-down list and a button that will change focus to this drop-down list. Let's start by creating a new blank form.

    Add a textbox, drop-down list, and button control:

    1. Open the Controls task pane.
    2. Insert a Text Box into the view.
    3. Press Enter twice to insert some white space.
    4. Insert a Drop-Down List Box into the view.
    5. Press Enter twice to insert some white space.
    6. Insert a Button into the view.

    Rename the Drop-Down List Box schema node and Button:

    1. Double-click the Button in the view, change the Label to Change Focus, and then change the ID to btnChangeFocus, as shown in Figure 1, and then click OK.
    2. Open the Data Source task pane, and then choose Main from the Data Source drop down list.
    3. Double-click myFields/field2, and then rename it to DropDown.
    4. Double-click myFields/field1, and then rename it to Date.


    Figure 1. The completed default view.

    Add code to the button:

    1. Double-click on the button control in the view.
    2. Click Edit Form Code.
    3. In the Microsoft Script Editor, replace the contents of the OnClick event handler with the following code:

    BLOCKED SCRIPT
    XDocument.View.SelectNodes(XDocument.DOM.selectSingleNode("//my:DropDown"));

    C#:
    thisXDocument.View.SelectNodes(thisXDocument.DOM.selectSingleNode("//my:DropDown"), Type.Missing, Type.Missing);

    After reading the documentation on the SelectNodes() function it might seem that our form would work correctly as it has been made so far, but a short preview will prove otherwise.

    Preview the Error:

    1. Click Preview Form on the Standard Toolbar.
    2. Click Change Focus (an error message pops up, as shown in Figure 2).
    3. Click No, click OK, and then click Close Preview.


    Figure 2. The SelectNodes() error message.

    Now we must add a section that is bound to the same node as our drop-down list box. The reason we bind it to the same node and not create a new node is to prevent excessive clutter in the DOM.

    Add a section and move the drop-down list:

    1. Open the Data Source task pane.
    2. Choose Main from the Data Source drop down list.
    3. Right-drag the DropDown node onto the view, and then choose Section.
    4. Drag-and-drop the drop-down list box into the section that was just created.
    5. Rearrange and resize the new section to match Figure 3.


    Figure 3. The section and drop-down list bound to the same node.

    At this point it might still seem like the button will work correctly, but another preview will show us that this is not the case. The section that contains the drop-down list must be set to allow users to delete the section in order for the button to work.

    Make the section able to be deleted:

    1. Double-click the section.
    2. Select the Allow Users To Delete The Section check box under the Default Settings section.
    3. Click OK.

    Finally, a preview after these steps shows us that we have accomplished our goal. Previewing the form and clicking the button makes focus "jump" from the text box to the section that holds the drop-down list without issuing any errors. Once focus is set to the section, the user must simply press any of the arrow keys or the tab key to choose a new value for the drop down list.

    In the last few steps we enabled the ability to delete the section, but this should not be permissible. To avoid this problem we use a clever conditional formatting technique to ensure that the section will never be deleted.

    Add conditional formatting:

    1. Double-click the section.
    2. Click the Display tab.
    3. Click Conditional Formatting.
    4. Click Add.
    5. Choose The Expression from the first drop-down list.
    6. Replace the text in the text-box to the right of the drop-down list with 2+2=4 (or any other tautology: a statement that is always true).
    7. Select the Don't Allow Users To Insert Or Delete This Control check box.
    8. Click OK three times.

    After these steps the button will work exactly as it is supposed to and there are no chances of the section being removed or deleted from the form. All of these steps can be applied to the other non-selectable items (check boxes and option buttons) to achieve the same effect.

  • Create a Multi-View Master/Detail using a Query Filter

    When using InfoPath as a front end to a large database it is often convenient to be able to skim through the rows looking at only a few columns, such as a contact name, and then click a button to view the rest of the information.

    To obtain optimal performance when using a very large database, you can use two data connections to the same database: one querying a small subset of columns, the other a single row of all columns. If the database is small to moderately large, or performance is not an issue, see Create a Multi-View Master/Detail using an InfoPath Data Filter.

    In this task we will create a new form connected to a sample Access database, supplemented by a secondary connection to the same database, and use controls, rules, and queries to create a multi-view master/detail list.

    Obtaining the sample Access database:

    The sample Access database we will use is supplied as part of the Microsoft Office 2003 default installation. If installed, you can locate it at C:\Program Files\Microsoft Office\OFFICE11\SAMPLES\Nwind.mdb. If the database file does not exist in this directory, you can download it from the Microsoft Web site at http://www.infopathdev.com/cgi-bin/awredir.pl?url=http://www.microsoft.com/downloads/details.aspx?FamilyID=C6661372-8DBE-422B-8676-C632D66C529C&displaylang=en.

    Create a new form from a database connection:

    1. Launch InfoPath, and then choose Design A Form from the File menu.
    2. In the Design A Form task pane, click New From Data Connection.
    3. In the Data Connection Wizard, select Database, and then click Next.
    4. Click Select Database, locate and select Nwind.mdb, and then click Open.
    5. In the Select Table dialog box, select the Customers table, and then click OK.
    6. Click Next, and then click Finish.

    The main data connection will be used for our detail view. We will query for details about the customer selected by the user. Now let's add a supplementary data connection which will be used to display our master view. It is optimized to retrieve only the columns we will display.

    Add a supplementary data connection to the same database:

    1. Choose Data Connections from the Tools menu.
    2. In the Data Connections dialog box, click Add.
    3. In the Data Connection Wizard, select Receive Data, and then click Next.
    4. Select Database, and then click Next.
    5. Click Select Database, locate and select Nwind.mdb, and then click Open.
    6. In the Select Table dialog box, select the Customers table, and then click OK.
    7. In the Data Source Structure list box, clear every check box except CustomerID and ContactName, and then click Next.
    8. Name the data connection Master.
    9. Ensure that Automatically Retrieve Data When Form is Opened is selected, click Finish, and then click Close.

    Create the master view:

    1. Delete everything that was automatically generated in the view.
    2. Open the Data Source task pane, and then select Master from the Data Source drop-down list.
    3. Right-click dataFields/d:Customers, and then choose Repeating Table.
    4. Delete the Customer ID column.
    5. Right-click the Contact Name column label, and then choose Insert | Columns To The Right.
    6. Click inside the new column to set the insertion point.
    7. Open the Controls task pane, and then click Button.
    8. Double-click the inserted button.
    9. In the Button Properties dialog box, change the label to View Detail, change the ID to btnViewDetail, and then click OK (see Figure 1).


    Figure 1. The completed master view.

    Create the detail view:

    1. Open the Views task pane.
    2. Click Add A New View.
    3. Name the view Detail, and then click OK.
    4. Open the Data Source task pane, and then select Main from the Data Source drop-down list.
    5. Right-click dataFields/d:Customers, and then choose Repeating Section With Controls (see Figure 2).


    Figure 2. The completed detail view.

    Add code behind the View Detail button:

    The following code can also be expressed in rules. For this example, we chose to use code, but you may substitute rules if you prefer.

    1. In the Views task pane, select View 1.
    2. Double-click the View Detail button, and then click Edit Form Code.
    3. In the Microsoft Script Editor, replace the contents of the OnClick event handler with the following code:

    var oQueryId = XDocument.DOM.selectSingleNode( "/dfs:myFields/dfs:queryFields/q:Customers/@CustomerID" );
    oQueryId.text = eventObj.Source.selectSingleNode("@CustomerID").text;
    XDocument.Query();
    XDocument.View.SwitchView("Detail");

    Try it:

    1. Click Preview Form (or press Alt+P on the keyboard).
    2. Click View Detail for one of the rows to view the selected contact in the detail view.
  • Create a Multi-View Master/Detail using an InfoPath Data Filter

    When using InfoPath as a front end to a large database it is often convenient to be able to skim through the rows looking at only a few columns, such as a contact name, and then click a button to view the rest of the information.

    You can use an InfoPath data filter to easily and quickly implement this functionality. However, this method might not be ideal for very large databases as its performance could suffer. If you are connecting to a very large database, and performance is important, please see Create a Multi-View Master/Detail using a Query Filter.

    In this task we will create a new form connected to a sample Access database and use controls, rules, and filters to create a multi-view master/detail list.

    Obtaining the sample Access database:

    The sample Access database we will use is supplied as part of the Microsoft Office 2003 default installation. If installed, you can locate it at C:\Program Files\Microsoft Office\OFFICE11\SAMPLES\Nwind.mdb. If the database file does not exist in this directory, you can download it from the Microsoft Web site at http://www.infopathdev.com/cgi-bin/awredir.pl?url=http://www.microsoft.com/downloads/details.aspx?FamilyID=C6661372-8DBE-422B-8676-C632D66C529C&displaylang=en.

    Create a new form from a database connection:

    1. Launch InfoPath, and then choose Design A Form from the File menu.
    2. In the Design A Form task pane, click New From Data Connection.
    3. In the Data Connection Wizard, select Database, and then click Next.
    4. Click Select Database, locate and select Nwind.mdb, and then click Open.
    5. In the Select Table dialog box, select the Customers table, and then click OK.
    6. Click Next, and then click Finish.
    7. Delete everything that was automatically generated in the view except for the Run Query button (we will keep this at the top of the page).
    8. Click below the Run Query button to set the insertion point.

    Create the master view:

    1. Open the Data Source task pane.
    2. Right-click dataFields/d:Customers, and then choose Repeating Table.
    3. Delete every column in the table except for Contact Name.
    4. Right-click the Contact Name column label, and then choose Insert | Columns To The Right.
    5. Click inside the new column to set the insertion point.
    6. Open the Controls task pane, and then click Button.
    7. Double-click the inserted button.
    8. In the Button Properties dialog box, change the label to View Detail, change the ID to btnViewDetail, and then click OK (see Figure 1).



    Figure 1. The completed master view.

    Create the detail view:

    1. Open the Views task pane.
    2. Click Add A New View.
    3. Name the view Detail, and then click OK.
    4. Open the Data Source task pane.
    5. Right-click dataFields/d:Customers, and then choose Repeating Section With Controls (see Figure 2).


    Figure 2. The completed detail view.

    We need to add a helper node to the schema to store the ID of the customer selected in the master view. This ID will be used to filter the display in the detail view to show only the selected customer. After setting this value, we will switch to the detail view.

    Add the helper node:

    1. In the Data Source task pane, right-click myFields, and then choose Add.
    2. Name the field DetailId.
    3. Select Whole Number from the Data Type drop-down list.
    4. Click OK.

    Add rules to the View Detail button:

    1. Open the Views task pane, and then select View 1.
    2. Double-click the View Detail button.
    3. In the Button Properties dialog box, click Rules, and then click Add.
    4. Name the rule Update DetailId and Change Views.
    5. Click Add Action.
    6. Choose Set A Field’s Value from the Action drop-down list.
    7. Click the Data Source button to the right of the Field text box.
    8. In the Select A Field Or Group dialog box, select my:DetailId, and then click OK.
    9. Click the Insert Formula button to the right of the Value text box.
    10. In the Insert Formula dialog box, click Insert Field Or Group.
    11. Select dataFields/d:Customers/:CustomerID, and then click OK three times.
    12. In the Rule dialog box, click Add Action.
    13. Choose Switch Views from the Action drop-down list.
    14. Choose Detail from the View drop-down list, and then click OK (see Figure 3).
    15. Click OK three times to close all open dialog boxes.


    Figure 3. Adding rules to the View Detail button.

    The functionality has been added to the button, but the detail view still displays all of the rows. Let's add a filter to repeating section in the detail view to show only the selected row.

    Add a filter to the detail section:

    1. In the Views task pane, select Detail.
    2. Double-click the repeating section label.
    3. On the Display Tab, click Filter Data, and then click Add.
    4. In the Specify Filter Conditions dialog box, select CustomerID from the first drop-down list.
    5. In the second drop-down list, select Is Equal To.
    6. In the third drop-down list, select Select A Field Or Group.
    7. In the Select A Field Or Group dialog box, choose my:DetailId, and then click OK (see Figure 4).
    8. Click OK three times to close all open dialog boxes.


    Figure 4. Filter the detail view based on the selected Customer ID.

    Try it:

    1. Click Preview Form (or press Alt+P on the keyboard).
    2. Click Run Query to populate the master table.
    3. Click View Detail for one of the rows to view the selected contact in the detail view.
Copyright © 2003-2019 Qdabra Software. All rights reserved.
View our Terms of Use.