How to Create Expandable/Collapsable Sections in InfoPath.
Adding regions that expand and collapse at the click of a button isn’t anything new. We are doing it in html/css/jQuery for a while now using div selectors and the hide()/show() methods of jQuery. But how do we do it in InfoPath?
This article is for InfoPath 2010, but the actual implementation was done on 2007. So the following steps will work in either version.
How do we create something that looks and behaves like this:
Let’s get started.
Setup the Section and Controls
1. Let’s load InfoPath Designer 2010 and start with a Black Form template.
2. Let’s quickly update our title to say InfoPath Expandable/Collapsable Section Demo
3. Now in the section below the title, let’s add a table with a single row and a two columns.
4. In the first column, I’m going to type in a section title, let’s go with Account Details. I’m formatting the text as Bold and setting the font to 12.
5. Click on Table Tools, specifically the Layout tab. Highlight both rows in the table and using the Shading tool, apply a color of your choice.
6. Now with the row still highlighted, click on the Borders button. Change the color tool so you’re using a slightly darker accent to the color you picked above. Change the width to 2 1/4pt. Click on the Bottom Border button.
7. Click OK. I’m going to change the font color for the Account Details text to white. Here is what we’ve got so far.
8. Now just below the table, add a Section control. I like to name all the controls and variables on my InfoPath form, so I’ll call this section AccountDetails. The reason I use a section control is because I’ll need a container to put my controls into, so that it’s easy to specify what to hide and show. Also, it’s an organizational issue for me. If I have a section, any controls I do put in there, show up under that section in the Data Source browser.
9. Ok, so let’s add a new table within our section with 4 columns and 3 rows. We’ll add some controls to this table. Tables are a nice way to format our controls so they present nicely.
10. Now let’s add a few controls. For this example I added a total of 5: firstName, lastName, age, birthDate and country.
Add the Toggle Variable & Buttons
1. Ok now that we’ve got all that setup, we need to add variable that will track the state of our section, is it expanded or collapsed?
2. If you’ve got the Fields browser open, as I do in my above screenshot, click on the AccountDetails folder to highlight it.
3. The Add Field button should become available, click on it and we’ll add a new field for tracking the section state.
4. Let’s give the field a Name of toggleAccountDetails. I recommend you make this descriptive enough so you know which section it’s responsible for collapsing/expanding.
5. Specify a Default value of Off. Click OK.
6. Ok so that’s all setup, now let’s add two buttons to the second column in our Account Details header table.
7. Change the label on each button to read 3 and 6. Change the font for both to Marlett. This will give us the effect of arrows.
8. Double click one of the buttons to bring up the Control Tools for that button. Click on the Shading button. Specify No Fill. Click on the Borders button and select None. Repeat for the other button.
9. Resize both buttons and right align the entire column. Here’s what we’ve got so far:
Setup Conditional Formatting
5. Now click on the Rules button on the toolbar. Not the Add Rule button!
6. The Rules window should appear. Click on the New button and select Formatting.
7. We need to add two different conditions, one to show the button and the other to hide it. The first condition we want is: IF the toggleAccountDetails is set to On, we want to hide this button. This means we’re already in an expanded state, and this button should not be seen anymore.
8. Ok let’s add another formatting rule. IF the toggleAccountDetails is Off, set the button text to black.
9. Awesome, so far so good. Now let’s repeat these steps for the other button, but obviously we want to reverse the settings. So:
10. Ok and finally, let’s add the two conditions we need on the section so that it collapses and expands based on the value of toggleAccountDetails.
11. Click on the AccountDetails section. And click on the Manage Rules button. Click on New -> Formatting
12. Set the following condition: IF toggleAccountDetails is On, do nothing.
13. Click on New -> Formatting again and add a section condition: IF toggleAccountDetails is Off, hide the control.
That’s it! there you have it. Let’s preview and test this out!
Collapsed:
Expanded:
With a little tweaking:
Adding regions that expand and collapse at the click of a button isn’t anything new. We are doing it in html/css/jQuery for a while now using div selectors and the hide()/show() methods of jQuery. But how do we do it in InfoPath?
This article is for InfoPath 2010, but the actual implementation was done on 2007. So the following steps will work in either version.
How do we create something that looks and behaves like this:
Let’s get started.
Setup the Section and Controls
1. Let’s load InfoPath Designer 2010 and start with a Black Form template.
2. Let’s quickly update our title to say InfoPath Expandable/Collapsable Section Demo
3. Now in the section below the title, let’s add a table with a single row and a two columns.
4. In the first column, I’m going to type in a section title, let’s go with Account Details. I’m formatting the text as Bold and setting the font to 12.
5. Click on Table Tools, specifically the Layout tab. Highlight both rows in the table and using the Shading tool, apply a color of your choice.
6. Now with the row still highlighted, click on the Borders button. Change the color tool so you’re using a slightly darker accent to the color you picked above. Change the width to 2 1/4pt. Click on the Bottom Border button.
7. Click OK. I’m going to change the font color for the Account Details text to white. Here is what we’ve got so far.
8. Now just below the table, add a Section control. I like to name all the controls and variables on my InfoPath form, so I’ll call this section AccountDetails. The reason I use a section control is because I’ll need a container to put my controls into, so that it’s easy to specify what to hide and show. Also, it’s an organizational issue for me. If I have a section, any controls I do put in there, show up under that section in the Data Source browser.
9. Ok, so let’s add a new table within our section with 4 columns and 3 rows. We’ll add some controls to this table. Tables are a nice way to format our controls so they present nicely.
10. Now let’s add a few controls. For this example I added a total of 5: firstName, lastName, age, birthDate and country.
Add the Toggle Variable & Buttons
1. Ok now that we’ve got all that setup, we need to add variable that will track the state of our section, is it expanded or collapsed?
2. If you’ve got the Fields browser open, as I do in my above screenshot, click on the AccountDetails folder to highlight it.
3. The Add Field button should become available, click on it and we’ll add a new field for tracking the section state.
4. Let’s give the field a Name of toggleAccountDetails. I recommend you make this descriptive enough so you know which section it’s responsible for collapsing/expanding.
5. Specify a Default value of Off. Click OK.
6. Ok so that’s all setup, now let’s add two buttons to the second column in our Account Details header table.
7. Change the label on each button to read 3 and 6. Change the font for both to Marlett. This will give us the effect of arrows.
8. Double click one of the buttons to bring up the Control Tools for that button. Click on the Shading button. Specify No Fill. Click on the Borders button and select None. Repeat for the other button.
9. Resize both buttons and right align the entire column. Here’s what we’ve got so far:
Setup Conditional Formatting
- 1. Ok now for the fun part, let’s add the conditional formatting!
2. Double click on the first button.
3. Click the Add Rule button. When This Button Is Clicked, Set a Field’s Value.
5. Now click on the Rules button on the toolbar. Not the Add Rule button!
6. The Rules window should appear. Click on the New button and select Formatting.
7. We need to add two different conditions, one to show the button and the other to hide it. The first condition we want is: IF the toggleAccountDetails is set to On, we want to hide this button. This means we’re already in an expanded state, and this button should not be seen anymore.
8. Ok let’s add another formatting rule. IF the toggleAccountDetails is Off, set the button text to black.
9. Awesome, so far so good. Now let’s repeat these steps for the other button, but obviously we want to reverse the settings. So:
- Rule: When button is clicked, set toggleAccountDetails is set to Off.
- Condition 1: IF toggleAccountDetails is Off, hide the button.
- Condition 2: IF toggleAccountDetails is On, set the text to black.
10. Ok and finally, let’s add the two conditions we need on the section so that it collapses and expands based on the value of toggleAccountDetails.
11. Click on the AccountDetails section. And click on the Manage Rules button. Click on New -> Formatting
12. Set the following condition: IF toggleAccountDetails is On, do nothing.
13. Click on New -> Formatting again and add a section condition: IF toggleAccountDetails is Off, hide the control.
Test the Solution
That’s it! there you have it. Let’s preview and test this out!
Collapsed:
Expanded:
With a little tweaking:
Good Article . very much useful
ReplyDeletethank you this was very useful and explained well!
ReplyDelete@Sunil: Thanks
ReplyDelete@Madeline : you are welcome
ReplyDelete