Expand/Collapse Browser Compatible InfoPath Forms

Do you have an InfoPath form that is browser compatible that needs to be trimmed down? Hide some sections with this method of creating expand/collapse, +/- , and hide/show, option buttons within InfoPath forms limited to browser compatibility.

1. Execute InfoPath 2007 and Design a Form Template…

2. For this example we will design a new blank Form Template

3. After you create the blank template insert a Table with Title by clicking on the option in the Layout Design Tasks pane. If you do not have the Design Tasks pane open click View >Task Pane

4. Perform the necessary edits to the layout table to suit your needs; change title, add necessary comments, change color scheme, etc.

5. Add a section the the form by dragging and dropping the Section control from the Conrols task pane into the appropriate cell.

6. Add an Option Button with 2 buttons inside the Section (we want the control inside the section) and rename the fields to Hide/Collapse or whatever you like.

Here’s what the example looks like:

7. Double-click the Option Button control to display its properties and rename the Field Name to “SectionDisplay” or something similar.

Note: For this example we will leave the Value when selected field names at “1″ and “2″ you may want to change these values.

8. Drag the buttons outside the section. This is an important step because we want to leave our Option Button control’s Data Source within the Section 1 grouping.

Note: If you left the button within the section when a user selected the Hide option the section would disappear and take the Show control with it.

9. Now it’s time to place a Conditional Rule on the section we want to hide. Double-click on the “group 1″ section (default name) to bring up the Section Properties window.

10. Click the Display tab > Conditional Formatting > Add… to display the Conditional Format window

11. Set the If this condition is true values as follows: “Section Display is equal to 2″ and check the Hide this control under Then apply this formatting

Note: Be sure to select Type text… If you select Type a number… and entered “2″ this is incorrect unless you change the default Option Button’s default data type from text to integer.

12. Preview the form to test if our Option buttons now show and hide the section. If all steps were performed correctly it should work!

Final tips: The Option button control is just used for this example, although I have not used this method with a button or checkbox it should work the same. You may want to have a button selected by default so the form is either shown or hidden depending on your preference. Also, the hide option should only need one conditional format to work correctly, two are not needed.

Related posts:

1. Easy Masked Input Forms I recently did some freelance work that required using masked forms on common field inputs: credit card information, phone numbers, dates, etc. To satisfy this request I used jQuery and meioMask – a jQuery plug-in. First off, click here to view the working demo or click the image below: To create a form similar to [...]...
2. SharePoint Browser Error Solution: Datasheet View Error Problem description: If a site has a document library using the Datasheet view a user will receive the following error when trying to navigate to the site. “The list is displayed in Standard view. It cannot be displayed in Datasheet view for one or more of the following reasons: A datasheet component compatible with Windows [...]...
3. InfoPath Status Report Form for SharePoint Managers need to know what their employees are working on each week, any road blocks they are facing, and which tasks were completed. The best way to collect this information is through a Status Report. The following template is a simple Status Report form that is browser compatible. Below is a preview image of the form. [...]...
4. Custom SharePoint List Icons Recently I was asked by my manager to create a dashboard for executive members to quickly see the progress of active projects. She explained to me that she wanted a “priority level” indicator similar to that of the KPI in a basic table structure. The color of the indicator would change depending on the status [...]...
5. How to remove the “title” column from a SharePoint list Have you asked yourself the question: How do I remove the ‘title column’ from a Sharepoint list?  It can be annoying trying to figure out how to remove this column from default lists.  Often, site admins want their audiences to click on “New Item” in a Sharepoint list and not have to fill out the [...]...