“Hello World!” Test with SPServices and SharePoint 2010: SPCascadeDropdowns

In a previous post entitled The jQuery Library for SharePoint Web Services and SharePoint 2010, I talked about the fact that the  jQuery Library for SharePoint Web Services (SPServices) basically works with SharePoint 2010.  I also promised to pursue “certification” for SharePoint 2010 on a function by function basis so that users of the library could be sure that I had tested each function specifically with SharePoint 2010.

In the meantime, Michael Greene (@webdes03) was kind enough to design some great badges for me (along with a new logo for SPServices) which will indicate the level of certification.

Last night I did what I think of as the “Hello World!” test for SPServices and SharePoint 2010: I got $().SPServices.SPCascadeDropdowns up and working.  The best part is that I used exactly the same implementation method and needed to make zero modifications to the jQuery.

Here are the light level steps I used to do this:

  • Created Countries, States, and Cities Custom Lists
  • Created Site Columns for Country and State which are Lookup columns into the lists above
  • Created my usual “Sales Opportunities” Custom List with the columns Lead Source, Country, State, and City.  (See the Sales Opportunity  list in my Demo site for a similar instantiation of what this list looks like.)
  • Copied NewForm.aspx for Sales Opportunities list to NewFormCustom.aspx
  • Edited NewFormCustom.aspx to add the following (new stuff is *not* highlighted):
<asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server">
<script type="text/javascript" src="/jQuery Libraries/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/jQuery%20Libraries/jquery.SPServices-0.5.3ALPHA3.js"></script>
    <script language="javascript" type="text/javascript">
        $(document).ready(function() {
            $().SPServices.SPCascadeDropdowns({
                relationshipList: "States",
                relationshipListParentColumn: "Country",
                relationshipListChildColumn: "Title",
                relationshipListSortColumn: "ID",
                parentColumn: "Country",
                childColumn: "State",
                promptText: "Choose State...",
                debug: true
            });

            $().SPServices.SPCascadeDropdowns({
                relationshipList: "Cities",
                relationshipListParentColumn: "State",
                relationshipListChildColumn: "Title",
                relationshipListSortColumn: "ID",
                parentColumn: "State",
                childColumn: "City",
                promptText: "Choose City...",
                debug: true
            });

        });

</script>
<table cellpadding="0" cellspacing="0" id="onetIDListForm" style="width:100%;">

This little test allows me to do several things:

I’m testing in the beta VM as provided by Microsoft because that’s what I have to work with.  Once I can get my hands on an RTM instance, I’ll shift testing to that.  (Anyone? Anyone? Bueller?)

Now that I have the basic infrastructure set up for testing, I’ll start working through the other functions and Web Services to see what works and what doesn’t.  Because the underlying Web Services should be the same, the way I’ve written things, and because the fundamental structure of the forms hasn’t changed, I’m hopeful that the success rate will be very high.

Similar Posts

7 Comments

  1. Marc, does the javascript code go into the NewForm itself? If so where exactly is the best place to put it? Do you have a link that gives a more detailed or step by step description?

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.