June 2005 - Posts - Greg Collins
in

InfoPath Dev

This Blog

Syndication

Tags

Greg Collins

June 2005 - Posts

  • Launch a Supporting Form

    InfoPath forms can do a lot of things. But at times you might want one form to launch another form to perform a different, but related task. You might have needs for numerous forms to work together as part of an overall solution.

    In this task we will create several buttons which will launch a supporting form using the New, NewFromSolution, and NewFromSolutionWithData methods of the XDocuments collection. Each method requires an absolute path to the supporting form or document. Since our support form and source form as well as any documents created will all be stored in the same folder, we will grab the path from the XDocument.Solution.URI property. This will allow us to relocate our forms and templates and not need to update the code. Let's start by designing a new blank supporting form.


    THE SUPPORTING FORM

    Create the supporting form:

    1. Type Supporting Form at the top of the view, and then press Enter.
    2. From the Controls task pane, insert a text box.
    3. Choose Save from the File menu, and then click Save.
    4. Create a folder named MultiForm.
    5. Name your file Supporting.xsn, and then click Save.
    6. Close InfoPath.

    Create a test document using the supporting form:

    1. Launch your Supporting.xsn file from the MultiForm folder.
    2. Type Test Data into the text box.
    3. Save your form as Form1.xml in the MultiForm folder.
    4. Close InfoPath.

    Now that we have created our supporting form and a test document, lets create the a source form which will be used to launch the supporting form. Again, let's start by designing a new blank form.


    THE SOURCE FORM

    Create the source form:

    1. Type Source Form at the top of the view, and then press Enter.
    2. From the Controls task pane, insert three buttons.

    Identify the absolute path:

    1. Choose Programming | On Load Event from the Tools menu.
    2. Add the sFormPath variable declaration just above and outside of the OnLoad event handler so that it is globally accessible to the other functions:

    var sFormPath = "";

    1. Add the following code to the OnLoad event handler:

    var sUri = XDocument.Solution.URI;
    var i = sUri.lastIndexOf("\\");
    if(-1 == i)
        i = sUri.lastIndexOf("/");
    sFormPath = sUri.substring(0, i + 1);

    1. Switch back to the InfoPath designer.

    Add code behind the New button:

    1. Double-click the first button, change the label to New, change the ID to btnNew, and then click Edit Form Code.
    2. Add the following code to the btnNew OnClick event handler:

    Application.XDocuments.New(sFormPath + "Form1.xml");

    1. Switch back to the InfoPath designer.

    Add code behind the NewFromSolution button:

    1. Double-click the second button, change the label to NewFromSolution, change the ID to btnNewFromSolution, and then click Edit Form Code.
    2. Add the following code to the btnNewFromSolution OnClick event handler:

    Application.XDocuments.NewFromSolution(sFormPath + "Supporting.xsn");

    1. Switch back to the InfoPath designer.

    Add code behind the NewFromSolutionWithData button:

    1. Double-click the third button, change the label to NewFromSolutionWithData, change the ID to btnNewFromSolutionWithData, and then click Edit Form Code.
    2. Add the following code to the btnNewFromSolutionWithData OnClick event handler:

    Application.XDocuments.NewFromSolutionWithData(sFormPath + "Form1.xml", sFormPath + "Supporting.xsn");

    Save the form:

    1. Save your code and close the script editor.
    2. In the InfoPath designer, choose Save from the File menu, and then click Save.
    3. Navigate to the MultiForm folder.
    4. Name your file Source.xsn, and then click Save.
    5. Close InfoPath.

    Try it:

    Now that we have created the source and supporting templates and a supporting test document, let's try out the various methods. Preview the form and click each of the buttons to see what happens.

    One thing you'll probably notice is that when you click either the New or NewFromSolutionWithData button for the first time you will be presented with a security warning dialog box as shown in Figure 1. To learn of ways to prevent or disable this dialog box, refer to Prevent the Internet Explorer Cross-Domain Security Dialog Box.


    Figure 1. The Internet Explorer cross-domain data access security risk dialog box.

    ©2005 Greg Collins. All rights reserved. Licensed to Autonomy Systems, LLC for display on InfoPathDev.com.

    Posted Jun 10 2005, 06:16 PM by Greg Collins with 4 comment(s)
    Filed under: , , , , , , ,

  • Switch Views via Code and Rules

    There will be times when you will want to switch views during unsupported events, such as the OnAfterChange event. Due to technical reasons in the underlying platform, InfoPath only allows you to switch views during the OnLoad event and the OnClick event handlers for buttons in the form or on toolbars. The Switch View rule action is only available on buttons.

    Although there are many reasons to want to switch views during other events, InfoPath will not allow these. If you attempt to switch views during an unsupported event, you will receive an error dialog box, as shown in Figure 1.

    Figure 1. The error dialog box for an invalid view switch attempt.

    ©2005 Greg Collins. All rights reserved. Licensed to Autonomy Systems, LLC for display on InfoPathDev.com.

    Posted Jun 10 2005, 03:04 PM by Greg Collins with no comments
    Filed under: , ,

  • Prevent the Internet Explorer Cross-Domain Security Dialog Box

    With default settings, Internet Explorer might warn you when your InfoPath form attempts to access data across domains (see Figure 1). Notice that the title bar is labeled as "Internet Explorer"; this is because Internet Explorer, and not InfoPath, is posing the security risk. Although this is beneficial for security purposes, if you are working in a controlled environment this dialog box can become annoying.


    Figure 1. The Internet Explorer cross-domain data access security risk dialog box.

    For example, the first time you use either the New or NewFromSolutionWithData methods you will be presented with the security warning dialog box shown in Figure 1. If you click Yes, the method will proceed as expected. If you click No, you will receive an error dialog box informing you that permission was denied, and the method will fail. This warning dialog box is only presented once during the life of your form. Thereafter your choice will be reused by default. To select a new choice you will need to close and reopen your form.

    This dialog box might not appear if you publish your form to a Web server. You can prevent this dialog box by setting your form template to full trust or you can disable it.

    In this task we will disable the Internet Explorer security risk dialog box by modifying your Internet Explorer security settings. This will prevent this dialog box from appearing only on the specific machine with the modified settings.

    Disable the Internet Explorer security risk dialog box:

    1. From Internet Explorer, choose Internet Options from the Tools menu.
    2. On the Security tab of the Internet Options dialog box, select the Local Intranet Web Content Zone and then click Custom Level.
    3. Locate the Miscellaneous/Access Data Sources Across Domains setting, and then select Enable, as shown in Figure 2.
    4. Click OK, and then click Yes to the warning dialog box that appears.
    5. Click OK to close the Internet Options dialog box.


    Figure 2. Enabling cross-domain data access in Internet Explorer.

    These Internet Explorer security options are per machine settings. If you choose to use this solution as part of deployment, you will need to follow the above steps on each machine that will be using your form.

    ©2005 Greg Collins. All rights reserved. Licensed to Autonomy Systems, LLC for display on InfoPathDev.com.

    Posted Jun 10 2005, 07:12 AM by Greg Collins with 3 comment(s)
    Filed under: , , , ,

  • Hide a Check Box Using Conditional Visibility

    Check Box and Option Button controls have very limited conditional formatting choices. In fact, the InfoPath UI provides only one conditional formatting choice for these two controls: disable. But disabling a control is not always the right choice. In certain conditions you might prefer to hide the control. Although the techniques described here will work with either control, we will focus on the check box.

    In this task we will create a simple form that a salvage yard could use to list the features of vehicles it has for sale. We will create a repeating table of vehicles which will include a drop-down list of vehicle types (car, motorcycle, or bicycle), and a set of five check boxes to represent the vehicle features (tires, engine, seat, steering wheel, and handlebars). Since no vehicle type requires the full set of features, we will hide certain check boxes based on the selected vehicle type.

    Two possible layouts for your check boxes are vertical and horizontal. Each layout will examine a different approach to hiding a check box using conditional visibility. For a vertical layout we will use a containing section. For a horizontal layout we will manually modify the XSL. Let's start by designing a new blank form.

    Create the schema:

    1. Open the Data Source task pane.
    2. Double-click myFields, and then rename it to Vehicles.
    3. Add a repeating Group named Vehicle.
    4. Select the Vehicle group, and then add five True/False Attribute Fields named tires, engine, seat, steeringWheel, and handlebars, with their default values set to False.
    5. Add three Text Fields named Id, Type, and Description.


    APPROACH 1 – VERTICAL LAYOUT: USE A CONTAINING SECTION

    With a vertical layout, the easiest approach to hide a check box using conditional visibility is to place it into a section, and then add the conditional visibility to the section. The advantage of this approach is that you can accomplish your task from within the designer.

    A section is rendered as a block element, meaning that you cannot place other controls next to it on the same line—they will be forced to appear either above or below the section. This is why this approach works well for a vertical layout, but not a horizontal layout. You can still use this approach with a horizontal layout by using a layout table, but a major drawback is that the empty space for the hidden check box will not be collapsed.

    Design the layout:

    1. In the Data Source task pane, right-click Vehicle, and then choose Repeating Section.
    2. Delete the extra blank lines from the repeating section, and then type VEHICLE:.
    3. Insert a 2x1 layout table.
    4. Right-click in the top table cell, and then choose Split Cells.
    5. In the Split Cells dialog box, type 2 for the number of columns, and then click OK.

    Insert the non-check box controls:

    1. From the Data Source task pane, drag-and-drop Id into the top-left table cell.
    2. Right-drag-and-drop Type into the top-right table cell, and then choose Drop-Down List Box.
    3. Drag-and-drop Description into the bottom table cell.

    Insert a section for each check box:

    1. Click on the first blank line below the layout table to set the insertion point.
    2. Right-click each of the five Boolean attribute fields (tires, engine, seat, steeringWheel, and handlebars), choose More | Section, and then click OK.

    Adjust the properties of the sections:

    1. Ctrl-Click the five sections you just inserted to create a multiple-selection, and then press Alt+Enter.
    2. In the Properties (Multiple Selection) dialog box, set each of the padding and margin values, except the right margin, to 0px, and then click OK.
    3. While you still have the multiple-selection, right-click one of the sections, and then choose Borders and Shading.
    4. On the Borders tab of the Borders And Shading dialog box, click None to remove the existing border, and then click OK.

    Insert the check box controls:

    1. Drag-and-drop each of the five Boolean attribute fields (tires, engine, seat, steeringWheel, and handlebars) into their associated section.
    2. Delete the extra blank lines inside each of the five sections. Your completed layout should look like Figure 1.

    Figure 1. The completed vertical layout of conditionally visible check boxes.

    Add entries to the Type drop-down list box:

    1. Double-click the Type drop-down list box, and then click Add.
    2. In the Add Choice dialog box, type Car, and then click OK.
    3. Add two more entries for Motorcycle and Bicycle.

    Add a rule to set the engine attribute value to false as its check box become hidden:

    1. Click Rules, and then click Add.
    2. Name the rule Set engine = false, and then click Set Condition.
    3. In the Condition dialog box, select Type Text from the third drop-down list, type Bicycle, and then click OK.
    4. Click Add Action.
    5. In the Action dialog box, select Set A Field's Value from the Action drop-down list.
    6. Click the Select XPath button to the right of the Field text box, select Vehicles/Vehicle/engine, and then click OK.
    7. Click the Insert Formula button to the right of the Value text box, click Insert Function, select false() from the list Functions, and then click OK four times.

    Add a rule to set the steeringWheel attribute value to false as its check box become hidden:

    1. Click Add.
    2. Name the rule Set steeringWheel = false, and then click Set Condition.
    3. In the Condition dialog box, select Type Text from the third drop-down list, type Motorcycle, click And, and then select Or in place of And.
    4. Select Type Text from the third drop-down list, Bicycle (as shown in Figure 2), and then click OK.

    Figure 2. The rule conditions for setting the steeringWheel attribute to false.

    1. Click Add Action.
    2. In the Action dialog box, select Set A Field's Value from the Action drop-down list.
    3. Click the Select XPath button to the right of the Field text box, select Vehicles/Vehicle/steeringWheel, and then click OK.
    4. Click the Insert Formula button to the right of the Value text box, click Insert Function, select false() from the list Functions, and then click OK four times.

    Add a rule to set the handlebars attribute value to false as its check box become hidden:

    1. Click Add.
    2. Name the rule Set handlebars = false, and then click Set Condition.
    3. In the Condition dialog box, select Type Text in the third drop-down list, and then type Car, and then click OK.
    4. Click Add Action.
    5. In the Action dialog box, select Set A Field's Value from the Action drop-down list.
    6. Click the Select XPath button to the right of the Field text box, select Vehicles/Vehicle/handlebars, and then click OK.
    7. Click the Insert Formula button to the right of the Value text box, click Insert Function, select false() from the list Functions, and then click OK six times to close all open dialog boxes.

    Add conditional visibility to the Engine section:

    1. Double-click the Engine section.
    2. On the Display tab of the Section Properties dialog box, click Conditional Formatting, and then click Add.
    3. Select Type from the first drop-down list, select Is Equal To from the second drop-down list, select Type Text from the third drop-down list, and then type Bicycle.
    4. Select the Hide This Control check box, and then click OK three times.

    Add conditional visibility to the Steering Wheel section:

    1. Double-click the Steering Wheel section.
    2. One the Display tab of the Section Properties dialog box, click Conditional Formatting, and then click Add.
    3. Select Type from the first drop-down list, select Is Equal To from the second drop-down list, select Type Text from the third drop-down list, type Motorcycle, click And, and then select Or in place of And.
    4. Select Type from the first drop-down list, select Is Equal To from the second drop-down list, select Type Text from the third drop-down list, and then type Bicycle.
    5. Select the Hide This Control check box (as shown in Figure 3), and then click OK three times.

    Figure 3. Visiblity conditions for the Steering Wheel section.

    Add conditional visibility to the Handlebars section:

    1. Double-click the Handlebars section.
    2. One the Display tab of the Section Properties dialog box, click Conditional Formatting, and then click Add.
    3. Select Type from the first drop-down list, select Is Equal To from the second drop-down list, select Type Text from the third drop-down list, and then type Car.
    4. Select the Hide This Control check box, and then click OK three times.

    Try it:

    1. Preview the form.
    2. Select each option from the Type drop-down list to see how the check boxes and label get hidden as appropriate.

    You now have a dynamic vertical list of check boxes that are hidden, as appropriate, based on the vehicle type. The check boxes that are hidden are automatically cleared so that there are no invalid selections when the form is saved.


    APPROACH 2 – HORIZONTAL LAYOUT: MANUALLY MODIFY THE XSL

    With a horizontal layout, the easiest approach to hide a check box using conditional visibility is to use a conditionally visible expression box for the label, and then manually modify the XSL to add conditional visibility to the check box control. You can use this approach with a vertical layout as well, but since it requires going outside of the designer to accomplish this we recommend that you instead use the first approach for a vertical layout.

    Design the layout:

    1. In the Data Source task pane, right-click Vehicle, and then choose Repeating Section.
    2. Delete the extra blank lines from the repeating section, and then type VEHICLE:.
    3. Insert a 2x1 layout table.
    4. Right-click in the top table cell, and then choose Split Cells.
    5. In the Split Cells dialog box, type 2 for the number of columns, and then click OK.

    Insert the controls:

    1. From the Data Source task pane, drag-and-drop Id into the top-left table cell.
    2. Right-drag-and-drop Type into the top-right table cell, and then choose Drop-Down List Box.
    3. Drag-and-drop Description into the bottom table cell.
    4. Drag-and-drop each of the five Boolean attribute fields (tires, engine, seat, steeringWheel, and handlebars) below the bottom table cell.

    Add entries to the Type drop-down list box:

    1. Double-click the Type drop-down list box, and then click Add.
    2. In the Add Choice dialog box, type Car, and then click OK.
    3. Add two more entries for Motorcycle and Bicycle.

    Add a rule to set the engine attribute value to false as its check box become hidden:

    1. Click Rules, and then click Add.
    2. Name the rule Set engine = false, and then click Set Condition.
    3. In the Condition dialog box, select Type Text from the third drop-down list, type Bicycle, and then click OK.
    4. Click Add Action.
    5. In the Action dialog box, select Set A Field's Value from the Action drop-down list.
    6. Click the Select XPath button to the right of the Field text box, select Vehicles/Vehicle/engine, and then click OK.
    7. Click the Insert Formula button to the right of the Value text box, click Insert Function, select false() from the list Functions, and then click OK four times.

    Add a rule to set the steeringWheel attribute value to false as its check box become hidden:

    1. Click Add.
    2. Name the rule Set steeringWheel = false, and then click Set Condition.
    3. In the Condition dialog box, select Type Text from the third drop-down list, type Motorcycle, click And, and then select Or in place of And.
    4. Select Type Text from the third drop-down list, Bicycle, and then click OK.
    5. Click Add Action.
    6. In the Action dialog box, select Set A Field's Value from the Action drop-down list.
    7. Click the Select XPath button to the right of the Field text box, select Vehicles/Vehicle/steeringWheel, and then click OK.
    8. Click the Insert Formula button to the right of the Value text box, click Insert Function, select false() from the list Functions, and then click OK four times.

    Add a rule to set the handlebars attribute value to false as its check box become hidden:

    1. Click Add.
    2. Name the rule Set handlebars = false, and then click Set Condition.
    3. In the Condition dialog box, select Type Text in the third drop-down list, and then type Car, and then click OK.
    4. Click Add Action.
    5. In the Action dialog box, select Set A Field's Value from the Action drop-down list.
    6. Click the Select XPath button to the right of the Field text box, select Vehicles/Vehicle/handlebars, and then click OK.
    7. Click the Insert Formula button to the right of the Value text box, click Insert Function, select false() from the list Functions, and then click OK six times to close all open dialog boxes. The complete set of rules is shown in Figure 4.

    Figure 4. The set of rules for the Type drop-down list box.

    Fix the layout of the check boxes:

    1. Remove the space character between each check box and its label.
    2. Remove any line breaks such that all of the check boxes are on the same line.
    3. Ctrl-Click the check boxes labeled Engine, Seat, Steering Wheel, and Handlebars to create a multiple-selection, and then press Alt+Enter.
    4. In the Properties (Multiple Selection) dialog box, set the left margin value to 10px, and then click OK.

    It is important to use margins, rather than space characters, to create gaps between the check boxes. If we use spaces, they will remain when the check box is hidden, causing the gaps to appear wider than they should. Since margins are part of the Check Box control, they are hidden along with the check box.

    Replace the Engine check box label with a conditionally visible expression box:

    1. Select the label text for the Engine check box.
    2. Open the Controls task pane, and then click Expression Box to insert one in place of the selected label text.
    3. In the Insert Expression Box dialog box, type "Engine", and then click OK.
    4. Double-click the new expression box.
    5. On the Size tab of the Expression Box Properties dialog box, set the width to auto, set each of the padding and margin values, except the right margin, to 0.
    6. On the Display tab, click Conditional Formatting, and then click Add.
    7. Select Type from the first drop-down list, select Is Equal To from the second drop-down list, select Type Text from the third drop-down list, and then type Bicycle.
    8. Select the Hide This Control check box, and then click OK three times.

    Replace the Steering Wheel check box label with a conditionally visible expression box:

    1. Select the label text for the Steering Wheel check box.
    2. In the Controls task pane click Expression Box to insert one in place of the selected label text.
    3. In the Insert Expression Box dialog box, type "Steering Wheel", and then click OK.
    4. Double-click the new expression box.
    5. On the Size tab of the Expression Box Properties dialog box, set the width to auto, set each of the padding and margin values, except the right margin, to 0.
    6. On the Display tab, click Conditional Formatting, and then click Add.
    7. Select Type from the first drop-down list, select Is Equal To from the second drop-down list, select Type Text from the third drop-down list, type Motorcycle, click And, and then select Or in place of And.
    8. Select Type from the first drop-down list, select Is Equal To from the second drop-down list, select Type Text from the third drop-down list, and then type Bicycle.
    9. Select the Hide This Control check box, and then click OK three times.

    Replace the Handlebars check box label with a conditionally visible expression box:

    1. Select the label text for the Handlebars check box.
    2. In the Controls task pane click Expression Box to insert one in place of the selected label text.
    3. In the Insert Expression Box dialog box, type "Handlebars", and then click OK.
    4. Double-click the new expression box.
    5. On the Size tab of the Expression Box Properties dialog box, set the width to auto, set each of the padding and margin values, except the right margin, to 0.
    6. On the Display tab, click Conditional Formatting, and then click Add.
    7. Select Type from the first drop-down list, select Is Equal To from the second drop-down list, select Type Text from the third drop-down list, and then type Car.
    8. Select the Hide This Control check box, and then click OK three times. Your completed layout should look like Figure 5.


    Figure 5. The completed horizontal layout of conditionally visible check boxes.

    Modify the view .xsl file:

    1. Choose Extract Form Files from the File menu.
    2. Select a location to save your extracted form files to, and then click OK.
    3. Close InfoPath to release the lock it places on your form files.
    4. Using a text editor, open the view1.xsl file.

    Add code to conditionally hide the Engine check box:

    1. Search for the text my:engine to locate the input element that represents your Check Box control that you want to hide.
    2. Add the following code immediately below the input element:

    <xsl:attribute name="style">MARGIN-LEFT: 10px;<xsl:choose>
            <xsl:when test="my:Type = &quot;Bicycle&quot;">DISPLAY: none</xsl:when>
        </xsl:choose>
    </xsl:attribute>

    It is important that you copy the value of the style attribute from the input element, and then paste it between the xsl:attribute and xsl:choose elements. You must also make sure to add a semi-colon directly before the xsl:choose element. Although the code above uses MARGIN-LEFT: 10px; this must match whatever value was in the style attribute.

    1. Remove the style attribute from the input element.

    It should be noted here that, rather than needing to type all of this code, you can simply copy the code from the expression box label for this check box (since it already is set up to hide), and then paste it over the check box code you will be replacing. Then move the contents of the style attribute from the input element, replacing the contents of the xsl:attribute element. Finally remove the style attribute from the input element.

    Add code to conditionally hide the Steering Wheel check box:

    1. Search for the text my:steeringWheel to locate the input element that represents your Check Box control that you want to hide.
    2. Add the following code immediately below the input element:

    <xsl:attribute name="style">MARGIN-LEFT: 10px;<xsl:choose>
            <xsl:when test="my:Type = &quot;Motorcycle&quot; or my:Type = &quot;Bicycle&quot;">DISPLAY: none</xsl:when>
        </xsl:choose>
    </xsl:attribute>

    1. Remove the style attribute from the input element.

    Add code to conditionally hide the Handlebars check box:

    1. Search for the text my:handlebars to locate the input element that represents your Check Box control that you want to hide.
    2. Add the following code immediately below the input element:

    <xsl:attribute name="style">MARGIN-LEFT: 10px;<xsl:choose>
            <xsl:when test="my:Type = &quot;Car&quot;">DISPLAY: none</xsl:when>
        </xsl:choose>
    </xsl:attribute>

    1. Remove the style attribute from the input element.

    Try it:

    1. Save the view .xsl file, and then close the text editor.
    2. Reopen your form template by right-clicking the manifest.xsf file and choosing Design.
    3. Preview the form.
    4. Select each option from the Type drop-down list to see how the check boxes and label get hidden as appropriate.

    Having made these changes, you now have a dynamic horizontal list of check boxes that are hidden, as appropriate, based on the vehicle type. The check boxes that are hidden are automatically cleared so that there are no invalid selections when the form is saved. Your manual modifications will roundtrip in the designer, and will even survive any subsequent changes you might make in the Check Box Properties dialog box. There is a little extra work that must be done to accomplish this approach, but ultimately the results are well worth the effort.

    ©2005 Greg Collins. All rights reserved. Licensed to Autonomy Systems, LLC for display on InfoPathDev.com.

    Posted Jun 09 2005, 10:37 AM by Greg Collins with 1 comment(s)
    Filed under: , ,

  • Create Miniature Navigation Buttons with Centered Arrows

    When your design calls for navigation buttons that are smaller than the default size, your attempts to resize the buttons and font within the designer might prove frustrating at best. The arrows seem to never center correctly. Creating miniature navigation buttons in InfoPath can be done, but you must make a simple manual addition to the inline style of the buttons in the view .xsl file.

    In this task we will create a set of four miniature navigation buttons with the arrows 9, 3, 4, and :, which will represent buttons for the first, previous, next and last items in a list. Let's start by designing a new blank form.

    Create the four miniature navigation buttons:

    1. Open the Controls task pane.
    2. Insert a Button into the view.
    3. Select the button, and then set its font size and font to 8pt Webdings.
    4. Double-click the button.
    5. On the General tab of the Button Properties dialog box, type 9 for the label, and then type btnFirst for the ID, as shown in Figure 1.

    Figure 1. Setting the properties for the navigation buttons.

    For the Webdings font the text '9' is the 9 arrow, '3' is the 3 arrow, '4' is the 4 arrow, and ':' is the : arrow.

    1. On the Size tab, set both the height and width values to 16px, and then click OK.
    2. Make three copies of the button so that there are a total of four buttons in the view.
    3. Change the labels and IDs of the three new buttons to 3, btnPrevious; 4, btnNext; and :, btnLast respectively.

    Now all four types of navigation arrows are present in the view. As shown in Figure 2, the arrows in the 16x16 buttons are cut off. This will be fixed by manually editing the XSL.

    Figure 2. The arrows are cut off in the miniature navigation buttons.

    Modify the inline style for each of the miniature navigation buttons:

    1. Choose Extract Form Files from the File menu.
    2. Select a location to save your extracted form files to, and then click OK.
    3. Close InfoPath to release the lock it places on your form files.
    4. Using a text editor, open your view .xsl file.
    5. Search for the text btnFirst, and then locate the style attribute on the same input element.
    6. Add the following property and value to the end of the inline style:

    ; LINE-HEIGHT: 5px.

    1. Add the same property and value to the end of the inline style for each of the remaining three miniature navigation buttons, which can be found by searching for the text btnPrevious, btnNext, and btnLast respectively.
    2. Save the view .xsl file, and then close the text editor.
    3. Reopen your form template by right-clicking the manifest.xsf file and choosing Design.

    With the addition of the line-height property to the inline style of each of the miniature navigation buttons, the arrows are no longer cut off, but are properly centered within the buttons, as shown in Figure 3.

    Figure 3. The arrows are no longer cut off in the modified miniature navigation buttons.

    ©2005 Greg Collins. All rights reserved. Licensed to Autonomy Systems, LLC for display on InfoPathDev.com.

    Posted Jun 09 2005, 10:03 AM by Greg Collins with no comments
    Filed under: , ,

  • Keep Track of List Selections

    At some point it might be necessary to keep track of order of the selections a user makes in a single list box or drop-down list box. You can accomplish this by writing your own code in an OnAfterChange event handler, or you can use rules.

    In this task we will create a list box and track the order of the user's selections in another field in the main data source. We will examine both approaches mentioned in the opening paragraph. Let's start by designing a new blank form.

    Create the schema:

    1. Open the Data Source task pane.
    2. Add a Text Field named SelectionsViaRules.
    3. Add a Text Field named SelectionsViaCode.
    4. Add a Text Field named Choice.

    Design the view:

    1. Right-click myFields, and then choose Controls.
    2. Add a carriage return before each text box to place them on a new line.
    3. Double-click the text box labeled Selections Via Rules.
    4. On the Display tab of the Text Box Properties dialog box, select Read-Only check box and the Wrap Text check box, and then choose Expand To Show All Text from the Scrolling drop-down list.
    5. On the Size tab, set the width value to 651 (as shown in Figure 1), and then click OK.


    Figure 1. Adjusting the text box properties.

    1. Make all of the same adjustments to the text box labeled Selections Via Code as you did to the previous text box.
    2. Right-click the text box labeled Choice, and then choose Change To | List Box.

    Populate the list box:

    1. Double-click the List Box.
    2. On the Data tab of the List Box Properties dialog box, add five entries with values for the letters A, B, C, D, and E (as shown in Figure 2), and then click OK.


    Figure 2. Adding the choices to the list box.

    1. Stretch the list box down to reveal all of the entries we just added.


    APPROACH 1 – USE RULES TO TRACK SELECTIONS

    The most convenient approach for the design we have chosen for our form is to use rules to keep track of selections in the list box. The rules will allow us to filter out selections that we don't want to keep track of, such as the default blank selection, and to determine whether a previous selection has already been made so we know whether to add a separator between the selections.

    Add a rule for the first selection:

    1. Double-click the list box.
    2. Click Rules, click Add, and then name the rule Set Selection.
    3. Click Set Condition.
    4. For the first condition, choose Choice, and Is Not Blank from the drop-down lists.
    5. Click And, and then ensure that And, and not Or, is selected in the drop-down list.
    6. For the second condition, choose SelectionsViaRules, and Is Blank from the drop-down lists (as shown in Figure 3), and then click OK.


    Figure 3. The conditions of the Set Selection rule.

    1. Click Add Action.
    2. Select Set A Field's Value in the Action drop-down list.
    3. Click the Select XPath button to the right of the Field text box, select SelectionsViaRules, and then click OK.
    4. Click the Insert Formula button to the right of the Value text box, type the dot character, and then click OK twice.

      The dot character is the XPath abbreviated syntax for the self::node() location. In this scenario it represents the Choice node.

    5. Select the Stop Processing Rules When This Rule Finishes check box, and then click OK.

    Add a rule for additional selections:

    1. Click Add, and then name the rule Add Selection.
    2. Click Set Condition.
    3. For the first condition, choose Choice, and Is Not Blank from the drop-down lists, and then click OK.
    4. Click Add Action.
    5. Select Set A Field's Value in the Action drop-down list.
    6. Click the Select XPath button to the right of the Field text box, select SelectionsViaRules, and then click OK.
    7. Click the Insert Formula button to the right of the Value text box, and then type the following formula (as shown in Figure 4):

    concat(../my:SelectionsViaRules, ", ", .)

    Figure 4. The formula to add an additional selection to the text box.

    1. Click OK five times.

    As this formula might look confusing, what it is doing is concatenating the existing value of the SelectionsViaRules text box with a comma and a space character, and then with the currently selected value of the Choice list box.


    APPROACH 2 – USE CODE TO TRACK SELECTIONS

    If we have chosen a form design that is not conducive to using rules or we need more complex processing capabilities, then we should use code to keep track of selections in the list box. In this task we will only duplicate in code the behavior of the rules from the previous approach.

    Add code behind selection changes:

    1. Double-click the list box.
    2. On the Data tab of the List Box Properties dialog box, click Data Validation.
    3. In the Data Validation dialog box, select OnAfterChange from the Events drop-down list, and then click Edit.
    4. In the Microsoft Script Editor, replace the contents of the OnAfterChange event handler with the following code:

    if(eventObj.IsUndoRedo || "Insert" != eventObj.Operation)
        return;

    var oChoice = XDocument.DOM.selectSingleNode("my:myFields/my:Choice");
    if("" == oChoice.text)
        return;

    var oSelectionsViaCode = XDocument.DOM.selectSingleNode("/my:myFields/my:SelectionsViaCode");
    if("" == oSelectionsViaCode.text)
        oSelectionsViaCode.text = oChoice.text;
    else
        oSelectionsViaCode.text += ", " + oChoice.text;

    1. Choose Save from the File menu, and then close the Microsoft Script Editor.

    Try it:

    With the rules and code in place, let's preview the form. Make the following selections in the list box: A, B, D, A, C, and then E. As shown in Figure 5, both the text boxes keep track of the selections you made in the order you made them. They also include a separator between each selection.


    Figure 5. The order of the list box selections is stored in text fields.

    The text box used to store the user selections does not need to be visible in the view. If you do want to present them to the user, you can use an expression box instead of a read-only text box. You can also use a secondary data source instead of the main data source to keep track of the user selections if you do not have a need to save them as part of the form.

    ©2004 Greg Collins. All rights reserved. Licensed to Autonomy Systems, LLC for display on InfoPathDev.com.

    Posted Jun 09 2005, 06:56 AM by Greg Collins with no comments
    Filed under: , ,

  • Display Only Unique Options in a List

    When list box entries are looked up in either the form's data source or a data connection, you might end up with the user being presented duplicate options. You can correct this, and display only unique options in a list, by using a filter and the appropriate XPath.

    In this task we will create a filtered drop-down list box that presents the user with a unique set of options. Let's start by designing a new blank form.

    Add the controls to the view:

    1. Open the Controls task pane.
    2. Insert a Drop-Down List Box into the view.
    3. Insert a 1 column Repeating Table into the view.
    4. Type Source Values into the header row of the repeating table.

    Populate the drop-down list box:

    1. Double-click the drop-down list box.
    2. On the Data tab of the Drop-Down List Box Properties dialog box, select Look Up Values In The Form's Data Source.
    3. Click the Select XPath button to the right of the Entries text box, and then select group1/group2/field2.

    Filter for unique values:

    1. Click Filter Data, and then click Add.
    2. In the Specify Filter Conditions dialog box, select The Expression from the first drop-down list, and then type the following expression (as shown in Figure 1):

    not(. = ../preceding::my:group2/my:field2)


    Figure 1. Filtering list options to display only unique values.

    1. Click OK four times.

    Try it:

    Preview the form. Add several rows of values to the repeating table, making sure that some of the values are duplicates, and then examine the options in the drop-down list. As shown in Figure 2, the drop-down list only displays unique values as the XPath expression prevented duplicate values from being added to the list.

    Figure 2. The filtered list box displays only unique options.

    InfoPath applies our filter as it steps through the values in repeating table to add them to the list box entries. The XPath expression in our filter checks to see whether a my:field2 value in a previous row (my:group2) is identical to the my:field2 value in the current row. If it is, the value is not added to the list.

    ©2005 Greg Collins. All rights reserved. Licensed to Autonomy Systems, LLC for display on InfoPathDev.com.

    Posted Jun 08 2005, 12:20 PM by Greg Collins with 13 comment(s)
    Filed under: , ,

  • Create a Picture Button

    Buttons that display pictures, with or without a text label, are a common practice in Web pages and are extremely useful in certain scenarios. Picture buttons can often convey much more information to a user than text buttons and do so in less space. But InfoPath has no feature that allows you to create such a button. In fact true picture buttons, which require the use of the button element, are not even supported by InfoPath—they will display in the view but will not function. For its buttons, InfoPath uses the input element with the type="button" attribute. These types of buttons only support text labels.

    Regardless of this, it is still possible to create a picture button in InfoPath using a background picture—though it will be limited in that the picture will not depress, along with the border and any text label, when the button is clicked. This can be especially frustrating if you remove the border and have no text label because the user will have no visual feedback that they have actually clicked the picture button.

    In this task we will create two picture buttons: one with only a picture, and another with a picture and a text label. We will add the pictures as resource files, and then manually modify the view .xsl file to make the buttons display the pictures. Let's start by designing a new blank form.

    Add the button pictures as resource files:

    1. Select Resource Files from the Tools menu, and then click Add.
    2. Locate and select the first picture, and then click OK.
    3. Locate and select the second picture, and then click OK twice to close the Resource Files dialog box.

    Insert and prepare the first button:

    1. Open the Controls task pane.
    2. Insert a Button into the view.
    3. Double-click the button.
    4. On the General tab of the Button Properties dialog box, press Space to clear the label.

      InfoPath requires buttons to have a label, so to effectively remove the label you can use a space character for the label text. If you attempt to just delete the label, InfoPath will present a warning dialog box.

    5. On the Size tab, type the height and width of the picture (in this case 126px and 101px respectively), and then click OK.
    6. Right-click the button, and then choose Borders And Shading.
    7. On the Borders tab of the Borders And Shading dialog box, click None to remove the existing border, and then click OK.

      To display a picture on a Windows XP style button in InfoPath, you must remove the border or the background color, or both.

    Insert and prepare the second button:

    1. From the Controls task pane, insert a second Button into the view.
    2. Double-click the button.
    3. On the General tab of the Button Properties dialog box, type Publish for the label, and then click OK.

      By default InfoPath center aligns the button text label and does not provide a way to change the alignment. We will left align the text label when we edit the view .xsl file.

    4. Right-click the button, and then choose Borders And Shading.
    5. On the Shading tab of the Borders And Shading dialog box, select No Color, and then click OK.

    Modify the view .xsl file to allow the buttons to display pictures:

    1. Choose Extract Form Files from the File menu.
    2. Select a location to save your extracted form files to, and then click OK.
    3. Close InfoPath to release the lock it places on your form files.
    4. Using a text editor, open your view .xsl file.
    5. Locate the first input element, and then add the following properties and values to the end of the inline style:

    ; BACKGROUND-IMAGE: url(Calculator.jpg); BACKGROUND-REPEAT: no-repeat

    1. Locate the second input element, and then add the following properties and values to the end of the inline style:

    ; BACKGROUND-IMAGE: url(Publish.gif); BACKGROUND-REPEAT: no-repeat; TEXT-ALIGN: left; PADDING-LEFT: 20px

    1. Save the view .xsl file, and then close the text editor.
    2. Reopen your form template by right-clicking the manifest.xsf file and choosing Design.


     

    Figure 1. Buttons modified to display a background picture.

    Try it:

    You should now see the pictures in the buttons, as shown in Figure 1. Preview the form and test both buttons to see how they respond. By using a background picture we are able to accomplish our task of creating a picture button in InfoPath. Though the limitations might prohibit your use of them, in the right scenario they can be very useful.

    ©2005 Greg Collins. All rights reserved. Licensed to Autonomy Systems, LLC for display on InfoPathDev.com.

    Posted Jun 08 2005, 11:37 AM by Greg Collins with 4 comment(s)
    Filed under: ,

  • Add a Custom Style Sheet to a View

    InfoPath view .xsl files contain three or four standard internal style sheets, depending on whether you have specified a color scheme. These can be identified by the attributes controlStyle='controlStyle', tableEditor="TableStyleRulesID", languageStyle='languageStyle', and themeStyle='urn:office.microsoft.com:themeBlue'. Never modify any of these standard internal style sheets. InfoPath often regenerates these, which will cause you to lose any changes you make to them.

    You can add your own custom internal or external style sheet to any or all of the view .xsl files in your form template. The best place to add it is after the InfoPath standard style sheets because styles have reverse order precedence, meaning the last value for an identical selector property wins. If both you and InfoPath have specified a value for the border property of the table selector, whichever one appears last will override the value for the same selector property of any preceding style sheet.

    You might use HTML and class selectors when writing your own styles. ID selectors will not be useful because InfoPath will not allow you to place an ID attribute on an element in the XSL. This is because InfoPath autogenerates ID attributes when it creates the view.

    div {...} <!-- HTML Selector: This will work fine. -->
    .myClass {...} <!-- Class Selector: This will work fine. -->
    #myId {...} <!-- ID Selector: Not useful. You cannot use custom IDs on elements -->


    INTERNAL STYLE SHEETS

    Internal style sheets are stored directly in the view .xsl file, just as the InfoPath standard style sheets are. If you want to use the same styles across multiple views you will need to copy the styles from one view .xsl file to another. Let's review the steps to add an internal style sheet.

    Add a custom internal style sheet:

    1. Choose Extract Form Files from the File menu.
    2. Select a location to save your extracted form files to, and then click OK.
    3. Close InfoPath to release the lock it places on your form files.
    4. Using a text editor, open your view .xsl file.
    5. Add the following code just below the last style element:

    <style title="myCustomStyleSheet" type="text/css">
        table { FONT-FAMILY: Courier New; BORDER: solid 1px black; }
    </style>

    1. Save your view .xsl file, and then close the text editor.
    2. Reopen your form template by right-clicking the manifest.xsf file and choosing Design.

    Your custom styles should now be visible in the designer. Internal styles must be updated per view .xsl file, which can create inconsistencies if you forget to update one of the .xsl files. If you want to use the same styles across multiple views, you should consider using external style sheets instead. You can always override external styles for a particular view by using a combination of external and internal style sheets.


    EXTERNAL STYLE SHEETS

    External style sheets exist in separate .css files. They must be added to the form template as resource files as well as referenced in any view .xsl file that will use them. By using external style sheets you maintain a consistent set of styles across all of the views that reference them. Let's review the steps to add a custom external style sheet named myCustomStyleSheet.css.

    Add a custom external style sheet as a resource file:

    1. Choose Resource Files from the Tools menu.
    2. In the Resource Files dialog box, click Add.
    3. In the Add File dialog box, navigate to and select the myCustomStyleSheet.css file, and then click OK. Figure 1 shows the file added as a resource.
    4. Click OK to close the Resource Files dialog box.

    Figure 1. The myCustomStyle.css file has been added as a resource file.

    Link to a custom external style sheet from your view .xsl file:

    1. Choose Extract Form Files from the File menu.
    2. Select a location to save your extracted form files to, and then click OK.
    3. Close InfoPath to release the lock it places on your form files.
    4. Using a text editor, open your view .xsl file.
    5. Add the following code just below the last style element:

    <link href="mySstyle.css" rel="stylesheet" type="text/css"/>

    1. Save your view .xsl file, and then close the text editor.
    2. Reopen your form template by right-clicking the manifest.xsf file and choosing Design.

    Your custom styles should now be visible in the designer. If you added the link element to the view .xsl file before you added the .css file as a resource, or if you later update the resource file, your updates will not be visible in the designer until you save and reopen your form template. They will, however, be visible in the form preview before you save and reopen your form template.

    As long as your internal and external style sheets appear last you should not have any trouble with InfoPath overriding any of your values. However, if a scenario is encountered where a value in one of the InfoPath standard style sheets is still causing you trouble by overriding your value, add the !important declaration to yours. This will force your value to always be chosen.

    table { FONT-FAMILY: Wingdings !important; }

    Finally, it should be noted that inline styles are normally chosen over internal or external styles because they appear last. The !important declaration on an internal or external style will override a value on an inline style unless the inline style also uses the declaration. In other words, the !important declaration also follows the reverse order precedence.

    ©2005 Greg Collins. All rights reserved. Licensed to Autonomy Systems, LLC for display on InfoPathDev.com.

    Posted Jun 07 2005, 01:58 PM by Greg Collins with 14 comment(s)
    Filed under: ,
More Posts « Previous page
Copyright © 2003-2019 Qdabra Software. All rights reserved.
View our Terms of Use.