Real Life Example - Telephone List Gadget

Sep 28, 2010 at 10:24 AM

Hi All,

Have been working on a telephone list gadget to put on our intranet and finally it is working, however I am still not sure about the correct way to get z:row ( see related post at http://spservices.codeplex.com/Thread/View.aspx?ThreadId=227007 ).

The telephone list gadget consists of a dropdown list being populated from a SP list called Telephone List. When an dropdown item is selected and ajax call is sent to the server to get just the columns for that item. They are then displayed underneath the dropdown.

Jquery and SPServices are stored in a SP list as attachments and referenced using their SP url. The code is placed in a Content Editor Web Part. All functions and variables have a prefix of sda_ so that they do not conflict with any other similarly named ones. It is important not to load the referenced libraries more than once from other code on the same page.

P.S. This code will not work as is - i.e. you need to create your own SP list with columns and modify the code accordingly ( urls,column names, etc ), but it will surely help by giving examples and ideas for your own project.

On to the code... ( I am sure this will help a lot of others ):

// Reference jquery and spservices libraries stored as attachments in a SP list
<script src="/Lists/Site%20Code/Attachments/20/jquery-1.4.2.min.js" type="text/javascript"></script> <script src="/Lists/Site%20Code/Attachments/27/jquery.SPServices-0.5.6.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { sda_initialize(); }); // ready function sda_initialize() { sda_unpopulateDropdown(); sda_filterquery = ""; sda_viewfields = "<ViewFields><FieldRef Name='Title' /><FieldRef Name='Last_x0020_Name' /></ViewFields>"; sda_thenwhat = 'populatedropdown'; sda_getmyitems(sda_filterquery,sda_viewfields,sda_thenwhat); } // sda_initialize function sda_populateDropdown(sda_currentrow) { sda_firstname = sda_currentrow.attr("ows_Title"); sda_lastname = sda_currentrow.attr("ows_Last_x0020_Name"); if (sda_lastname == null) { sda_lastname = ""; } // if sda_selectHtml = '<option value="' + sda_firstname + '*SPLIT*' + sda_lastname + '">' + sda_firstname + ' ' + sda_lastname + '</option>'; $("#sda_Select").append(sda_selectHtml); } // populatedropdown function sda_unpopulateDropdown(sda_currentrow) { $("select[id$=sda_Select] > option").remove(); sda_selectHtml = '<Option value="Select...">Select...</Option>'; $("#sda_Select").append(sda_selectHtml); } // sda_unpopulateDropdown function sda_showDetails(sda_currentrow) { var sda_role = '', sda_dept = '', sda_deptraw = '', sda_extension = '', sda_mobile = '', sda_email = ''; sda_role = sda_currentrow.attr("ows_Role"); sda_deptraw = sda_currentrow.attr("ows_Unit"); sda_extension = sda_currentrow.attr("ows_Extension"); sda_mobile = sda_currentrow.attr("ows_Mobile"); sda_email = sda_currentrow.attr("ows_Email"); if (sda_role == null) { sda_role = '' }; if (sda_deptraw == null) { sda_deptraw = ''; } // if else { sda_dept = sda_deptraw.substring(2,sda_deptraw.length-2); } // else if (sda_extension == null) { sda_extension = '' }; if (sda_mobile == null) { sda_mobile = '' }; if (sda_email == null) { sda_email = '' }; sda_detailsHtml = 'Role: ' + sda_role + '<br />' + 'Group: ' + sda_dept + '<br />' + 'Ext: ' + sda_extension + '<br />' + 'Mob: ' + sda_mobile + '<br />' + 'Email: <a href="mailto:' + sda_email + '">' + sda_email + '</a>'; $("#sda_Details").append(sda_detailsHtml); } // showdetails function sda_clearDetails(sda_currentrow) { $("#sda_Details").empty(); } // cleardetails function sda_getmyitems(sda_filterquery,sda_viewfields,sda_thenwhat) { $().SPServices({ operation: "GetListItems", webURL: "/Units/CorporateServices", listName: "Telephone List", CAMLQuery: sda_filterquery, CAMLViewFields: sda_viewfields, completefunc: function (sda_xData, sda_Status) { switch(sda_thenwhat) { case 'populatedropdown': sda_unpopulateDropdown(); $(sda_xData.responseXML).find("z\\:row").each(function() { sda_populateDropdown($(this)); }); // each break; case 'getdetails': sda_clearDetails(); $(sda_xData.responseXML).find("z\\:row").each(function() { sda_showDetails($(this)); }); // each break; default: } // switch } // completefunc }); // spservices } function sda_getSelectedInfo(sda_getfullname) { var sda_fullname = (sda_getfullname.options[sda_getfullname.selectedIndex].value); if (sda_fullname != "Select...") { var sda_splitResult = sda_fullname.split("*SPLIT*"); sda_getfirstname = sda_splitResult[0]; sda_getlastname = sda_splitResult[1]; sda_filterquery = '<Query><Where><And><Eq><FieldRef Name="Title" /><Value Type="Text">' + sda_getfirstname + '</Value></Eq><Eq><FieldRef Name="Last_x0020_Name" /><Value Type="Text">' + sda_getlastname + '</Value></Eq></And></Where></Query>'; sda_viewfields = '<ViewFields><FieldRef Name="Title" /><FieldRef Name="Last_x0020_Name" /><FieldRef Name="Role" /><FieldRef Name="Unit" /><FieldRef Name="Extension" /><FieldRef Name="Mobile" /><FieldRef Name="Email" /></ViewFields>'; sda_thenwhat = 'getdetails'; sda_getmyitems(sda_filterquery,sda_viewfields,sda_thenwhat); } // if } // getselectedinfo </script> <div id="sda_Header" style="text-align: center;"> <b>Telephone List</b> </div> <div id="sda_Pre" style="margin: 5px;"> <select id="sda_Select" onChange="sda_getSelectedInfo(this);"> <Option value="Select...">Select...</Option> </select> </div> <div id="sda_Details" style="margin: 5px; text-align: left;"></div> <div id="sda_Footer" style="text-align: right; margin-right: 8px;"> <a href="/Units/CorporateServices/Lists/Telephone%20List/AllItems.aspx" target="_blank">View Full Staff Directory</a> </div>

Coordinator
Sep 28, 2010 at 11:29 AM

Kevin:

This is really great. Would it be OK with you if I did a blog post on this? Can you send me some screenshots? marc dot anderson at sympraxisconsulting dot com (I'll keep them to myself or obfuscate them; whatever you prefer.)

BTW, I probably would have done this with a DVWP because that way the server does the work up front. I'd show all of the items in the page, but set the display:none. Then in the page, I'd have a little script to do the client-side active parts. It all depends on the volume of items and how you want to UI to feel, of course. I'd be interested in what criteria helped make your decision to use jQuery and SPServiceinstead. (Other than it's probably more fun!)

M.