Creating a Custom Filter Dropdown for a SharePoint List Using InfoPath

Almost all of the SharePoint power users and developers are undoubtedly familiar with the web part connectivity feature of SharePoint. This has been an out-of-the-box feature that was available in SharePoint 2007, SharePoint 2010 and is still available in SharePoint 2013. Although, we all find this feature very useful, quick and easy to implement, this might not fulfill our requirements all the time, especially, if the filter dropdown that we need must be in a customized fashion. Let’s take for instance a requirement where user needs to select a Region (E.g. Europe) and then its respective Country should be cascaded in another list. After selecting a Country (E.g. Italy), its respective cities should then be cascaded in another list. And then, upon selecting City (E.g. Rome), the items related to that city is then filtered in another list, for example Hotel names as used scenario in this article.

In this article, I will be drawing attention to 2 solutions that will be beneficial for SharePoint power users or non-developers who have requirements on cascading dropdown list and custom filter dropdown. I am able to achieve this solution with the use of InfoPath Form Designer 2010 with SharePoint 2010. Although this solution is also achievable also using InfoPath Form Designer 2007, however, the steps provided below might not be the same as interface are a bit different.

Below is the summary of the procedures to implement this solution.

a. Create a custom list where the regions, countries and cities will be looked up.

b. Create a custom list where cascading list items will be applied using InfoPath form.

c. Customize a list through InfoPath Form Designer to implement the cascading dropdown list.

d. Create a new list where custom filter will be applied using InfoPath Form Designer.

e. Insert InfoPath form on a page and apply web part connection between the form and the list web part to apply filter.

After complementing the steps, you should be able to achieve the 2 features shown on the screenshots below.

Cascading Dropdown list on a New Form

 

Custom Filter Dropdown

 

a. Create a custom list where the regions, countries and cities will be looked up.

1. Create a custom list with the list name, Hotel-Country-City.

2. Create the columns listed in the table below.

Column	Type
Region	Single line of text
Country	Single line of text
City (Title)	Single line of text

 

3. Enter sample items in the Hotel-Country-City list with the items shown in the screenshot below. Two items per Region will also do.

 

b. Create a custom list where cascading list items will be applied using InfoPath form.

1. Create a custom list with the list name, Hotels.

2. Create the columns listed in the table below.

Column	Type
Hotel Name (Title)	Single line of text
Region	Single line of text
Country	Single line of text
City	Single line of text

 

c. Customize a list through InfoPath Form Designer to implement the cascading dropdown list.

1. On the Hotels list, under the List Tools, click List tab > Customize Form.

2. InfoPath Form Designer is then launched with the Hotels form controls displayed on the page.

3. On the InfoPath Form Designer window, click Data tab > Data Connections > click Add

4. On the Data Connection Wizard > Create a new connection to: > select Receive Data > click Next.

5. On the Select the source of your data > From where you want to receive your data? > select SharePoint library or list.

6. On the SharePoint site details > Enter the location of the SharePoint site: > the URL of the list location is already populated. (E.g. [WebURL]/[List]) > click Next

7. On the Select a list or library: > select “Region-Country-City” list > click Next

8. On the Select fields: > tick Region, Country and City fields > click Next

9. Verify if the list name is displayed on Enter a name for this data connection and click Finish

10. Verify if the Region-Country-City is already added as one of the Data Connections and then Close.

11. Right click Region form control > Change Control > Dropdown list box.

12. Right click again on the Region form control > Dropdown list box properties > on the List box choices section > select Get choices from an external data source.

13. On the Data Source field, select Region-Country-City list.

14. Verify if the Value and Display Name are both Region.

15. Put checkmark on the “Show only entries with unique display names”.

 

16. Click Apply and OK.

17. Do steps 11-13 for the Country form control.

18. On the Entries section click Select XPath button.

19. Expand the “SharePointListItem_RW” and then select Country.

 

20. While Country is selected click Filter Data… button. On the Filter Data window, click Add button.

21. On Specify Filter Conditions window > on the drop down on the left side, select Region.

22. Verify if the dropdown menu in the middle is set to “is equal to”.

23. On the right dropdown menu, click “Select a field or a group…” option.

24. On the Data Source section, click the dropdown menu and select Main.

25. Expand “dataFields” and then expand “SharePointListItem_RW”, select Region

26. On the Fields section select Region. Click OK

 

27. In the Filter Data win​dow, click OK.

 

28. Click OK twice.

29. Do steps 11-28 for City form control. Note that for the City control, the filter is Country = Country

 

30. Click Region form control > Properties tab > Field Properties > Default Value > type in the value “Select…”

31. Do step 30 for Country and City controls.

32. Click Region form control again> Properties tab > Rules section > Manage Rules

33. Click New dropdown > select Validation.

34. Enter “Select” on the Details for: section.

35. On the Condition section, click None link and then set the condition, Region is not equal to “Select…” (Type text…). Click OK.

36. On the Rule type: > select Action

37. On the Run these actions: click Add button > Set a field’s value > Select the Country field and type “Select…” on the Value: section > click OK.

 

38. Do step 37 to set value “Select…” for City control.

 

39. Click Country form control > Properties tab > Rules section > Manage Rules

40. Click New dropdown > select Validation.

41. Enter “Select” on the Details for: section.

42. On the Condition section, then click None link and then set the condition, Country is not equal to “Select…” (Type text…)

43. On the Rule type: > select Action

44. On the Run these actions: click Add button > Set a field’s value > Select the City field and type “Select…” on the Value: section > click OK.

45. Click Save and Publish

46. Test the list new form by adding new item in the list.

d. Create a new list where custom filter will be applied using InfoPath Form Designer.

1. Create a custom list with the list name, Filter.

2. Create the columns listed in the table below.

Column	Type
Region	Single line of text
Country	Single line of text
City (Title)	Single line of text

 

3. Follow the steps in section c, steps 1-46. Note that on step 7, you should select Hotels list.

4. Still on InfoPath Form Designer, select City field > click Properties tab > Manage Rules > click New dropdown > click Action.

5. On the Details for: section, type in “Send data”. Leave the condition to None.

6. Click Add button and then select Send data to Web Part.

 

7. On the Rule Details pop window, click OK.

8. Save and Publish the form.

e. Insert InfoPath form on a page and apply web part connection between the form and the list web part to apply filter.

1. Create a new page and give it a name (E.g. Hotels Filter).

2. Edit the page and click Add a Web Part button.

3. On the Categories column, select List and Libraries

4. On the Web Parts column, select Hotels

5. While page is still in edit mode, click Add a Web Part button.

6. On the Categories column, select Forms.

7. On the Web Parts column, select InfoPath Form Web Part.

8. On the InfoPath Form Web Part inserted on the page, click the link, “Click here to open the tool pane”

9. On the InfoPath Form Web Part properties, on the List or Library section, select Filter.

10. Uncheck the “Show InfoPath Ribbon or toolbar”.

11. Leave the rest of the properties to default and then click OK.

12. On the Hotels list web part menu, click Connections > Get Filter Values From > Filter

13. On the Connection Settings > On the Provided and Consumer Field Name select, “City” for both. Click Finish.

14. Save and Close and Check In the page. Publish the page if applicable.

15. Test the solution by selecting Region and then Country, and then City, and the list should be filtered accordingly.

The above solution doesn’t really entail much of an effort to implement as InfoPath Form Designer is very intuitive software to use. It’s just a matter of getting yourself familiar with the interface on where to find what property or feature and how to use it in SharePoint environment. If this is your first time to use InfoPath, this could be a good start for you discover the power of InfoPath Form Designer with SharePoint. For those who already have experience using InfoPath Form Designer in SharePoint, I hope my solution helps you achieve your requirements as much as how I was able to accomplish mine.

source