jQuery and Sharepoint Web Services: GetListItems with queries

jQuery and Sharepoint Web Services: GetListItems with queries

// November 23rd, 2010 // Uncategorized

I recently did another post, detailing deleting a list through the use of Sharepoint Web Services. In this post ill give you a codesample on how to query a list using the item ID and the list name.
The business case for this, was to add a context menu item based on an item property, in my case, document status. Manipulating context menu items is a long winded process, one which is best read in posts such as this post or another post here
Essentially this method was called just before the item is added to the context menu item, it is intercepted at the Custom_AddListMenuItems method which allows you to add list menu items. In the method below, i use the local ID of the conext menu item clicked, together with the list guid (ctx.listname) and i query the list for the document status of that item.
I only add the menu item when docstatus is not equal to published. Another interesting note is the ajax call is done synchronously which forces the program halt execution until the ajax call has received a response from the web service.

 function ShowModerationHistory(currentItemID, r, t, m, v, y) {
<><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><>

function ShowModerationHistory(currentItemID, r, t, m, v, y) {
	var returnValue = false;
	var soapEnv =
	"<soapenv:Envelope xmlns:soapenv='http://schemas.xmlsoap.org/soap/envelope/'> \
	$.ajax({
	url: SP.PageContextInfo.get_webServerRelativeUrl() + "/_vti_bin/lists.asmx",
	type: "POST",
	dataType: "xml",
	data: soapEnv,
	async: false,
	complete: function (xData, status) {
	var docStatus = $(xData.responseXML).find("z\\:row:eq(0)").attr("ows_DocumentStatus");
	if (docStatus != null && docStatus != undefined) {
	if (docStatus.toUpperCase() != "PUBLISHED") {
	x = CIMOpt(r, t, m, v, null, y);
	}
	}
	},
	beforeSend: function (xhr) {
	xhr.setRequestHeader('SOAPAction', 'http://schemas.microsoft.com/sharepoint/soap/GetListItems');
	},
	contentType: "text/xml; charset=\"utf-8\""
	});

Using jQuery to return all users of a group in SharePoint

Using jQuery to return all members / users of a group in SharePoint

Determine if a user is within a particular group in SharePoint and act upon the output.
Luckily the standard SharePoint web services allow to query for this information utilising the User Group service at location: http://<server>/_vti_bin/usergroup.asmx.
In particular the method GetUserCollectionFromGroup will provide the complete list including the Windows SAMAccountName (login name) as part of the return.
However, in this instance I was caught a little by a permissions problem.  Although I could query the web service, it kept returning a status of “parsererror” and an output of “Access Denied”.
This was resolved by changing the group settings to allow “Everyone” to read the membership of the group.

Code Example
The following code utilises jQuery to access the web service:

 1 <script type='text/javascript'>
 2 
 3 _spBodyOnLoadFunctionNames.push("getUserCollectionFromGroup");
 4 
 5 function getUserCollectionFromGroup() {
 6  var soapEnv =
 7       "<soap:Envelope xmlns:xsi='http://www.w3.org/2001/XMLSchema-instance' xmlns:xsd='http://www.w3.org/2001/XMLSchema' xmlns:soap='http://schemas.xmlsoap.org/soap/envelope/'> \
 8       <soap:Body> \
 9         <GetUserCollectionFromGroup xmlns='http://schemas.microsoft.com/sharepoint/soap/directory/'> \
10           <groupName>Group Name Here</groupName> \
11         </GetUserCollectionFromGroup> \
12       </soap:Body> \
13     </soap:Envelope>";
14  $.ajax({
15          url: "/_vti_bin/usergroup.asmx",
16          type: "POST",
17          dataType: "xml",
18          data: soapEnv,
19          complete: getUserCollectionFromGroupReturn,
20          contentType: "text/xml; charset=\"utf-8\""
21      });
22 }
23 function getUserCollectionFromGroupReturn(xData, status) {
24  alert("Status: " + status);
25  alert("Output: " + xData.responseText);
26 }
27 </script>
28 

Querying SharePoint List Items using jQuery

Querying SharePoint List Items using jQuery

Due to popular demand I’ve created another sample of how you can make use of the jQuery Javascript library in your SharePoint sites. This example uses SharePoint’s Lists.asmx web service to retrieve all the list items of a specific list. In my previous posts I showed how you could use jQuery in SharePoint Site Pages (regular .aspx pages uploaded to a Document Library), so let’s do something different now; let’s use jQuery in a plain Content Editor Web Part.

To try this sample navigate to the home page (usually /default.aspx) of a SharePoint site that has a list with some list items in it, in my code I’ll use the Task list of a plain vanilla Team Site. Switch the page to Edit mode (Site Actions, Edit Page), and add a new instance of the Content Editor Web Part to the page. In the properties of that web part, copy and paste the following code using the Source Editor button.

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>

<script type="text/javascript">
    $(document).ready(function() {
        var soapEnv =
            "<soapenv:Envelope xmlns:soapenv='http://schemas.xmlsoap.org/soap/envelope/'> \
                <soapenv:Body> \
                     <GetListItems xmlns='http://schemas.microsoft.com/sharepoint/soap/'> \
                        <listName>Tasks</listName> \
                        <viewFields> \
                            <ViewFields> \
                               <FieldRef Name='Title' /> \
                           </ViewFields> \
                        </viewFields> \
                    </GetListItems> \
                </soapenv:Body> \
            </soapenv:Envelope>";

        $.ajax({
            url: "_vti_bin/lists.asmx",
            type: "POST",
            dataType: "xml",
            data: soapEnv,
            complete: processResult,
            contentType: "text/xml; charset=\"utf-8\""
        });
    });

    function processResult(xData, status) {
        $(xData.responseXML).find("z\\:row").each(function() {
            var liHtml = "<li>" + $(this).attr("ows_Title") + "</li>";
            $("#tasksUL").append(liHtml);
        });
    }
</script>

<ul id="tasksUL"/> 

On the first line the jQuery library is loaded from googlecode.com. To make this your, your client browser needs to have Internet access of course. Alternativly you can host the jQuery library yourself (see my previous examples) or even load the jQuery library in every page using the SmartTools.jQuery component. After that a function is attached to the jQuery document ready event. In this function the SOAP envelope message is constructed (the soapEnv variable). If you’d like to see the code getting list items from another list than the Task list, you’d have to change the listName element. The second part POST-ing the SOAP envelope to the web service by using jQuery’s ajax function. When the web service comes back with the result, the processResult method is called. In this function a loop is created over every row element (in the namespace z). Notice that "z:row" escapes in Javascript to "z\\:row". For every row element a new li HTML element is added to the ul element with ID tasksUL. And that’s it! You can see the result in the screenshot below.

Adding and Testing JQuery to SharePoint

Adding  JQuery to SharePoint

Using jQuery in SharePoint opens a lot of doors for web developers/designers. jQuery allows you to change your SharePoint interface dramatically by modifying page elements and classes, providing event handlers, creating dynamic content– and even doing animations!

So let’s get started on how to get it set up.
1. Download
First, you’ll need to download the jQuery library. If you want, you can use a hosted solution, such as Google (for which you’ll need to sign up for an API key) you can skip to step 3. Otherwise, download the library to your local computer.
2. Save to SharePoint
While you can place the library anywhere you want, I recommend placing it in a document library in the root site collection of your farm. This makes it easier to find, and generally that’s a location that your entire organization would have access to already. They key is to place the library in a document library that everyone has access to.
I titled my document library “jQuery Libraries” – plural because I also use this library for jQuery plugins.
Upload your jQuery library to your document library.
Personal recommendation: (optional) Once you save the library, make a copy named “jquery.min.js” – erasing the version number. This will make things easier for you in the future because when a new version of jQuery comes out, you’ll just overwrite the “jquery.min.js” file with the new version – this will upgrade your library without you having to go edit every instance (master page or Content Editor Web Part, CEWP) where you referenced the file.
3. Create a reference in your Master page (or CEWP)
I recommend putting the jQuery reference into your master page, so that’s what I’ll show you how to do. jQuery is so small that I don’t think there’s any harm in having it load on every page – even those pages not using it…
You have the option of using jQuery on a page-by-page basis in a CEWP. For this, you’ll just put the “<script>” tag (below) onto a CEWP as needed.
Open SharePoint Designer to your root site collection, and load your master page (typically “/_catalogs/masterpage/default.master”).
Toward the top of the source code, in between the “<HEAD></HEAD>” tags, you’ll see the following line:

<SharePoint:ScriptLink language="javascript" name="core.js" Defer="true" runat="server"/>

After the line above, enter the following (change the URL: ‘src’ to reflect the name of your document library and jQuery file name, or to the URL provided if you’re using a hosted solution):

<script src="/jQuery Libraries/jquery.min.js" type="text/javascript"></script>

You can also get the URL for your library by navigating (using your internet browser) to you jQuery document library. Right click the jQuery.min file and select “Copy Shortcut” – then just paste that into the ‘src’ attribute.
Now, save (check-in, if needed) and exit SharePoint Designer.
4. Test
You should now have jQuery loaded up and ready to fire. Let’s just test it out and make sure it’s working:
On a testing webpage (create one if you need) place a CEWP onto the page. Open the tool pane, and click the “Source Editor” button. Now enter the following code:

<script type="text/javascript">

$(document).ready(function() {

alert("jQuery is working!!");

});

</script>

Click “Save”. You should get an alert on your screen that says “jQuery is working!!”. If you don’t, then you’ll need to check the URL in step 3 to make sure it’s correct. You can also view the source code of the page to make sure the jQuery reference you added is there.

SharePoint Cascading drop downs using jQuery

SharePoint Cascading drop downs using jQuery

How many times you require functionality where in based on the selection of parent drop down generates the values to the child drop down. Examples, selection of country fills the states drop down.

Well, of course there is a way like creating custom field which can definitely achieve this job. However this requires us to write down the code and .ascx custom fields and deploy on the server to get it to the action.

We can achieve the same with the help of jQuery. Yes, no files and no code. Without them we can achieve this. So why to wait? Let’s explore more in this.

Before we start the exam, you will need to fantastic jQuery from

jQuery 1.3.2.min.js

and SPServices jQuery from

SPServices jQuery

Once you download these two .js files, upload them to any of the document library where you have the permission over the site.

Now go ahead and create one list. I am calling it a CategoryType and adding two values in the list.



Now I am creating one more list and call it as a CategoryRelationList and create one column called Category which is a look up column to the CategoryType title column and add few items.



And now to put it in action, we will create one more list and we call it RequestForm and create two columns, Category look up to CategoryType list title column and Product look up column to the CategoryRelationList title column. This is the list where we will use the cascading drop down service from SPServices jquery library




Now here comes a good part. Now you have two ways to achieve this, the simplest which I believe is by using Content editor web part on both new form and edit form. Add content editor web part and add following lines to it. (Check your document library path in src attribute where you have kept two js files which we downloaded earlier)

<script language="javascript" type="text/javascript" src=" /Shared%20Documents/jquery-1.3.2.min.js"></script>

<script language="javascript" type="text/javascript" src=" /Shared%20Documents/jquery.SPServices-0.5.6.min.js"></script>
<script language="javascript" type="text/javascript">

$(document).ready(function() {
$().SPServices.SPCascadeDropdowns({
relationshipList: "CategoryRelationList",
relationshipListParentColumn: "Category",
relationshipListChildColumn: "Title",
parentColumn: "Category",
childColumn: "Product",
debug: true
});

});
</script>

OR the other way to achieve this is open SharePoint designer and then open site where this list is located, open NewForm.aspx, check out the form and find the following line.

<asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server">

Add the above script exactly below this. Save it and check in. This will also do the job for you. Do the same for edit form as well.

Now let me explain each parameter in the script.

relationshipList – This is the name of the list where we have kept the relationship.
relationshipListParentColumn – This is the parent column in the relationship list.
relationshipListChildColumn – This is the child column in the relationship list.
parentColumn – parent column in the list where we want to implement this.
childColumn – child column in the list where we want to implement this.

Now see it in action. Open the list and click on new and see the magic.





Hope that you have enjoyed this post. Keep giving the comments. we love them. :)

javascript Resources for Charts and Graphs solutions

For website which have complicated data you may need to use graphic or charts to simplify these content to be user friend, JavaScripts charts and graphics tool help you easily convert data to be graphically, user friend and clear charts .

In this Post we make a collection of 18 javascripts resources for Charts and Graphs Solutions,

I hope you will enjoy this article, and don’t forget to share it!

Related Posts

• +20 jQuery Plugins that enhance HTML form elements
• +25 jQuery and CSS multi level & Mega drop down menus
• +20 jQuery Tooltip Plugins and tutorials for awesome design

highcharts

Highcharts is a charting library written in pure JavaScript, offering an easy way of adding interactive charts to your web site or web application. Highcharts currently supports line, spline, area, areaspline, column, bar, pie and scatter chart types.

Burtin’s Antibiotics

After World War II, antibiotics earned the moniker “wonder drugs” for quickly treating previously-incurable diseases. Data was gathered to determine which drug worked best for each bacterial infection. Comparing drug performance was an enormous aid for practitioners and scientists alike. In the fall of 1951, Will Burtin published this graph showing the effectiveness of three popular antibiotics on 16 different bacteria, measured in terms of minimum inhibitory concentration.

flot

The plugin works with Internet Explorer 6/7/8, Firefox 2.x+, Safari 3.0+, Opera 9.5+ and Konqueror 4.x+ with the HTML canvas tag (the excanvas Javascript emulation helper is used for IE).

tufte graph

# Configuration is by dynamic functions, allowing for a really compact API (very few options)

piechart

ProtoChart is a new opensource library using Prototype and Canvas to create good looking charts. This library is highly motivated by Flot, Flotr and PlotKit libraries.

moochart

moochart is a plugin for MooTools 1.2 that draws bubble diagrams on the canvas tag. Future versions might include pie, bar & line graphs.

Canvas 3D Graph is a special type of bar graph that plot numbers in 3D

MOVED TO GITHUB

milkchart

A simple to use, yet robust library for transforming table data into a chart. This library uses the HTML5 tag and is only supported on browsers other than IE until ExCanvas gets proper text support.

jqplot

Computation and drawing of lines, axes, shadows even the grid itself is handled by pluggable “renderers”. Not only are the plot elements customizable, plugins can expand functionality of the plot too! There are plenty of hooks into the core jqPlot code allowing for custom event handlers, creation of new plot types, adding canvases to the plot, and more!

Accessible Charts

technique for creating accessible charts and graphs that uses JavaScript to scrape data from an HTML table and generate bar, line, area, and pie chart visualizations using the HTML5 canvas element. This technique provides a simple way to generate charts, but more importantly, because it bases the chart on data already in the page in an HTML table element, it is accessible to people who browse the web with a screen reader or other assistive technology, or with browsers that don’t fully support JavaScript or HTML5 Canvas. We packaged it as a downloadable jQuery plugin called Visualize

plotkit

PlotKit is a Chart and Graph Plotting Library for Javascript. It has support for HTML Canvas and also SVG via Adobe SVG Viewer and native browser support.

jscharts

JS Charts is a JavaScript chart generator that requires little or no coding. JS Charts allows you to easily create charts in different templates like bar charts, pie charts or simple line graphs.

raphaeljs

gRaphaël’s goal is to help you create stunning charts on your website. It is based on Raphaël graphics library. Check out the demos to see static and interactive charts in action.

Google Chart Tools

The Google Chart Tools enable adding live charts to any web page.

InfoVis Toolkit

dygraphs JavaScript Visualization Library

dygraphs is an open source JavaScript library that produces produces interactive, zoomable charts of time series. It is designed to display dense data sets and enable users to explore and interpret them.

Swiff Chart Generator Demos

Swiff Chart lets you create Eye Catching Animated Charts in Adobe Flash™ format. Paste your data from a speadsheet or import a formatted text file, choose a predefined Chart Style, adjust parameters and instantly export your animated Chart as a Adobe Flash™ movie.