manoj´ssharepointblog

SharePoint Blog

InfoPath 2013 Web Browser- Creating Cascading Dropdown Fields with no Code

23 Comments

How many times you require functionality where in based on the selection of parent drop down generates the values to the child drop down.

Examples, selection of Continent fills the Countries drop down.

We can achieve this functionality in INFOPATH Web forms without writing a single line of code.

Before you read on, I must tell you that this approach only works if you have the Enterprise version of SharePoint 2013 or the forms server. You will also need to have InfoPath 2013 Designer installed on your client machine.

Below Example shows 2 dropdowns, the first dropdown contains the Continents and the second dropdown contains the countries of the selected continents.

For the below demo, I have created 2 custom lists in SharePoint.

  • Custom List 1
    • Name: Continent
    • Column: Title (Type Single Text, which comes Out of Box with the custom list)
    • Custom List 2
      • Name: Country
      • Column: Title (Type Single Text, which comes Out of Box with the custom list)
      • Column: Continent(Type: Lookup, Get information from:  Continent, Column: Title)

Step1:

Add 2 dropdowns to the form, Let´s name the dropdown´s as Continent and Country, Should look like the below screenshot.

Image

Step2:   Now create 2 data Connections for both the dropdowns.

Creating Receive Data Connection for Continent:  Click on Data Connection

Image

Click on Add

Image

Select create a new Connection

  • Receive Data and click Next

Image

Select Source of your Data:

  • Select SharePoint Library or List as mentioned in the below screenshot.

Image

Provide URL of the Continent Lists

Image

Select the Continent List

Image

Select Title, Followed by Next, Next and Finish.

Image

Create a similar Receive Data Connection for County, the only difference is instead of selecting only Title, Select Title and Continent Column as well.

Image

Step3:

Assigning above created data connections to the dropdowns

Right click on the Continent dropdown and select the Drop-Down List Box Properties…

Image

Set the properties as shown in the below screenshot.

Image

Similarly Set the properties of the Country Dropdown as shown in the below screenshot.

Image

Now we need to make few adjustments to get the filter of the data when a continent is selected.

In the dropdown properties of the Country, select Image  of the entries section (i.e. Image).

Select Filter Data

Image

Click Add

Image

And Select Continent Is Equal to Select a field or group and select the continent from Main

Image

Click on OK. Close all the popups by clicking ok on all popups.

Give full trust to the form and click F5 to see the demo

You will observer you have a cascading dropdown functionality in the INFOPATH forms without writing a single line of code.

Example

Image      Image

There is one tiny issue! The country drop down does not clear itself. Therefore if you pick another continent, the old country will stay the same as the one you had picked in the earlier pick of the city.

Step 4:

Select the Continent dropdown and select the Manage Rule Image

Image   Image         Click on New and select Action

Select the Set the Field Value as shown in the below screenshot.

Image

Set a field’s value, and then pick Country for the field. Leave the Value blank.

Image

Click on Ok.

Hit OK , and you are done!

Advertisements

23 thoughts on “InfoPath 2013 Web Browser- Creating Cascading Dropdown Fields with no Code

  1. Thanks for these steps, they worked great. One question I have is regarding using multiple filters in this process. Right now I have 3 levels of cascades; Consultant, Client, Project. Client is based on Consultant, so that filter is easy, however Project should be based on a combination of Consultant and Client. When I put Consultant=Consultant and Client=Client, I only get data when there are more than one project but the data is not right and does not change according to the client changing. The end result I am looking for will be the ability to populate a number of other fields (project start date, project end date, manager, etc) based on the combination of Consultant, Client and Project.
    Any ideas?

    Thanks

  2. Pingback: InfoPath 2013 Web Browser- Creating Cascading Dropdown Fields with no Code | Share your knowledge

  3. Great walk through. I got it to mostly work how you laid it out, but my sub-category list (country) will only select the last option from the filtered drop down list no mater what I choose. Any ideas?

    • Andy-were you able to get an answer to this? I’m having the same issue. Thanks!

      • can you provide me more information what you are looking for

      • I was able to find my answer on another blog. Basically, what happens is with the directions above, when you choose an item in the 2nd column and then move to another field, the choice you made changes to the last item in the filtered drop down list. So, if you chose Algeria but Zanzabar was the last item in the filtered dropdown, when you move to another field, your choice would change from Algeria to Zanzabar.

  4. Hello, this worked very well for me, thank you for the tutorial. In place of your continents example i created a list of offices, and instead of countries I listed contact people. When in the form, everything works great.

    I do have an issue when i look at the form data in a sharepoint view. In there, office are listed as thier ID number, but i would rather the name in the title field be shown instead. I suspect this is because we entered d:ID as it’s field value. Changing the value to d:Title caused the cascading to no longer work, so that isn’t an option.

    Any suggestions for how to show the office name when reviewing the results in a sharepoint view?

  5. Forget my question – I figured it out….. The solution is that both entries in the properties of the Country Dropdown “Value” & “Display Name” should read “d:Title”

  6. Hi, I’ve created a form with 2 dropdowns that I followed the instructions here. It’s working except for one problem, both dropdowns are showing blank when form is first opened. If I select from the 1st drop down, the 2nd dropdown is updated but still showing a blank row. I have to click the down arrow and then the filtered correct item is below the blank row.

    I checked the SP13 lists but I don’t see a blank top row. These 2 lists data are imported form Excel. Any way to get rid of that top blank row?

    Thank you.

  7. Hi, is it possible to use this in a content type like a Word template.
    I want to select location 1 and use 4 variables like street and zipcode and not want to select them semperly.

    Connect a list to a content type is not possible for me.

    Cant this me done?

  8. Thanks so much for this, exactly what I was looking for!

  9. Thanks so much for this tutorial. Just a quick question, will this work with fields that are lookups from other tables?

  10. Hi,
    Your instructions are great but I need clarification on STEP 1. When you add two drop-down menus to the form, what form are we adding them to? I mean, should I first go to one of the SharePoint Lists I’ve created then modify the list via InfoPath — if so, which one?

  11. Hi. Does this work on O365/SharePoint 2013?

  12. very good and impressive tutorial , persons like you will be appreciated , Knowledge is Power and Power is Sharing

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s