Populate a Drop-Down List Box via Code - Greg Collins
in

InfoPath Dev

This Blog

Syndication

Greg Collins

Populate a Drop-Down List Box via Code

NOTE: This article was written for the original InfoPath 2003, which did not support secondary data sources. You can still use code to populate a drop-down list box, but the better approach is to have the drop-down list populate from a secondary data source, and then use code to add nodes to that list in your secondary DOM.

- - - - - 

Populating a drop-down list box in InfoPath is easy, but you might need to something more complex than the designer allows. This is possible with some work on your part. Although very powerful, populating a drop-down list box via code requires that you use a Preserve Code Block.

In this task we will populate a drop-down list box via code. The drop-down list box will exist inside of a section that will be used to create the Preserve Code Block. Let's start by designer a new blank form.

Design the view:

  1. Open the Controls task pane.
  2. Insert a Section into the view.
  3. Insert a drop-down list box into the section.

Write code to return a list of options:

  1. Press ALT+SHIFT+F11 to open the Microsoft Script Editor.
  2. Insert the following function:

Java Script:
function PopulateDropdown(sSelectedValue)
{
    return "<option value=''>Select...</option><option value='Test'>Test</option>";
}

C#:
public string PopulateDropdown(string sSelectedValue)
{
    return "<option value=''>Select...</option><option value='Test'>Test</option>";
}

  1. Save your code, and then exit the Microsoft Script Editor.

Modify the view .xsl file to create a Preserve Code Block:

  1. In the InfoPath designer, choose Extract Form Files from the File menu.
  2. Select a location to save your extracted form files to, and then click OK.
  3. Close InfoPath to release the lock it places on your form files.
  4. Using a text editor, open your view .xsl file.
  5. Locate the xsl:template that contains your drop-down list box.
  6. Replace the mode="_nn" attribute with mode="xd:preserve" for both the xsl:template element and its associated xsl:apply-templates element.

The mode attributes will have matching values in both the xsl:template and xsl:apply-templates elements.

  1. Replace all the option elements listed for this drop-down list box with the following code:

<xsl:value-of select="xdExtension:PopulateDropdown(string(my:BoundField))" disable-output-escaping="yes"/>

Where my:BoundField is the same value as that of the xd:binding attribute on the select element.

  1. Save the view .xsl file, and then close the text editor.

Try it:

  1. Launch your modified solution by double-clicking the manifest.xsf file.

In the InfoPath editor you will see a drop-down list populated with Select... and Test.

  1. Choose Design This Form from the Tools menu.
  2. In the InfoPath designer you will see a red box indicating your Preserve Code Block.

You can now modify the PopulateDropdown function to process whatever information is required to populate your drop-down list. The string returned must not contain any XSL code, but only contain properly formatted HTML with option elements.

You will need to use the sSelectedValue parameter to identify which of the option elements is the currently selected option. You must make sure that, in your code, you set the selected="selected" attribute on the correct option element. Otherwise the drop-down list in the view will never show the selected value, but will instead always revert back to displaying the first option in the list.

This technique is demonstrated in my example forms: Fully Editable Drop-Down List Box and Moving Items Between List Boxes.

©2004 Greg Collins. All rights reserved. Licensed to Autonomy Systems, LLC for display on InfoPathDev.com.

Published Jul 12 2004, 12:31 PM by Greg Collins
Filed under: ,

Comments

 

sirwally said:

Actually, you can populate a drop-down list via code without using a dreaded preserve code block.

Say, for example you want a list of sections in your form that will be populated programatically.  You can achieve this by doing the following:

1) Create an XML (sections.xml) file that contains two identical, empty nodes within the root node.  i.e.

<sections>

   <section/>

   <section/>

</sections>

2) Import the XML file as a resource file.

3) Create a data connection to resource file added in Step #2.

4) Add a drop-down to the form and bind it to the data connection created in Step #3.  Select the repeating element -- there should only be one (sections in this example).  If InfoPath complains about not finding a repeating element, you didn't complete Step #1 correctly ;-)

5) Write code that modifies the DOM of the data connection to add/remove/update elements as needed.

June 22, 2007 12:37 AM
 

sirwally said:

In Step #4 above the repeating element should have been section, not sections.  Also, to clarify, in Step #5 the elements you would add/remove/update would be section elements (which I guess was probably obvious :-).

June 22, 2007 12:42 AM
 

skrile said:

sirwally...this looks very interesting.  However, I'm a bit confused about the "code" that could be written to add/remove/update elements.  Do you have an example?

July 19, 2007 12:29 PM
 

mlansdaal said:

skrile - If you add a secondary datasource above as sirwally suggested, IP will create a secondary dataconnection called "sections". In my case, it was called "TARGETS".  You will need to decide where your code is going to run that will manipulate the contents of that data source (e.g., at form load, on context change, etc.).

//Get the data source and clear out the child nodes

IXMLDOMDocument targetsDoc = thisXDocument.GetDOM( "Targets" );

IXMLDOMNode targetsNode = targetsDoc.selectSingleNode( "/TARGETS" );

targetsNode.childNodes.reset();

//Create some new child node values and add to the datasource

IXMLDOMNode t1Node = targetsDoc.createElement( "TARGET" );

t1Node.text = "1";

IXMLDOMNode t2Node = targetsDoc.createElement( "TARGET" );

t2Node.text = "2";

targetsNode.appendChild( t1Node );

targetsNode.appendChild( t2Node );

The above code caused my dropdown list to display choices of "1" and "2".

July 26, 2007 2:29 PM
 

MonkeyCMonkeyDo said:

How would you do this using an ADO.NET connection in the code behind(C#)  in InfoPath 2007??

Is there a way to populate a drop-down list box strictly using code?

Thank you for your expertise!

November 28, 2007 1:43 PM
 

Greg Collins said:

I added a note to the beginning of this article to identify that this method is no longer recommended. It was written before secondary data sources were available.

Secondary data sources are the correct approach to filling in drop-down options now.

January 15, 2008 9:56 AM
 

10basetom said:

On a related note, I noticed that when you populate a drop-down list with a data connection from a SharePoint form library, the first item of the drop-down list is always empty. Is there a way, through code or other means, to make the first item display "Select..."?

January 28, 2008 1:16 PM
 

Bind DropDown to Views | keyongtech said:

Pingback from  Bind DropDown to Views | keyongtech

January 21, 2009 4:59 PM
Copyright © 2003-2018 Qdabra Software. All rights reserved.
View our Terms of Use.