Monday, July 2, 2012

Using SPServices to Query a list in SharePoint 2010

  1. Create 2 lists.
     1a. Coolcities List
     1b. SelectCity List












     2.   Download, Refer and test SPServices.
     2a. Follow the link to download the SPServices js file.
     2b. Refer the file similar the way done for the jquery.js file

    <script src="/Shared%20Documents/jquery-1.7.2.js" type="text/javascript"></script>
<script src="/Shared%20Documents/jquery.SPServices-0.7.1a.js" type="text/javascript"></script>


     2c. Test the SPServices file has been properly refered or the file is properly loading during the page    load. For this run the small script which alerts the user who is logged in during the page load.
Edit the newform.aspx and add the content editor webpart







Then paste the following code inside it

<script src="/Shared%20Documents/jquery-1.7.2.js" type="text/javascript"></script>
<script src="/Shared%20Documents/jquery.SPServices-0.7.1a.js" type="text/javascript"></script>



$(document).ready(function() {

var thisUserName = $().SPServices.SPGetCurrentUser({
fieldName: "Title",
debug: false
});

alert(thisUserName);

});

So the above code will alert the user who is logged in, once you get the alert that means the spservices is being loading properly, and you can remove the test code.

3. Building up the SPServices inside the onchange jQuery function.


<script src="/Shared%20Documents/jquery-1.7.2.js" type="text/javascript"></script>
<script src="/Shared%20Documents/jquery.SPServices-0.7.1a.js" type="text/javascript"></script>


<script type="text/javascript">


$(document).ready(function() {
$("select").change(function() {

var selectedValue = this.value;

$().SPServices({
    operation: "GetListItems",
    async: false,
    listName: "CoolCities",
    CAMLViewFields: "<ViewFields><FieldRef Name='Description' /></ViewFields>",
     CAMLQuery: "<Query><Where><Eq><FieldRef Name='City'/><Value Type='Text'>" + selectedValue + "</Value></Eq></Where></Query>",
CAMLRowLimit: 1,
    completefunc: function (xData, Status) {
      $(xData.responseXML).SPFilterNode("z:row").each(function() {
        var liHtml = $(this).attr("ows_Description");
        alert(liHtml);
 $("input[title='Description1']").val(liHtml);
    });
    }
  });
});

});</script>

Output


-So when the drop down value is changed, on that event the CoolCities list is queried and the description of the selected city is displayed in the Description1 column of the SelectCity list.

Note :
The above code takes into consideration, that there is only one dropdown box in the SelectCity list,
if there are more than one then it would need some check before running the code.

4 comments:

  1. Sandesh

    I needed this kind of solution for my sharepoint . My SP services got loaded but its not working as i need. is there anything else i am missing . The CAML Query part is not working fine

    ReplyDelete
  2. Hi Sandesh.

    i used same code. its working fine. only issue is
    "var selectedValue = this.value; "
    Here it return the index of dropdown. so instead of that better to use this line
    var selectedValue = $("select[title='your column name'] option:selected").text();
    other is same & thanks for the help.

    ReplyDelete
  3. Until alert, code is working but the final line is not working
    $("input[title='Cost']").val(liHtml);

    ReplyDelete