Cascading Dropdowns on Document Librarary forms: Is it possible?

Mar 16, 2010 at 5:09 PM

Hi all,

I've been looking through the literature for what appears to be an amazing addition to the jQuery library and the $().SPServices.SPCascadeDropdowns item has taken my fancy.  I've not had a chance to test this yet (I'm away from my sandbox currently) but I'd like to ask if this can be used with Document library forms as well as lists?  This would be a perfect addition to something I'm currently working on.

Many thanks & kind regards

Coordinator
Mar 16, 2010 at 5:14 PM

Absolutely. The functions here work with any list.  Let me know how it goes!

M.

Mar 17, 2010 at 9:39 AM

Hi SympMarc,

First off, many thanks for both the swift response and the work thus far.  Just to be sure, I'll be editing the right pages within Designer, for adding the casscading dropdown functions to upoad pages and edit item pages, would I be looking at changing EditForm.aspx and Upload.aspx?

Many thanks again

Coordinator
Mar 17, 2010 at 12:40 PM

With Document Libraries, you'll only want to work with EditForm.aspx (or better, a copy of EditForm.aspx).  Upload.aspx is only used to specify the document file, then you are taken to EditForm.aspx to work with the metadata.  This is different than with other lists, which have a NewForm.aspx to create a new item and EditForm.aspx for any subsequent edits.

M.

Mar 17, 2010 at 1:11 PM

I wish more paid customer service teams were as decent and as responsive as you arer.  Do you take donations?

As an aside, I've no problem working witha copy of the EditForm but wouldn't know how to sub it in.  Can this be done in designer?

Coordinator
Mar 17, 2010 at 1:25 PM

;+)  To date, I've had a badge on the home page of this site to encourage donations to the Boston Museum of Science.  I'm wondering if I'm missing out on a potential revenue stream for myself, though.  What is the library "worth" to you? I'm just curious, no obligation.

In SharePoint Designer, you can change the forms for a list by following the instructions at the bottom of this documentation page: http://spservices.codeplex.com/documentation If that's not clear, let me know so that I can improve it.

M.

Mar 17, 2010 at 1:30 PM

I've not got a set sum in mind but as both the library and your prompt responses are saving me having to learn development, i imagine a fair sum can be donated.  I'll get something later and will let you know, as it'll be a personal contribution not one from my client.

And how did I miss that?  I've had this page open all week and somehow missed it!  Will get stuck in now.

Coordinator
Mar 17, 2010 at 1:35 PM

No one reads the documentation. ;+)

M.

Mar 17, 2010 at 1:55 PM

I'd also argue that guys are guys, who are famous the world over for ignoring the manuels...!

Mar 18, 2010 at 12:37 PM
Edited Mar 18, 2010 at 3:46 PM

Hi Marc,

I'm hoping that you'll be able to help.  I've tried the sample code and I can't get it to work.  My steps so far are: -

1 - Taken an copy of the Editform.aspx and arranged the metadata as I need.
2 - Set up my reference lists.  As per your example, I have three lists.

List One = Functions Look Up.  This contains one column with the appropriate entries.  A site column uses this as a look-up too.  The URL is .../lists/FuncLookUp
List Two = Services Look Up.  This contains two columns.  The first column is a Service Column called 'Service'.  The second is a Function Column called 'Function' that is the look up from List One. The URL is .../lists/ServLookUp
List Three = Categories Look Up.  This contains two columns also.  The first column is called Category adn the second is called Service.  This is a look up from List Two.

Now, when I render the page, I don't get any errors nor anything from the debug but the connections between the fields isn't being made.    I've got my code below and would welcome any suggestions.

asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server">
<script type="text/javascript" language="javascript" src="/JQuery/jquery-1.4.2.min.js"></script>
<script type="text/javascript" language="javascript" src="/JQuery/jquery.SPServices-0.5.2.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        //This defines the relationship between Functions & Services	
		$().SPServices.SPCascadeDropdowns({
			relationshipList: "ServLookUp",
			relationshipListParentColumn: "Function",
			relationshipListChildColumn: "Service",
			parentColumn: "Function",
			childColumn: "Service",
			debug: true
		});
        //This defines the relationship between Services & Categories 		
		$().SPServices.SPCascadeDropdowns({
			relationshipList: "ProcLookUp",
			relationshipListParentColumn: "Service",
			relationshipListChildColumn: "Procedure",
			relationshipListSortColumn: "ID",
			parentColumn: "Service",
			childColumn: "Categories"
		});
	});
</script>

Coordinator
Mar 18, 2010 at 12:53 PM

S:

The first step is to be sure that your references to the jQuery library is right.  The simplest way to do that is to add an alert just under $(document).ready(function() {:

$(document).ready(function() {
  alert("Hello, S_Andrews!");

I you see that alert, then jquery-1.4.2.min.js is being loaded.

M.

Mar 18, 2010 at 1:00 PM

Hmm.  Seems I can't even get that right!  No alert as yet.  Code as follows: -

<script type="text/javascript" language="javascript" src="/JQuery/jquery-1.4.2.min.js"></script>
<script type="text/javascript" language="javascript" src="/JQuery/jquery.SPServices-0.5.2.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
     $(document).ready(function() {
    alert("The JQuery call is working!");
        //This defines the relationship between Functions & Services 
  $().SPServices.SPCascadeDropdowns({
   relationshipList: "47C3FD67-4E42-4759-9A03-0F36FF10C4D8",
   relationshipListParentColumn: "Function",
   relationshipListChildColumn: "Service",
   parentColumn: "Function",
   childColumn: "Service",
   debug: true

script type="text/javascript" language="javascript" src="/JQuery/jquery-1.4.2.min.js"></script>
<script type="text/javascript" language="javascript" src="/JQuery/jquery.SPServices-0.5.2.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
     $(document).ready(function() {
    alert("The JQuery call is working!");
        //This defines the relationship between Functions & Services 
  $().SPServices.SPCascadeDropdowns({
   relationshipList: "47C3FD67-4E42-4759-9A03-0F36FF10C4D8",
   relationshipListParentColumn: "Function",
   relationshipListChildColumn: "Service",
   parentColumn: "Function",
   childColumn: "Service",
   debug: true
  });


  });

Coordinator
Mar 18, 2010 at 1:10 PM

You can't have the

$(document).ready(function() {

line twice. ;+)

M.

Mar 18, 2010 at 2:00 PM

I've attached the code to the PlaceHolderMain and edited out the double extract as above

Still not working for some reason.  The library exists, the relative URL looks fine.  I'm not seeing something...

Coordinator
Mar 18, 2010 at 3:22 PM

If you're not seeing the alert then the references aren't right.  You've got:

/JQuery/jquery-1.4.2.min.js

This means that the .js file is in a Document Library called JQuery in the root site of the Site Collection.

M.

Mar 18, 2010 at 4:02 PM

Hmm.

I've set up a SharePoint document library called Jquery, ran the custom page with the script.  No result. This document library was the top level site.

I then used designer to make an "under the bonnet" folder of the same name, moved the scripts there and re-run the code.  Same result.

Think I'm getting sometthing absurdly simple wrong?

Coordinator
Mar 18, 2010 at 4:04 PM

Hard to tell from what you've pasted above. Closing </script> tag?

M.

Mar 18, 2010 at 4:09 PM

Got that.  Bit of a chunk but the editable code section in its entirety is as such: -

 

<%@ Page language="C#" MasterPageFile="~masterurl/default.master"    Inherits="Microsoft.SharePoint.WebPartPages.WebPartPage,Microsoft.SharePoint,Version=12.0.0.0,Culture=neutral,PublicKeyToken=71e9bce111e9429c" meta:webpartpageexpansion="full" meta:progid="SharePoint.WebPartPage.Document" %>
<%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Register Tagprefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Import Namespace="Microsoft.SharePoint" %> <%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<asp:Content ContentPlaceHolderId="PlaceHolderPageTitle" runat="server">
	<SharePoint:ListFormPageTitle runat="server"/>
</asp:Content>
<asp:Content ContentPlaceHolderId="PlaceHolderPageTitleInTitleArea" runat="server">
	<SharePoint:ListProperty Property="LinkTitle" runat="server" id="ID_LinkTitle"/>: 
	<SharePoint:ListItemProperty id="ID_ItemProperty" MaxLength=40 runat="server"/>
</asp:Content>
<asp:Content ContentPlaceHolderId="PlaceHolderPageImage" runat="server">
	<IMG SRC="/_layouts/images/blank.gif" width=1 height=1 alt="">
</asp:Content>
<asp:Content ContentPlaceHolderId="PlaceHolderLeftNavBar" runat="server"/>
<asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server">

<script type="text/javascript" language="javascript" src="/JQuery/jquery-1.4.2.min.js"></script>
<script type="text/javascript" language="javascript" src="/JQuery/jquery.SPServices-0.5.2.js"></script>
<script type="text/javascript">
       	$(document).ready(function() {
       	 alert("The Script has executed this far!");
  		//This defines the relationship between	Functions & Services	
		$().SPServices.SPCascadeDropdowns({
			relationshipList: "47C3FD67-4E42-4759-9A03-0F36FF10C4D8",
			relationshipListParentColumn: "Function",
			relationshipListChildColumn: "Service",
			parentColumn: "Function",
			childColumn: "Service",
			debug: true
		});
        //This defines the relationship between	Services & Categories 		
		$().SPServices.SPCascadeDropdowns({
			relationshipList: "35195F7C-FDA3-48FD-8521-395B07617E70",
			relationshipListParentColumn: "Service",
			relationshipListChildColumn: "Procedure",
			relationshipListSortColumn: "ID",
			parentColumn: "Service",
			childColumn: "Categories"
		});
	});
</script>

<table cellpadding=0 cellspacing=0 id="onetIDListForm">
 <tr>
  <td>
 <WebPartPages:WebPartZone runat="server" FrameType="None" ID="Main" Title="loc:Main"><ZoneTemplate>
<WebPartPages:ListFormWebPart runat="server" __MarkupType="xmlmarkup" WebPart="true" __WebPartId="{C4EF0BFF-7C0B-4D10-B578-24D147554F81}" >
<WebPart xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns="http://schemas.microsoft.com/WebPart/v2">
  <Title>Information Security Team Documents</Title>
  <FrameType>Default</FrameType>
  <Description />
  <IsIncluded>true</IsIncluded>
  <PartOrder>1</PartOrder>
  <FrameState>Normal</FrameState>
  <Height />
  <Width />
  <AllowRemove>true</AllowRemove>
  <AllowZoneChange>true</AllowZoneChange>
  <AllowMinimize>true</AllowMinimize>
  <AllowConnect>true</AllowConnect>
  <AllowEdit>true</AllowEdit>
  <AllowHide>true</AllowHide>
  <IsVisible>true</IsVisible>
  <DetailLink />
  <HelpLink />
  <HelpMode>Modeless</HelpMode>
  <Dir>Default</Dir>
  <PartImageSmall />
  <MissingAssembly>Cannot import this Web Part.</MissingAssembly>
  <PartImageLarge />
  <IsIncludedFilter />
  <ExportControlledProperties>true</ExportControlledProperties>
  <ConnectionID>00000000-0000-0000-0000-000000000000</ConnectionID>
  <ID>g_c4ef0bff_7c0b_4d10_b578_24d147554f81</ID>
  <ListName xmlns="http://schemas.microsoft.com/WebPart/v2/ListForm">{DA5B4EB9-4114-4EB6-B6ED-E3A9E739401E}</ListName>
  <ListItemId xmlns="http://schemas.microsoft.com/WebPart/v2/ListForm">0</ListItemId>
  <ControlMode xmlns="http://schemas.microsoft.com/WebPart/v2/ListForm">Edit</ControlMode>
  <TemplateName xmlns="http://schemas.microsoft.com/WebPart/v2/ListForm">DocumentLibraryForm</TemplateName>
  <FormType xmlns="http://schemas.microsoft.com/WebPart/v2/ListForm">6</FormType>
  <ViewFlag xmlns="http://schemas.microsoft.com/WebPart/v2/ListForm">0</ViewFlag>
</WebPart>
</WebPartPages:ListFormWebPart>
</ZoneTemplate></WebPartPages:WebPartZone>
 <IMG SRC="/_layouts/images/blank.gif" width=590 height=1 alt="">
  </td>
 </tr>
</table>
</asp:Content>
<asp:Content ContentPlaceHolderId="PlaceHolderTitleLeftBorder" runat="server">
<table cellpadding=0 height=100% width=100% cellspacing=0>
 <tr><td class="ms-areaseparatorleft"><IMG SRC="/_layouts/images/blank.gif" width=1 height=1 alt=""></td></tr>
</table>
</asp:Content>
<asp:Content ContentPlaceHolderId="PlaceHolderTitleAreaClass" runat="server">
<script id="onetidPageTitleAreaFrameScript">
	document.getElementById("onetidPageTitleAreaFrame").className="ms-areaseparator";
</script>
</asp:Content>
<asp:Content ContentPlaceHolderId="PlaceHolderBodyAreaClass" runat="server">
<style type="text/css">
.ms-bodyareaframe {
	padding: 8px;
	border: none;
}
</style>
</asp:Content>
<asp:Content ContentPlaceHolderId="PlaceHolderBodyLeftBorder" runat="server">
<div class='ms-areaseparatorleft'><IMG SRC="/_layouts/images/blank.gif" width=8 height=100% alt=""></div>
</asp:Content>
<asp:Content ContentPlaceHolderId="PlaceHolderTitleRightMargin" runat="server">
<div class='ms-areaseparatorright'><IMG SRC="/_layouts/images/blank.gif" width=8 height=100% alt=""></div>
</asp:Content>
<asp:Content ContentPlaceHolderId="PlaceHolderBodyRightMargin" runat="server">
<div class='ms-areaseparatorright'><IMG SRC="/_layouts/images/blank.gif" width=8 height=100% alt=""></div>
</asp:Content>
<asp:Content ContentPlaceHolderId="PlaceHolderTitleAreaSeparator" runat="server"/>

Coordinator
Mar 18, 2010 at 4:12 PM

Everything looks right. In SharePoint Designer, Ctrl-Click on the src strings in these two lines:

<script type="text/javascript" language="javascript" src="/JQuery/jquery-1.4.2.min.js"></script>
<script type="text/javascript" language="javascript" src="/JQuery/jquery.SPServices-0.5.2.js"></script>

If the references are right, the .js files will open in SPD.

M.

Mar 18, 2010 at 4:23 PM

Well, we're onto something.  Doing this returns a dialog box stating that there is no file with URL JQuery/filename there.

In the folders list, they're staring me in the face, in a document library.  I deleted the library to be sure, recreated it in SharePoint and then reuploaded the documents.

Mar 18, 2010 at 4:26 PM

Elipses.  The bane of my life: -

../..

Pop-up box works and am getting an effective debugging script now.

You sir, are a legend.  Cheers for your patience.

Coordinator
Mar 18, 2010 at 4:30 PM

:+)

Mar 18, 2010 at 4:51 PM
Back again... I'd like to be sure I'm working out the StaticNames of my columns properly. The code below is a concern: - relationshipListParentColumn: "Function", //StaticName of parent column relationshipListChildColumn: "Service", //StaticName of child column Function is a lookup list that takes its entries from a single column list. Service is a single line of text that was used to be the 'Title' field butt has been renamed Service. Debugging reports these columns don't exist in the list (on either GUID or name). problem is when I go to get the static name, there's no set of characters after the field=title or field =service. Is there another manner of obtaining this reference?
Coordinator
Mar 18, 2010 at 4:55 PM

If you're using the Title column but have renamed it to Service, then:

StaticName = Title
DisplayName = Service

M.

Mar 18, 2010 at 5:24 PM

Thats what I thought.  Still can't find it.  Additionally, does it matter if the look-up column in relationshipListChildColumn is the same as childColumn on the form?  I've made it a look up but defined it as site column and have as such deployed it as the lookup column in the reference list but also as a selection field on my document library edit form?

 

relationshipList: "47C3FD67-4E42-4759-9A03-0F36FF10C4D8",
relationshipListParentColumn: "Function",
relationshipListChildColumn: "Service",
parentColumn: "Function",
childColumn: "Service",
debug: true

Coordinator
Mar 18, 2010 at 6:09 PM

Is the list in the same site as the form? If it isn't, you need the WebURL option.

M.