Hide a Check Box Using Conditional Visibility - Greg Collins
in

InfoPath Dev

This Blog

Syndication

Greg Collins

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.

Comments

 

texastwo said:

Any suggestions on hiding multiple checkboxes that relates to a sharepoint list? All rows have unique ID, but cant construct the logic that looks at the @ID and checks to see if a (boolean) column is 1 or 0? Suggestions? thanks

January 20, 2010 1:56 PM
Copyright © 2003-2017 Qdabra Software. All rights reserved.
View our Terms of Use.