Sometimes we face such limitations or issues, requirements where we need to do some custom coding in sharepoint. obviously this hampers performance and consumes time in developing forms and testing it.
Simply, i wanted to create a list where i need to implement cascading Dropdowns. most of us are familiar with such scenarios like Country, State, District dropdown are filled up one by one depending on selection of previous dropdownlist. For such simple requirement we may need to invest time in custom code and testing.
Below image can give a better idea about given scenario.
Simply, i wanted to create a list where i need to implement cascading Dropdowns. most of us are familiar with such scenarios like Country, State, District dropdown are filled up one by one depending on selection of previous dropdownlist. For such simple requirement we may need to invest time in custom code and testing.
Below image can give a better idea about given scenario.
Here i wanted to create a list of category, sub-categories and Store. my store list includes look up for category and sub-category which i need to fill-up on the basis of selection of fist dropdown value. lets see how it works. i will try to guide through images as we all know that we hate reading and require faster output.
List Structure:
1. Created a list Category.(List Name:Category)
Image:1
2.Created Sub-Category List (List Name:SubCategory)
Image:2
In this list, I have look-up column 'RequestCategory' for 'Title' in 'Category' list.
3.Created a list where we expect to select cascading dropdown while adding or editing a item into list(List Name:Store).
Image:3
In this case if you observe add, edit form. it will bring all items from 'SubCategory' (2nd list) and not only in which we are interested in by selecting Item from 'Category' (1st List).
Solution:
To resolve this problem we need following (.js) files.
1.jquery click here for latest version
2.jquery.SPServices click here for latest version
add content editor webpart where you want to make cascading dropdown work.
put below script into content editor webpart:
<script language="javascript" src="/sites/Home/Requisition/Shared%20Documents/jquery-1.9.0.js" type="text/javascript"></script>
<script language="javascript" src="/sites/Home/Requisition/Shared%20Documents/jquery.SPServices-0.7.2.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
ExecuteOrDelayUntilScriptLoaded(loadCascadingDDL, "sp.js");
function loadCascadingDDL()
{
$().SPServices.SPCascadeDropdowns({
relationshipList: "SubCategory",
relationshipListParentColumn: "RequestCategory",
relationshipListChildColumn: "Title",
parentColumn: "ItemCategory",
childColumn: "ItemSubCategory",
});
}
</script>
Here in above example parameters are below:
relationshipList: is the list name of 2nd image.(SubCategory list)
relationshipListParentColumn:Parent column from 2nd image(parent look-up column in SubCategory List)
relationshipListChildColumn:The child field name which you want to display on second dropdown(from SubCategory List/ 2nd image)
parentColumn:The field name which you want to treat as a parent column(from list where you want to input data/3rd image)
childColumn:The field name which you want to treat as a child column(from list where you want to input data/3rd image)
all this works for add/Edit item as well and we don't require any custom coding.
Output:
Note: it can fail or will not respond, if you do have space,-,(,) characters in your field name.
Going ahead question may raise in your mind that is it possible to create three level cascading dropdowns? i'll say, why not?
In this case we will repeat same function for next cascading dropdwon.
Three level cascading dropdownlist:
I created a new list 'Request' where i need to refer all above lookups with this list. below is screeenshot for list.
and my output should be:
And my code would be:
<script language="javascript" src="/sites/Home/Requisition/Shared%20Documents/jquery-1.9.0.js" type="text/javascript"></script>
<script language="javascript" src="/sites/Home/Requisition/Shared%20Documents/jquery.SPServices-0.7.2.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
ExecuteOrDelayUntilScriptLoaded(loadCascadingDDL, "sp.js");
function loadCascadingDDL()
{
$().SPServices.SPCascadeDropdowns({
relationshipList: "SubCategory",
relationshipListParentColumn: "RequestCategory",
relationshipListChildColumn: "Title",
parentColumn: "ItemCategory",
childColumn: "ItemSubCategory",
});
$().SPServices.SPCascadeDropdowns({
relationshipList: "Store",
relationshipListParentColumn: "ItemSubCategory",
relationshipListChildColumn: "Title",
parentColumn: "ItemSubCategory",
childColumn: "Request",
});
}
</script>
Thanks!!!
