9

MS Word 2013 has this great feature. You can define sections of a document with Headings. You make certain lines headings by highlighting the text and choosing the Heading 1 Style from the ribbon. Once you've done this, you get this wonderful effect that whole sections can be shown or hidden with a toggle.

ON

enter image description here

OFF

enter image description here

How can I replicate this functionality in InfoPath Designer 2013?

I've done a lot of digging, but my Google Fu has failed me here. I see a lot of forum fodder that has to do with conditional formatting, hiding/showing sections based on some criteria like who the user is or load-rules, but I just want the user to simply click something (like a button or the section heading itself) to show or hide a section. Is this possible? Further, is it possible from within InfoPath Designer 2013, or will I have to use some other tool like Visual Studio?

20

Resources

Windows 7 OS, InfoPath Designer 2013, Character Map, Notepad

Preparation

In InfoPath Designer, we want to make sure we can see the panes for Fields and Rules on the left. To show the Fields task pane, click the Show Fields button at the very left of the DATA tab on the ribbon.

enter image description here

To show the Rules task pane, click the Manage Rules button at the far right of the HOME tab on the ribbon.

enter image description here

In addition to InfoPath Designer, open Notepad and the Character Map as well. In Windows 7, both are in Accessories. Character Map is one folder deeper in Accessories > System Tools.

enter image description here

Pick Out Your Button Symbols

The toggle button which will show/hide a section is just a normal character in a special font like Webdings. I’ll be using the Webdings font with character 0x34 enter image description here for when the section is currently being shown and 0x36 enter image description here for when the section is hidden. Pick out the symbols you want then determine what key to actually type to get that symbol.

In Character Map, choose the font and symbols you want to use. With the symbol highlighted, click the Select button. Do this for both symbols, then click the Copy button. Paste in Notepad to get the keys you will type in InfoPath to get these button symbols.

enter image description here

For this example, note to get the symbol I want to use when the section is shown I type a “6” in InfoPath and make the font Webdings. For the other symbol I’ll type a “4”. This will make more sense later.

Creating the Elements

The elements that need to be created in the form using InfoPath Designer are a field, button, section, and a few rules to govern the behavior we want.

Field

First, create the field. Click Add Field at the bottom of the Fields task pane under Actions.

enter image description here

Choose a name that makes sense like HideShowButtonText. This is exactly what this field is going to be, the text for the button which toggles hiding or showing a section. Leave Type and Data type as default (Field (element) and Text (string) respectively). Set the Default value to 6. Leave everything else alone and click OK.

Button

Starting from an empty form editor, place a button. You can achieve this by finding the Button option under Controls in the middle-left of the HOME ribbon.

enter image description here

Just click it. Once you’ve done so, you can optionally get rid of the border and color of the button, so that we just see the symbols chosen at the beginning. If you want to do this, right click the button and choose Borders and Shading. Under the Borders tab and under Presets, simply click None; under the Shading tab, simply choose No color. Hit OK.

Right click the button and choose Button Properties. Under the first tab, General: Leave the Action set to default (Rules and Custom Code). Make the ID something that makes sense like hideShowButton. The Label is what’s most important. We’ll set the Label to the Field HideShowButtonText we created earlier. To do so, click the Insert Function button next to Label.

enter image description here

In the Insert Formula window, click the Insert Field or Group button at the bottom left. This will bring up the Select a Field or Group window. Choose the HideShowButtonText field. Hit OK, OK, OK. Now you see a button that says “6.” Once again right click the button to bring up the text formatting dialog. Change the font to Webdings and the size to what you want.

enter image description here

Now we have a button that makes sense.

enter image description here

Section

In the editor space a few times or hit enter for a line break after the button and then insert a section control (same way as inserting the button control, except choose section). Type something in it (like “This is my section to be shown or hidden”) so that we can, so that we can test/witness the show-hide functionality later.

enter image description here

Rules

Section Rule

There are three rules needed for the desired behavior. One rule is applied to the section, and two are for the actual button control. Since we just created the section, let’s set its rule while it’s handy.

Select the Section by clicking where it has a little tab at the bottom left (and says Section). In the Rules task pane, click New and choose Formatting. Name the Rule something that makes sense like Hide Section. This is what the rule is going to do: hide the section based on the condition that the hideShowButton’s value. Under Condition click where it says None to set the condition. The condition we want is:

enter image description here HideShowButtonText is equal to 4.

To get 4, click the dropdown and select type text to make that part editable and enter 4. We want 4, because that’s what the chosen down arrow symbol is in Webdings font. Click OK.

Now, under Rule type check the Formatting box which says Hide this control.

The final result should look like this:

enter image description here

Button Rules

The next rules will be set on the button itself. Action rules set for a button operate like this: the button is clicked; it looks for some condition(s); it performs some action(s). The condition(s) and action(s) are set by you of course. We will set one rule which changes the button’s value 6 to 4 and a second rule to do the opposite.

The “show” rule which changes the button’s value from 6 to 4 (down-arrow to right-arrow, show to hide) will be set by first clicking on the button control. In the Rules task pane, click New and choose Action. Name the rule something that makes sense like From Down-Arrow to Right-Arrow. This is exactly what this rule will do, see that the value of the button is currently a down-arrow and change the value to a right-arrow. Under Condition, click where it currently says None in blue. The condition we want is:

enter image description here HideShowButtonText is equal to 6.

Hit OK.

Now we want to set an action. Next to Run these actions, click the Add button. Choose Set a field’s value. For field click the field selector button to the right, then choose HideShowButtonText from under myFields in Select a Field or Group window. Hit OK. In value, just type 4. Hit OK.

At the bottom of the Run these actions section of the Rules task pane, click the check box for Don’t run remaining rules if the condition of this rule is met.

The result we want is this:

enter image description here

Next, we’ll create the rule which will do exactly the opposite, change the button’s value from 4 to 6. With hideShowButton still selected, click New in the Rules task pane. Choose Action again. Name the rule something like Right-Arrow to Down-Arrow. Set the Condition to HideShowButtonText is equal to 4.

enter image description here

Next to Run these Actions, click Add, then click Set a field’s value. For Field choose HideShowButtonText. For Value type 6.

enter image description here

Hit OK. At the bottom of the Run these actions section of the Rules task pane, click the check box for Don’t run remaining rules if the condition of this rule is met.

The result we want is this:

enter image description here

Results and Considerations

This concludes the set up. To test the show/hide functionality of the form, click Preview at the very right of the HOME ribbon. That will pop up a fully functioning InfoPath Filler form based on what’s saved. It will open the button in the down-arrow position and a section to the right or under it which says “This is my section to be shown or hidden.”

enter image description here I've added a Heading for clarity

Click the toggle button, which will cause it to change to the right-arrow position and hide the section.

enter image description here

One thing you might want to consider is whether you want the section shown or hidden by default. Here we’ve set the section to show up when the form is opened. To make it so that the section is hidden by default, change the default value of the HideShowButtonText field from 6 to 4.

Addendum

Fonts

Picking the font/symbols is more limited than this would initially have you belief. Testing later, I found that the characters chosen didn't render in Webdings font in any Firefox or Safari. Neither did symbols in any of the Wingdings fonts render correctly. They worked fine in IE, but not in other browsers.

My workaround was to instead choose a web safe font Times New Roman, choose the arrow characters from that font in character map to copy and paste. Those work across the board in all three of the aforementioned browsers.

Kind of weird because as far as I understand, Webdings, Wingdings, Wingdings 2, and Wingdings 3 are all supposed to be supported by Firefox and Safari . . . maybe it's something to do with SharePoint in combination with browsers other than IE?

Toggle Defaults - Broken Arrows

The other thing that's frustrating is that the arrows don't "stay put." Say that all sections are displayed so all arrows are down-facing. Then say I hide the first section and that header arrow goes right-facing, that's expected/correct. But then if I hide a different section, the first section's arrow will revert back to down-facing even though its section is still hidden and I haven't touched that arrow.

Basically toggling any one section will revert every toggle back to its default value. Even though "Don't run remaining rules if the condition of this rule is met" is checked for all of the buttons' rules. In the InfoPath Preview this incorrect behavior doesn't occur, but it does occur in all three tested browsers IE, Firefox, and Safari. All this work and it ends up looking sloppy/buggy anyway . . .


Khan, Suhaib. "Toggle section from within InfoPath form." SharePoint Minds. 28 Jul 2012. Web. 9 Oct 2014. http://isharepoint2010.blogspot.com/2012/07/step-for-creating-form-add-new-field.html.

  • Can you please add the implementation details to your answer? It will make your answer stay helpful even if the link breaks in the future – Robert Lindgren Oct 6 '14 at 19:27
  • 4
    Sorry about that, Robert. I didn't want to just copy and paste, because I didn't want to plagiarize. So today I wrote up full documentation of my own using what I did. If you want, I can upload the actual .xsn file. I'd be happy to share it as a template. – adhoclobster Oct 9 '14 at 18:41
  • 1
    Outstanding! Full dedication in sharing and giving. Bravo. – Mike Rooker Aug 17 '17 at 6:24
0

Regarding the broken arrows issue listed in your addendum, here are a few issues you might look into (although I don't think these are the problems if your form is operating properly in preview mode).

  1. Did you create different toggle (show/hide) fields for each button / section combo?

  2. If you copy and pasted each button, did you make sure to change the label formula for the button to the correct toggle (show/hide) field?

If not, you might be using the same field to update the label on multiple buttons. If this is the case, every time you click any of your buttons it would change the labels on all of your buttons, since every button action updates the field, and that field updates every button's label.

Hope that helps someone, even if that is not the problem you run into while testing in your browser.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.