SharePoint Cascading Dropdowns Setup

IMPORTANT NOTE: Do not name anything with special characters, only use alphanumeric characters
and spaces!!!

Step 1 (Not required if performing on IA/SOX SharePoint site)

a. Create Document Library in root of SharePoint Site.
b. Give read-only permissions to all users who access the SharePoint Site

Step 2 (Not required if performing on IA/SOX SharePoint site)

a. Upload the two files below into this library.

jquery-1.4.2.min.js jquery.SPServices-0.
5.5.min.js

b. Right click each uploaded file and select copy shortcut. Copy this to a word document as these
two links will be needed in a later step.
i. If using on IA/SOX SharePoint use the following links:
a) http://sharepoint.navistar.com/sites/navintaudit/DropDown%20Files/jquery-
1.4.2.min.js
b) http://sharepoint.navistar.com/sites/navintaudit/DropDown
%20Files/jquery.SPServices-0.5.5.min.js

Step 3
a. Create a list for each drop down.
i. The highest level drop down should have a list with one field called “Title” with all
possible values for that dropdown.
ii. The next drop down (1st Child) should have a list with one field called “Title” with all
possible values for that dropdown, and a corresponding column named the same as the
list name created in step i. above.
iii. Additional dropdowns should follow the above process except add the additional
column. “Title” column with all possible values for that dropdown, one column named
the same as the list created in step i. above and one column named the same as the list
created in step ii. Above.
iv. For separate (multiple) Child-parent dropdowns the steps i. – iii. should be repeated for
each set of dropdowns as needed.

Step 4
a. Create the document library where the documents will be stored.
b. Go to Settings -> Document Library Settings
a. Under the Columns section create a new column for each dropdown desired as follows:
i. Enter column name, select “Lookup (Information already on this site)” as the
type.
ii. Make sure that “Require that this column contains information” is marked as
“No”. Marking this as “Yes” could potentially prevent the dropdowns from
properly working.
iii. In the “Get Information from:” field, select the corresponding list created in
Step 3 above.
iv. In the “In this column:” field, always select “Title”.
v. Click Ok

Page 1 of 3
 SharePoint Cascading Dropdowns Setup

vi. Repeat for each desired dropdown.

Step 5
a. Upload sample document (to be deleted later).
i. On the edit properties page…
ii. Add the following to the very end of the URL: &toolpaneview=2
iii. Select “Content Editor Web Part” from the right and click add to main at the bottom.
iv. Move this to the bottom of the Web Part by dragging and dropping.
v. Select “Edit -> Modify Shared Web Part” on the Content Editor Web Part
vi. Select “Source Editor” button.
vii. In the window that pops up, paste the following…

<script language="javascript" type="text/javascript" src="[Replace this with the path

obtained in step 2.a or if on IA/SOX Sharepoints, use 2.b.i.a. – including the
brackets]"></script>
<script language="javascript" type="text/javascript" src="[Replace this with the path
obtained in step 2.a or if on IA/SOX Sharepoints, use 2.b.i.b. – including the
brackets]"></script>

<script language="javascript" type="text/javascript">

$(document).ready(function() {

////////////////////////////////////////////////////////////////////
//Select from here
$().SPServices.SPCascadeDropdowns({
relationshipList: "[Replace with info from step 6.a below –
including brackets]",
relationshipListParentColumn: "[Replace with info from step 6.b
below – including brackets]",
relationshipListChildColumn: "[Replace with info from step 6.c
below – including brackets]",
parentColumn: "[Replace with info from step 6.d below –
including brackets]",
childColumn: "[Replace with info from step 6.e below –
including brackets]"
});
//to here to add additional dropdown supports
////////////////////////////////////////////////////////////////////

//Paste here for as many additional dropdown as required.

});
</script>

Step 6
a. Obtain the List GUID by following the instructions found on the site below. Locate the list which
contains the relationship. For the first child dropdown, this will be the second list created
above.

Page 2 of 3
 SharePoint Cascading Dropdowns Setup

i. Finding the List GUID

ii. Take this GUID and paste into code above.
b. In the list identified in step 6a above, find the Internal Name of the column which contains the
“Parent” info.
i. Go to List Settings and click on the column name link. When you get to the column
properties page, check the URL. It will end in something like this:
/_layouts/FldEdit.aspx?List=%7B37920121%2D19B2%2D4C77%2D92FF
%2D8B3E07853114%7D&Field=Potential%5Fx0020%5FValue
The Internal Name is the value for the Field parameter at the end.
ii. Copy everything after the “Field=” so in this case, Potential%5Fx0020%5FValue
a) Take the info copied above and visit this site
(http://www.albionresearch.com/misc/urlencode.php )
b) Paste into Encoded Section and click URLDecode
iii. Copy the text in the Plain field and paste this into the code above.
c. In the list identified in step 6a above, find the internal name of the column which contains the
“Child” info (based on instructions above, this should be “Title”). Follow steps 6.b.i. – 6.b.iii.
above to obtain if “Title” doesn’t work. Paste this name into code above.
d. This is the name of the dropdown you created under the document library in Step 4 for the
Parent dropdown.
e. This is the name of the dropdown you created under the document library in Step 4 for the Child
dropdown.
Step 7
a. Delete file created in Step 5.a

Step 8 (Important that no one deletes your files!) (Not required if performing on IA/SOX SharePoint
site)
a. Edit properties in SharePoint Designer of this document library which contains the files in Step 2
to hide from browser.

Page 3 of 3