How to create dynamically populated dropdown in an InfoPath Form

Purpose

Form should have a dropdown, in which the values are dynamically loaded according to the user’s selection in the preceding control. Solution should avoid writing and maintaining complex DOM manipulation script. Populated values should come from an external source like a Database table of and XML file.

Sample Scenario

User is provided with a Country dropdown. As per his choice, the City dropdown should get populated with Cities under the selected country.

Solution

An external data source will be created out of a relational data table or an xml file. Entries for the City dropdown are filtered using a defined filter.

Step by step walk-through

  1. Create an xml file as following and save it as Options.xml

    <Options>
    <Country CountryID="US" CountryName="United States">
    <City CityID="LAX" CityName="Los Angeles" />
    <CityCityID="SEA"CityName="Seattle"/>
    </Country>
    <CountryCountryID="CA" CountryName="Canada">
    <CityCityID="WPG" CityName="Winnepeg" />
    <CityCityID="ONT" CityName="Ontario"/>
    </Options>

  2. Open a new blank InfoPath form in design mode
  3. Save it as Country-City.xsn
  4. Go to Tools/DataConnections/Add/RecieveData/XMLDocument/
  5. SelectOptions.xml file
  6. Check‘Automatically Retrieve Data’ and click Finish.
    Note: This will help you not to carry the Option.xml file anymore.
  7. Create two Dropdown boxes, named ddCountry and ddCity
  8. Double-click on ddCountry
  9. Check ‘Lookup values in a data connection…’
  10. Select Options in the Data Connection dropdown.
  11. Click on Entries, select Country, and click OK
  12. Select Value as CountryID and Name as CountryName
  13. Apply/OK
  14. Double-click on ddCity
  15. Check ‘Lookup values in a data connection…’
  16. Select Options in the Data Connection dropdown.
  17. Click on Entries, select City, and click Filter Data/Add
  18. select City, is equal to, ddCountry (from Select a field or group/Main)
  19. Press OK 3times
  20. Select Value as CityID and Name as CityName
  21. Apply/OK
  22. We’re done..! Preview the form..

 

Note: If you would like to publish this form to public, you need to remove the security restrictions.

  • Go to Menu/Tool/Forms Options/Security
  • Uncheck “automatically determine security..”
  • Check Full Trust option
  • Check ‘Sign this form” and create or use a certificate.

Install this certificate in the client computer where you use this form.

Conclusion

This is a simple solution helps to avoid DOM manipulation script, which is complex.

Download the sample