Scenario: You want to be able to add items to a list where the values of the “dropdown 1” are dependent on the selected “dropdown 2” value. As in the figure below.
Unfortunately that’s not an out of the box feature in SharePoint, however you can achieve that with a mix of jQuery and Content Management.
It is not complicated and if you follow these instructions, you don’t even need jQuery background to achieve it. The first step is to create 2 lists: one for the parent values (in our sample, Countries) and one for the children values (in our sample, cities)
In the countries list, leave the Title column to be the country name.
In the cities list, leave the Title column to be the city name; Additionally, create a new column called Country which will map to the same values you will enter in Title column of the country list. From now on, let’s refer to this list as a Relationship List.
Now, in the main form create 2 linked columns: One pointing to the Title column in the city list and the other pointing to the Cities column in the Cities list (the relationship list)
In our sample, the column linked to the countries list is called CountryLookup.The column linked to the cities will be called CityLookup. Below you see them and their definitions:
Now comes the part 2, when we will use the jQuery engine to power our solution. You will need to download the jQuery library and the SPServices library.
Place these files in a library which your site has access.
Now, in your main list we are going to modify the way the add new items to the list works. If you never done that, not a problem, you will see that’s very easy. In the list ribbon, choose the option to edit the Default New Form.
The form below will appear. Click add a web part link and place there a content editor web part.
In the content editor, add the code below. Do not add as text, make sure to add as HTML.
Save the form and that’s it. Try to add a new item to the list and you will see that when you select the country dropdown, the cities will be automatically updated to reflect only the cities that match the country.
Unfortunately that’s not an out of the box feature in SharePoint, however you can achieve that with a mix of jQuery and Content Management.
It is not complicated and if you follow these instructions, you don’t even need jQuery background to achieve it. The first step is to create 2 lists: one for the parent values (in our sample, Countries) and one for the children values (in our sample, cities)
In the countries list, leave the Title column to be the country name.
In our sample, the column linked to the countries list is called CountryLookup.The column linked to the cities will be called CityLookup. Below you see them and their definitions:
Place these files in a library which your site has access.
<script language="javascript" src="/js/jquery-1.8.0.min.js" type="text/javascript" />
<script language="javascript" src="/js/jquery.SPServices-0.7.1a.min.js" type="text/javascript" />
<script language="javascript" type="text/javascript">
$(document).ready(
function()
{
$().SPServices.SPCascadeDropdowns(
{
relationshipList: "Cities",
relationshipListParentColumn: "Country",
relationshipListChildColumn: "Title",
parentColumn: "countrylookup",
childColumn: "citylookup",
debug: true
});
});
</script>
Save the form and that’s it. Try to add a new item to the list and you will see that when you select the country dropdown, the cities will be automatically updated to reflect only the cities that match the country.
Cheers,
By Edge Pereira
hi Alpesh. yes, this is a valid option as well, except when the customer's environment does not allow ip.
ReplyDelete