InfoPath Forms – Minimize and Maximize Sections or Collapsible Sections

Recently, I have been working on a project, in which we used InfoPath extensively for designing various forms. Many of the forms has repeated information which we categorized as Header, Footer, Tracking Details etc. InfoPath template parts helped in this aspect.

Having solved that, the form still looks a little bit huge with many fields most of which are pre-populated and the user doesn’t have to worry about them. So, I thought having them collapsed initially by default and provide the user a way to maximize and minimize(collapse) the various sections would solve this issue. Something like below. See the screenshots.

At first thought, we go about searching for those tiny buttons to use for the maximize and minimize, instead there is a tricky way to do this which Microsoft uses in many windows applications. Just drop 2 buttons and put the label as 3 and 6. Now, selecting the buttons, change the font to “Marlett”, boom!, you will see the buttons changed to nice tiny triangular buttons. To make it even better, right click the button, select border/shading and select None for outline. This will merge the buttons with the background. See the below screen shots:

  1. Just put those 2 button in a single row table and place the table above the section, you want to minimize/maximize.
  2. Add a boolean field to the datasource lets say, sectionToggler. Set default to false.
  3. Open the conditional formatting settings for the section: add rules to hide it if sectionToggler = false and show it(not hide) when sectionToggler = true.
  4. Add rules on the buttons: to set the sectionToggler value to true or false depending on the button.
  5. Open up the conditional formatting settings for both the buttons and add rules to hide it based on teh sectionToggler.

More links:

About these ads

16 Responses

  1. […] by platinumdogs on July 9, 2008 There’s a cool article here describing a nice way to achieve expanding or collapsible sections in InfoPath […]

  2. Nice trip.. Thanks!

  3. Great healp to me… I searched for this solution and found more than 10 articels, which could not be as easy to understand as your article.

    This one of the very few times I really could solve my problem with an article right away.

    THANK YOU

  4. Hi,

    I have a small issue that i need to figure out in infopath2007 forms.

    I have today’s date as one of the fields and account type as “a” and “T”. so the third field is expiration field.

    Now, if the user chooses “a” then expiration date should be the result of “today’sdata” plus 6 months and if it is “T” then expiration date should be “today’s date” plus 1 year.

    Can you please help me with the solution. Thank you

  5. Add Rules on the accountType field and if its value = “a” then select ‘set a fields value’ and set the expiration date field value to:
    addDays(dateField, 183) //For 6 months
    or else
    addDays(dateField, 365) //For for 1 yr

    You should use the Insert Function button in the set a fields value window and use the date time functions.

  6. Thank you for the reply.

    Do I have to add two rules to the “account type” in order to get these condiitons work?

  7. Yes, add 2 separate rules.

  8. Great!!!!!!! Got it.

    Thank you very much.

  9. Hi,
    Could you please clarify the set described as “Now, selecting the buttons, change the font to “Marlett” “?

    How do you change the font?

    • I meant: Using your mouse select the button then change the font using the Formatting Toolbar change the font to Marlett. If your formatting toolbar is not seen, go to View menu , select Toolbars and then select ‘Formatting’.

      You can repeat the same for the other button.

      Hope you got it.

      -srinivas

  10. Hi! I was surfing and found your blog post… nice! I love your blog. :) Cheers! Sandra. R.

  11. Nice trip.. Thanks!

  12. How did you left justify the text of the left button? I can’t seem to find a setting for that. Currently it’s center justified and I can’t switch it.

  13. If you have a InfoPath 2010 form where you have to show/hide sections or bring in Accordion effect on your customized form, please use this approach as explained in below link:

    http://kalirajanl.wordpress.com/2012/03/09/collapsible-sections-in-sharepoint-2010-customized-forms-3/

  14. The button for collapsing the section does not work in a form in Infopath 2010. When I click on the 6 button (downward black triangle) the section does not collapse and the button does not hide, the 3 button does show up thouhg.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: