Creating a Multi-Select List Box in InfoPath SP1 Preview

While InfoPath does not include a multi-select list box control, it is possible to create one using the controls present in InfoPath SP1 Preview:

Like all form design decisions in InfoPath, the first thing you need to do is think about the data you want to collect – how do you want the multiple selections represented in the XML saved or submitted by the InfoPath form? Additionally, do you want the selections to be determined at form design time (static), or at runtime (dynamic)?

Here’s one approach that allows either a static or dynamic list of choices by including the choices – and the selection state – right in the form data.

First, create a data structure as follows:

Here are the steps to do this:

1. Go to the Data Source task pane
2. Click the Add button, and add a node named “options” of type Group
3. Add a node under options named “option” of type Group and check Repeating
4. Add a node under option named “selected” with data type True/False (boolean)
5. Add another node under option named “text” (with the default properties)

Note that if you want a very different data structure the rest of these instructions won’t apply directly, but they should get you started down the right path in terms of understanding how to create a complex control out of the primitives that InfoPath provides.

Now you need to build the view – here’s what I came up with, showing the design-time structure:

This is a Scrolling Region as the outer container for the control, containing a Repeating Table for the options, with a Check Box and Expression Box for each option. Here’s how you make it:

1. Go to the Controls task pane
2. Insert a Scrolling Region control, and resize it to the size you want the Multi-Select List Box control to be.
3. Go to the Data Source task pane
4. Drag the option group from the task pane into the Scrolling Region control; when the popup menu appears, select Repeating Table
5. Double-click the Repeating Table indicator to show its properties
6. On the Data tab, uncheck Allow users to insert and delete rows
7. On the Display tab, uncheck Include header, then click OK
8. Inside the Repeating Table, delete the text next to the check box in the first cell (which should say “Selected”), and resize the table cell so that the checkbox just fits within it
9. Right-click the Text Box in the second cell, point at Change To and select Expression Box on the fly-out menu

Next, tweak the layout and borders to make it look professional:

1. Double-click the Scrolling Region indicator
2. On the Size tab, set the Top, Bottom, Left and Right Padding to 0 px, then click OK
3. Select Format | Borders and Shading..., click Outline, then click OK
4. Select the Repeating Table indicator, then go to Format | Borders and Shading..., select None, and click OK
5. Click inside the Scrolling Region – although you can’t see them, there will be several empty paragraphs. Arrow down until the blinking insertion point is in the last paragraph, then hit Backspace to erase them. (If you forget to do this you may see blank lines after the options when you preview the form.)

Finally, if you want to make the selected options stand out clearly, you can use Conditional Formatting:

1. Click the Repeating Table indicator, then go to Format | Conditional Formatting... and click Add...
2. In the third drop-down, select TRUE (so the condition reads “selected” “is equal” “TRUE”)
3. Click the Shading drop-down, and select a background color (e.g. light gray)

At this point, the Multi-Select List Box control is ready to go – but it doesn’t have any options! Maybe those options are specified by your form’s back end data source (a database or web service). But for now, let’s assume the list is static:

1. Go to Tools | Default Values
2. Right-click on the option node, and select Add another option below; repeat this to create as many options as you need.
3. Expand each option, select the text node, and type the option name in the Default value text box at the bottom of the dialog. (To make an option selected by default, select the selected node and then select TRUE in the Default value drop-down.)

That’s it! Now just hit the Preview button on the toolbar to try our your new Multi-Select List Box control.

Note: You can also create ActiveX controls that do XML data binding with the InfoPath SP1 Preview.