ntroduction
Recently I was working on integrating JQuery with SP 2010 sites. This article will be first of many articles that i would be covering as part of the JQuery Series. This write up will discuss on how to integrate/use JQuery with share point 2010. For developers to use the JQuery in share point it is mandatory to include the JQuery file/plugin into the portal before they can start developing user interfaces using it. We will start with a small “Hello World” program and look at how developers can communicate with SP 2010 list using JQuery library for SharePoint web services.
JQuery integration with SharePoint Site collection
Following section describe how to do “hello world” code with JQuery and SP 2010. This is important as this is a must step for you to integrate any JQuery library, Plugins later.
1. Create Site collection, naming “JqueryDemo”.
2. Download the JQuery from Here. I have downloaded the “jquery-1.8.3.min.js” version of the file.
3. Once downloaded, add it SharePoint document library called “JS”. This library name can be can be anything based on your project requirements. All JavaScript files and related JQuery files are added here.
4. Create a text file called as “Include.txt”, which will have references to the JQuery file added above.
<html> <head> <script src="/sites/JQueryDemo/JS/jquery-1.8.3.min.js" type="text/javascript"></script> </head> </html>
5. Add the “Incude.txt” file to “JS” document library created by above step. This can again be any of the folders within your share point. Make sure you know the relative path to the file.
6. For “Hello World” demo, let us include a below piece of code to a text file “QuerySharedDocuments.txt”.
<html> <head> <script src="/sites/JQueryDemo/JS/jquery-1.8.3.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { alert("Hello World"); }); </script> </head> <body> </body> </html>
7. Add the “QuerySharedDocuments.txt” file to “JS” document library
8. Create a new share point page called "JQueryTest”
9. Navigate to the “JQueryTest” page or navigate to a page where you want to test the above code.
10. Add a Content Editor Web Part.
11. Edit the web part to modify the content link to point to “/sites/JQueryDemo/JS/Include.txt”. This will ensure that required java scripts and JQuery files are referred in this page.
12. Title can be made blank for this content editor web part, as this will be used only for referencing the JQuery files.
13. Add another content editor web part below this and modify the content link to point to “/sites/JQueryDemo/JS /QuerySharedDocuments.txt”
14. Change the title of the content editor web part to “Shared Documents List”.
15. Save the page and run the page. Now it should display “Hello World” message as below.
16. Now that we have successfully done a “Hello world” Program of JQuery within SharePoint. Let us look at how to query a document library using JQuery.
2 Querying SharePoint Document Library
Following section will show how to query “Shared Documents” library through JQuery and render the contents in a tabular format. For this you can either call the List web service exposed by the SharePoint or you can use the JQuery library for SharePoint web services from here. I would prefer to go with the latter options, as it much more flexible and easy to write. You will need to download the latest JQuery file from here. I have downloaded “jquery.SPServices-0.7.2.js” version.
1. Add the file “jquery.SPServices-0.7.2.js” to “JS” document library created above.
2. Include following line of code in “Include.txt” and upload it to “JS” document library.
<html> <head> <script src="/sites/JQueryDemo/JS/ jquery-1.8.3.min.js " type="text/javascript"></script> <script src="/sites/JQueryDemo/JS/jquery.SPServices-0.7.2.js" type="text/javascript"></script> </head> </html>
3. Modify the “QuerySharedDocuments.txt” to query the “Shared documents” document library and list all the items in a tabular format.
4. Add following html code to the between the body tag. This will be used to render the HTML on the client side.
<table id="documentListtable"> <tr class="row-template"> <td class="row-column">Document name </td> <td class="row-column">Author </td> <td class="row-column">Last Modified On </td> <td class="row-column">Doc type </td></tr> </table> <div id="templates"style="display: none"> <table> <tr class="row-template"> <td aligh="center"class="DocumentName" style="width: 100px;"> </td><td class="Author"style="width: 100px;"></td> <td class="LastModifiedOn" style="width: 100px;"></td> <td class="Doctype" style="width: 100px;"></td> </tr> </table>; </div>
5. under the div with id “templates” will be used to clone the rows. • Values for each column will be set dynamically by navigating through the document library XML received in JQuery. Once the values are set, they will be appended to the table with id “documentListtable”
6. Following code is used to fetch the list of documents and its associated attributes by querying the “Shared Documents” library.
• Operation: Which method to be executed in the List web service. Here “GetListItems” is used to get the items from list mentioned in “ListName” parameter.
• async: Should the method be called asynchronously or synchronously
• listName: List name. In this case it is “Shared documents”.
• Completefunc: Which method should be called on call back?
• CAMLRowLimit: no of rows that should be fetched.
$(document).ready(function () { $().SPServices({ operation:"GetListItems",
async: false,
CAMLRowLimit: 5,
listName: "Shared Documents",
completefunc: fnCallBack
}); });
7. Following section will explain on how the call back function will navigate through the xml and add rows to the “documentListtable” table. Below code is self-explanatory with inline comments.
function fnCallBack(xData, Status) {
var index = 0;
$documentListtable = $("#documentListtable");
//Navigate through the XML
$(xData.responseXML).find("z\\:row, row").each(function () {
//Get the values to a local variable
var _url = $(this).attr("ows_FileRef").split(";#")[1];
var _name = $(this).attr("ows_LinkFilename");
var _pdfLink = $("<a href="http://www.codeproject.com/" + _url + "" rel="lightbox">" + _name + "</a>");
var _author = $(this).attr("ows_Editor").split(";#")[1];
var modifiedOn = $(this).attr("ows_Modified");
var _DocIcon = $(this).attr("ows_DocIcon");
//Create clone of the table row
var $row = $("#templates").find(".row-template").clone();
//Add values to the column based on the css class
$row.find(".DocumentName").html(_pdfLink);
$row.find(".Author").html(_author);
$row.find(".LastModifiedOn").html(modifiedOn);
$row.find(".Doctype").html(_DocIcon);
//Change the style for even rows
if (index % 2 == 0) {
$row.addClass("jtable-row-even")
}
index = index + 1;
//add the row to table
$documentListtable.append($row);
});
}
8. How is it rendered?
9. It is going to fetch only 5 rows as CAMLRowLimit is set to 5.
10. Style added in the “QuerySharedDocuments.txt” for providing alternate color to the table rows.
<style>
.row-template
{
background: rgb(248, 248, 248);
padding: 2px;
height: 30px;
}
.row-column
{
width: 150px;
align: left;
font-weight: bold;
}
.jtable-row-even
{
background: rgb(240, 240, 240);
}
.row-template
{
background: rgb(248, 248, 248);
padding: 2px;
height: 30px;
}
.row-column
{
width: 150px;
align: left;
font-weight: bold;
}
.jtable-row-even
{
background: rgb(240, 240, 240);
}
.row-template
{
background: rgb(248, 248, 248);
padding: 2px;
height: 30px;
}
.row-column
{
width: 150px;
align: left;
font-weight: bold;
}
.jtable-row-even
{
background: rgb(240, 240, 240);
}
.row-template
{
background: rgb(248, 248, 248);
padding: 2px;
height: 30px;
}
.row-column
{
width: 150px;
align: left;
font-weight: bold;
}
.jtable-row-even
{
background: rgb(240, 240, 240);
}
</style>
No comments:
Post a Comment