Using JavaScript and jQuery in SharePoint 2013

Posted by Sophina Dillard on Friday, 3 May 2013 0

Today blog is discussed by our guest blogger Alvin Ubiera. And it’s about JavaScript client-side object model (CSOM). It’s majorly focused on the basic operations and technologies of it. I find it quite an informative piece; so here I am sharing it with you all hope you find it interesting too.

In this article we will focus on using JavaScript client-side object model (CSOM) on a SharePoint 2013 Farm solution to do a basic operation (reading list data, and displaying it asynchronously in a web part).

The JavaScript CSOM was added to SharePoint 2010 . We will use it in a similar way in SharePoint 2013. If you have used this in SharePoint 2010 it will be similar concept for you. For users who are new to this concept please review the MSDN blog and library (as mentioned below).

Some important points on why JavaScript CSOM is increasingly used nowadays:

• Code written with JS CSOM can interact with other JavaScript libraries ( including the powerful JQuery)
• It is lightweight, it runs on the users Browser
• It can interact with SharePoint and perform most of the actions (like CRUD on list, libraries, Content types etc.)

There are some scenarios where JS CSOM is not a helpful option. We are not going to discuss that in details in this article, as there are countless examples of such situations available on MSDN and elsewhere. You can also check the available JavaScript API reference for SharePoint 2013 in the MSDN library.

To get started we need the reference to the proper JS files. If the master page is a default SharePoint master page, it will have references to the required JS CSOM scripts. If you use a custom master page then you need to add the relevant JSOM references before the pages and controls can use them.

We are assuming that we already have a farm solution targeting SP 2103. And we have a list called “Info” with 2 columns: “Title” and “UserDetails”. Please add some data to the list to check the functionality going forward.

First create a visual web part and name it “infoWebPart”. This is where we will put all our code in the “infoWebPart.ascx”.

Now let’s jump directly into the code.

Functionality we are trying to achieve:

On page load, the web part should show us the info for title “Tom” on the page. That is, on page load, the user should see name and details of the user “Tom” pulled from the “Info” list. Here is the code of how that would look:

//Make sure SP.js is loaded before using it

$(document).ready(function () { ExecuteOrDelayUntilScriptLoaded(infoLoad, "SP.js"); });

//This method is called on the page load and this will load the details of the user info from the "Info" list.

function infoLoad() {

try {

//hardcoding the title value. You can easily make it dynamic by pulling it from some control in case it is needed

var title = " Tom";

var context = new SP.ClientContext.get_current();

var web = context.get_web();

var list = web.get_lists().getByTitle('Info');

var query = '<View Scope=\'RecursiveAll\'>' +

'<Query>' +

'<Where>' +

'<Contains>' +

'<FieldRef Name=\'Title\'/>' +

'<Value Type=\'Text\'>' + title + '</Value>' +

'</Contains>' +

'</Where>' +

'</Query>' +

'</View>';

var camlQuery = new SP.CamlQuery();

camlQuery.set_viewXml(query);

this.productcollection = list.getItems(camlQuery);

//Mentioning few properties to pull from the list

context.load(this.productcollection, 'Include(Title, UserDetails)');

//Defining the fallback methods

context.executeQueryAsync(Function.createDelegate(this, this.productsReceived), Function.createDelegate(this, this.failed));

return false;

}

catch (e) {

alert(e);

}

//This method is called on the success of the infoLoad function and it passes list colection to this function.

function productsReceived() {

var TextFiled = "";

var ListEnumerator = this.productcollection.getEnumerator();

while (ListEnumerator.moveNext()) {

var currentItem = ListEnumerator.get_current();

$('#<%=lblName.ClientID%>').html(currentItem.get_item(' Title ')); $('#<%=lblUserDetails.ClientID%>').html(currentItem.get_item('UserDetails'));

}

return false;

}

//Defining the failed method

function failed(sender, args) {

alert('failed. Message:' + args.get_message());

}

</script>

//Defining 2 controls to display the data. You can use HTML controls. Just to show the syntax to use server side controls on JQuery, the below controls are used

<h2>

<asp:Label ID="lblName" runat="server"></asp:Label></h2>

<p>

<asp:Label ID="lblUserDetails" runat="server"></asp:Label>

</p>

</div>

Now that the coding is complete, the last step is to deploy the solution to a site, add the web part to a page and check Tom’s data on the page.

Bio: Alvin Ubiera is a Microsoft SharePoint Technologist at the Houston-based business software provider, Rand Group and is a regular contributor to Dynamics 101. He hails from the sunny Dominican Republic and has varied experience in architecture, web development, and SharePoint.