How to set SharePoint 2013 user defined date time filed to empty using JSOM

This is a very small post, where I need to set, user defined list column of type date time to null

I looked into the internet and I haven't found anything related to this. To set date time field to empty, just set "null" to that column

For ex:

listitem.set_item('UserModifiedBy', null)

In the above code snippet, UserModifiedBy is of type "Date and Time" which is not a required field and allow nulls

Uploading multiple attachments to the lists using JSOM

In the previous blog post, we have seen how to attach a single file to the list item

In this blog post we will see how we can attach multiple attachments to a list item using JSOM. The following code will work in both SharePoint hosted apps and regular SPO web applications

The following technologies are referred/used in  the blog post

1. jquery.multifile.js
2. jquery
3. SPO client side libraries

Not much information is available in the internet to attach multiple files to the list items.

In your custom form, where you want to attach multiple files, add the following html tags which will facilitate the user to attach multiple files to the list item

As part of this post, we assume that, we have list called "MyList" and in that list we have two list columns called "FirstName" and "LastName"

When we insert data to this list, we also attach multiple list items. The below code snippet will show the simple html that has been created for the user to insert data into the list called "MyList"

	<div class="fld">
	<div>
	<span>First Name</span>
	<span><input type="text" id="txtFirstName"></span>
	</div>
	<div>
	<span>Last Name</span>
	<span><input type="text" id="txtLastName"></span>
	</div>
	Attach any relevant files
	<div class="files" id="attachFilesContainer">
	<input id="infringementFiles" type="file" class="multi browsebtn" />
	</div>
	</div>
	<div class="fld">
	<input class="btn" id="btnSubmit" value="Submit" type="button" />
	</div>

view raw FileUpload hosted with ❤ by GitHub

As you can see in the above code snippet, I have two html text boxes for FirstName and LastName and a file input control.

To facilitate multi file upload control, I am leveraging "jquery.multifile.js" plugin. If we don't use that plugin, the user will select only one input file for upload

When the user selects multiple files, here is how the UI looks like

 

As you can, with the help of jquery plug in, we can select multiple files. The complete UI will look like this

I also have a submit button and on click of that button, I want to insert a new list item as well as attach as the files that user has selected

On click of btnSubmit, all the files that are selected by the user will be attached to the list item.

Here is the code snippet for the btnSubmit click event. I have written this click event in the jquery document load function

	$(function () {
	var fileCountCheck = 0;
	$("#btnSubmit").click(function () {
	var data = [];
	var fileArray = [];
	$("#attachFilesContainer input:file").each(function () {
	if ($(this)[0].files[0]) {
	fileArray.push({ "Attachment": $(this)[0].files[0] });
	}
	});
	data.push({"FirstName": $("#txtFirstName").val().trim(), "LastName": $("#txtLastName").val().trim(), "Files": fileArray});
	createItemWithAttachments("MyList", data).then(
	function(){
	alert('Item created with Multiple attachments');
	},
	function(sender, args){
	console.log('Error occured' + args.get_message());
	}
	);
	});
	.....
	});

view raw FileUpload1 hosted with ❤ by GitHub

As a first step, loop all the attachments the user as selected and push that information into some javascript array. That javascript array function will just have the file information and not the contents of that file

	$("#attachFilesContainer input:file").each(function () {
	if ($(this)[0].files[0]) {
	fileArray.push({ "Attachment": $(this)[0].files[0] });
	}
	});

view raw FileArray.js hosted with ❤ by GitHub

Create another JSON array, to hold all the values the user has entered such as first name, last name etc. and including the file array that has been created above

data.push({"FirstName": $("#txtFirstName").val().trim(), "LastName": $("#txtLastName").val().trim(), "Files": fileArray});

After this, I have written some function will insert list item also attach the list items also

	var createItemWithAttachments = function(listName, listValues){
	var fileCountCheck = 0;
	var fileNames;
	var context = new SP.ClientContext.get_current();
	var dfd = $.Deferred();
	var targetList = context.get_web().get_lists().getByTitle(listName);
	context.load(targetList);
	var itemCreateInfo = new SP.ListItemCreationInformation();
	var listItem = targetList.addItem(itemCreateInfo);
	listItem.set_item("FirstName", listValues[0].FirstName);
	listItem.set_item("LastName", listValues[0].LastName);
	listItem.update();
	context.executeQueryAsync(
	function () {
	var id = listItem.get_id();
	if (listValues[0].Files.length != 0) {
	if (fileCountCheck <= listValues[0].Files.length - 1) {
	loopFileUpload(listName, id, listValues, fileCountCheck).then(
	function () {
	},
	function (sender, args) {
	console.log("Error uploading");
	dfd.reject(sender, args);
	}
	);
	}
	}
	else {
	dfd.resolve(fileCountCheck);
	}
	},
	function(sender, args){
	console.log('Error occured' + args.get_message());
	}
	);
	return dfd.promise();
	}

view raw insertlistityem.js hosted with ❤ by GitHub

I am using regular JSOM code for creating the list items. Since attachments has to be inserted  to the newly created item, I need to know the ID to which I need to insert the attachments

So, first I will insert/create the data, get the list id and to that list id, we need to insert attachments


After the getting the list id, I will loop with all the attachments the user has selected. I wont resolve the function, till I insert all the list attachments. If all the attachments are inserted, I will resolve the function

loopFileUpload function need to called recursively till all the list attachments are inserted

	function loopFileUpload(listName, id, listValues, fileCountCheck) {
	var dfd = $.Deferred();
	uploadFile(listName, id, listValues[0].Files[fileCountCheck].Attachment).then(
	function (data) {
	var objcontext = new SP.ClientContext();
	var targetList = objcontext.get_web().get_lists().getByTitle(listName);
	var listItem = targetList.getItemById(id);
	objcontext.load(listItem);
	objcontext.executeQueryAsync(function () {
	console.log("Reload List Item- Success");
	fileCountCheck++;
	if (fileCountCheck <= listValues[0].Files.length - 1) {
	loopFileUpload(listName, id, listValues, fileCountCheck);
	} else {
	console.log(fileCountCheck + ": Files uploaded");
	alert('Item created with Multiple attachments');
	}
	},
	function (sender, args) {
	console.log("Reload List Item- Fail" + args.get_message());
	});
	},
	function (sender, args) {
	console.log("Not uploaded");
	dfd.reject(sender, args);
	}
	);
	return dfd.promise();
	}

view raw Loop File Upload.js hosted with ❤ by GitHub

As you can see in the above function, loopFileUpload has been called recursively till all the list attachments are inserted

With in the loopFileUpload function, I am calling another function called uploadFile which will associate the list attachment to the id that has been passed to that function

	function uploadFile(listName, id, file) {
	var deferred = $.Deferred();
	var fileName = file.name;
	getFileBuffer(file).then(
	function (buffer) {
	var bytes = new Uint8Array(buffer);
	var binary = '';
	for (var b = 0; b < bytes.length; b++) {
	binary += String.fromCharCode(bytes[b]);
	}
	var scriptbase = _spPageContextInfo.webServerRelativeUrl + "/_layouts/15/";
	console.log(' File size:' + bytes.length);
	$.getScript(scriptbase + "SP.RequestExecutor.js", function () {
	var createitem = new SP.RequestExecutor(_spPageContextInfo.webServerRelativeUrl);
	createitem.executeAsync({
	url: _spPageContextInfo.webServerRelativeUrl + "/_api/web/lists/GetByTitle('" + listName + "')/items(" + id + ")/AttachmentFiles/add(FileName='" + file.name + "')",
	method: "POST",
	binaryStringRequestBody: true,
	body: binary,
	success: fsucc,
	error: ferr,
	state: "Update"
	});
	function fsucc(data) {
	console.log(data + ' uploaded successfully');
	deferred.resolve(data);
	}
	function ferr(data) {
	console.log(fileName + "not uploaded error");
	deferred.reject(data);
	}
	});
	},
	function (err) {
	deferred.reject(err);
	}
	);
	return deferred.promise();
	}
	function getFileBuffer(file) {
	var deferred = $.Deferred();
	var reader = new FileReader();
	reader.onload = function (e) {
	deferred.resolve(e.target.result);
	}
	reader.onerror = function (e) {
	deferred.reject(e.target.error);
	}
	reader.readAsArrayBuffer(file);
	return deferred.promise();
	}

view raw FileUploadtoSP.js hosted with ❤ by GitHub

Within the uploadFile function, I am calling another function called, getFileBuffer, will will read the actual contents of the file and pass that information to uploadFile function

We are using REST based approach for inserting the list attachments as REST will allow to upload upto 2 GB of file

Here is the url that needs to be used to access the list item id to which we need to insert the list attachment

spPageContextInfo.webServerRelativeUrl + "/_api/web/lists/GetByTitle('" + listName + "')/items(" + id + ")/AttachmentFiles/add(FileName='" + file.name + "')",

view raw resturl.js hosted with ❤ by GitHub

Here is the complete source code of the page that I used for this blog post

	<script type="text/javascript" src="/teams/MySCForApps/Style Library/JS/jquery-1.8.2.min.js"></script>
	<script type="text/javascript" src="/teams/MySCForApps/Style Library/JS/jquery-ui.js"></script>
	<script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script>
	<script type="text/javascript" src="/_layouts/15/sp.js"></script>
	<script type="text/javascript" src="/teams/MySCForApps/Style Library/JS/jquery.MultiFile.js"></script>
	<link rel="Stylesheet" type="text/css" href="../CSS/App.css" />
	<script language="javascript" type="text/jscript">
	$(function () {
	var fileCountCheck = 0;
	$("#btnSubmit").click(function () {
	var data = [];
	var fileArray = [];
	$("#attachFilesContainer input:file").each(function () {
	if ($(this)[0].files[0]) {
	fileArray.push({ "Attachment": $(this)[0].files[0] });
	}
	});
	data.push({"FirstName": $("#txtFirstName").val().trim(), "LastName": $("#txtLastName").val().trim(), "Files": fileArray});
	createItemWithAttachments("MyList", data).then(
	function(){
	alert('Item created with Multiple attachments');
	},
	function(sender, args){
	console.log('Error occured' + args.get_message());
	}
	)
	});
	var createItemWithAttachments = function(listName, listValues){
	var fileCountCheck = 0;
	var fileNames;
	var context = new SP.ClientContext.get_current();
	var dfd = $.Deferred();
	var targetList = context.get_web().get_lists().getByTitle(listName);
	context.load(targetList);
	var itemCreateInfo = new SP.ListItemCreationInformation();
	var listItem = targetList.addItem(itemCreateInfo);
	listItem.set_item("FirstName", listValues[0].FirstName);
	listItem.set_item("LastName", listValues[0].LastName);
	listItem.update();
	context.executeQueryAsync(
	function () {
	var id = listItem.get_id();
	if (listValues[0].Files.length != 0) {
	if (fileCountCheck <= listValues[0].Files.length - 1) {
	loopFileUpload(listName, id, listValues, fileCountCheck).then(
	function () {
	},
	function (sender, args) {
	console.log("Error uploading");
	dfd.reject(sender, args);
	}
	);
	}
	}
	else {
	dfd.resolve(fileCountCheck);
	}
	},
	function(sender, args){
	console.log('Error occured' + args.get_message());
	}
	);
	return dfd.promise();
	}
	function loopFileUpload(listName, id, listValues, fileCountCheck) {
	var dfd = $.Deferred();
	uploadFile(listName, id, listValues[0].Files[fileCountCheck].Attachment).then(
	function (data) {
	var objcontext = new SP.ClientContext();
	var targetList = objcontext.get_web().get_lists().getByTitle(listName);
	var listItem = targetList.getItemById(id);
	objcontext.load(listItem);
	objcontext.executeQueryAsync(function () {
	console.log("Reload List Item- Success");
	fileCountCheck++;
	if (fileCountCheck <= listValues[0].Files.length - 1) {
	loopFileUpload(listName, id, listValues, fileCountCheck);
	} else {
	console.log(fileCountCheck + ": Files uploaded");
	alert('Item created with Multiple attachments');
	}
	},
	function (sender, args) {
	console.log("Reload List Item- Fail" + args.get_message());
	});
	},
	function (sender, args) {
	console.log("Not uploaded");
	dfd.reject(sender, args);
	}
	);
	return dfd.promise();
	}
	function uploadFile(listName, id, file) {
	var deferred = $.Deferred();
	var fileName = file.name;
	getFileBuffer(file).then(
	function (buffer) {
	var bytes = new Uint8Array(buffer);
	var binary = '';
	for (var b = 0; b < bytes.length; b++) {
	binary += String.fromCharCode(bytes[b]);
	}
	var scriptbase = _spPageContextInfo.webServerRelativeUrl + "/_layouts/15/";
	console.log(' File size:' + bytes.length);
	$.getScript(scriptbase + "SP.RequestExecutor.js", function () {
	var createitem = new SP.RequestExecutor(_spPageContextInfo.webServerRelativeUrl);
	createitem.executeAsync({
	url: _spPageContextInfo.webServerRelativeUrl + "/_api/web/lists/GetByTitle('" + listName + "')/items(" + id + ")/AttachmentFiles/add(FileName='" + file.name + "')",
	method: "POST",
	binaryStringRequestBody: true,
	body: binary,
	success: fsucc,
	error: ferr,
	state: "Update"
	});
	function fsucc(data) {
	console.log(data + ' uploaded successfully');
	deferred.resolve(data);
	}
	function ferr(data) {
	console.log(fileName + "not uploaded error");
	deferred.reject(data);
	}
	});
	},
	function (err) {
	deferred.reject(err);
	}
	);
	return deferred.promise();
	}
	function getFileBuffer(file) {
	var deferred = $.Deferred();
	var reader = new FileReader();
	reader.onload = function (e) {
	deferred.resolve(e.target.result);
	}
	reader.onerror = function (e) {
	deferred.reject(e.target.error);
	}
	reader.readAsArrayBuffer(file);
	return deferred.promise();
	}
	});
	</script>
	<div class="fld">
	<div>
	<span>First Name</span>
	<span><input type="text" id="txtFirstName"></span>
	</div>
	<div>
	<span>Last Name</span>
	<span><input type="text" id="txtLastName"></span>
	</div>
	Attach any relevant files
	<div class="files" id="attachFilesContainer">
	<input id="infringementFiles" type="file" class="multi browsebtn" />
	</div>
	</div>
	<div class="fld">
	<input class="btn" id="btnSubmit" value="Submit" type="button" />
	</div>

view raw FileUpload.html hosted with ❤ by GitHub

Here is the snapshot of the list item that got created using this code with multiple attachments
 

Add a new user to the user field list column in SharePoint 2013 using JSOM

In this small post we will see how we can add user to a user column using JSOM. Assuming that the user entered is a valid user

	var oUser = new Array();
	oUser.push(SP.FieldUserValue.fromUser(emailName.substring(0, emailName.indexOf("@"))));
	listItem.set_item("createdByUser", oUser);

view raw addUser.js hosted with ❤ by GitHub

We have created a new javaScript array variable called oUser

To this array we are pushing user information with the help of javascript function called SP.FieldUserValue.fromUser

To fromUser method, we are passing the valid email and we are setting this oUser object array to the list item
 

SharePoint 2013 Tips and Tricks - GetUrlKeyValue, SetUrlKeyValue

There are lot of utilities and functions available on the client side SharePoint 2013 API and in this post we will see one of those API called GetUrlKeyValue and SetUrlKeyValue

There are scenarios where we need to get or set the value from or to the querystring of the URL and SharePoint provides an easy way to do this

GetUrlKeyValue:

This small utility function will try to get the value from the querystring of the url. There is no OOTB function to get the querystring value using javascript and this GetUrlKeyValue will help us in getting the value from the querystring

This function has been declared in in init.js. Ensure that init.js is referenced and loaded before you use this function.

Syntax: The syntax for GetUrlKeyValue is

GetUrlKeyValue(keyName, decodeQueryStringValue, url, caseComparison)

keyName: The querystring name for which we need the value

decodeQueryStringValue: Whether you want to decode the value - default value false

url: The url from which we need to retrieve the keyName value

caseComparison: Case sensitivity for keyName. - default value true

Example:

	var queryStringValue = GetUrlKeyValue('EditPage', window.location.href);
	var queryStringValue1 = GetUrlKeyValue('EditPage', false, window.location.href);
	var queryStringValue2 = GetUrlKeyValue('EditPage', true, window.location.href, false);
	var queryStringValue3 = GetUrlKeyValue('EditPage', 'http://www.abc.com?EditPage=true');

view raw GetUrlKeyValue.js hosted with ❤ by GitHub

In the above example, we wanted to retrieve "EditPage" querystring value from the current url - window.location.href

window.location.href can be replaced with your own url

The return value from this method is, string representation of querystring value and in this case it is "EditPage"

If the EditPage key doesn't exists in the url, it will return an empty string

SetUrlKeyValue

This is opposite to GetUrlKeyValue. In GetUrlKeyValue, we will getting the value from the querystring and in SetUrlKeyValue, we will be setting the querystring value

The syntax for SetUrlKeyValue is,

SetUrlKeyValue(keyName, keyValue, bEncode, url)

keyName: The querystring name to which we need to set the value

keyValue: The value that needs to be set to the keyName

bEncode: Whether the value needs to be encoded in the url before setting the value

url: Url to which the value needs to be set

Example

	SetUrlKeyValue('EditPage', 'true', false, window.location.href);
	SetUrlKeyValue('EditPage', 'true', false, 'http://www.abc.com');

view raw SetUrlKeyValue.js hosted with ❤ by GitHub

 

Opening a Page as modal window using JSOM in SharePoint 2013

There are many scenarios where we need to open custom pages or OOTB pages in a pop up. SharePoint provides an API to open the pages in pop up and in this post we will see how we can achieve the same using on the client side using JSOM

We will explore the following methods from the SharePoint 2013 client side library which will help us in opening the page as a dialog.

We will consider the following scenario when opening the page as a dialog:

• How to open the page in a dialog
• How to pass data to the dialog page
• How to return parameters or data back to the calling page from the dialog page

First we will see how to open the page in a dialog window. In order to open the page in a dialog, first we need to set the dialog window properties such as

• Dialog Window Title
• URL of the page to be shown in dialog window
• Width and height
• Allow dialog to maximize
• Allow dialog to close
• Need callback from the dialog window to the parent window
• Data for the dialog window that needs to be passed from the parent window

So, I have written a function in javascript with those parameters that can be called from the parent window. The below JavaScript code will show that information

	openInDialog = function (dlgTitle, dlgWidth, dlgHeight, dlgAllowMaximize, dlgShowClose, needCallBackFunction, pageUrl, dialogData) {
	var options = { title: dlgTitle, url: pageUrl, width: dlgWidth, height: dlgHeight, allowMaximize: dlgAllowMaximize, showClose: dlgShowClose, args: dialogData };
	if (needCallBackFunction) {
	options.dialogReturnValueCallback = Function.createDelegate(null, closeDialogCallBack);
	}
	SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.ModalDialog.showModalDialog', options);
	}

view raw openInDialog hosted with ❤ by GitHub

We have written a function called openInDialog which can be called from the Parent page and to this method we are passing all the parameters such as title, width, height etc. that discussed above

Then we have created a variable called options which has to be a JSON object that needs to be passed to the SharePoint JavaScript function which we will discuss later

	var options = {
	title: dlgTitle,
	url: pageUrl,
	width: dlgWidth,
	height: dlgHeight,
	allowMaximize: dlgAllowMaximize,
	showClose: dlgShowClose,
	args: dialogData };

view raw dialog properties.js hosted with ❤ by GitHub

Ensure that you use the same key names in the options variable such as args, showClose, allowMaximize etc

Its always better to pass data in JSON format to the modal window

If we need callback from the dialog window, we need to set a property called dialogReturnValueCallback. To that property, we need to set a custom call back function that will be called when the user closes the dialog window

options.dialogReturnValueCallback = Function.createDelegate(null, closeDialogCallBack);

view raw dialogReturnValueCallback.js hosted with ❤ by GitHub

Here the closeDialogCallBack is a custom callback function that will be called when the user closes the dialog window. We will explore this custom callback function later in this post

To open the page in a dialog, we need to call a sharepoint function called showModalDialog which is defined in the namespace SP.UI.ModalDialog and this name space is present in the JS file sp.ui.dialog.js

SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.ModalDialog.showModalDialog', options);

view raw showModalDialog.js hosted with ❤ by GitHub

To showModalDialog function, we are passing options as a parameter which we have created above

In the dialog window, we can access the data that is passed from the parent window as follows

var options = JSON.parse(window.frameElement.dialogArgs);

view raw Dialogdata.js hosted with ❤ by GitHub

dialogArgs contains the data that is passed from the parent window
Once the business is completed in the dialog window, the user will press OK or Cancel button in the dialog window.

Before clicking on OK or Cancel button, we need to prepare data that needs to be passed to the parent window. We will see how to prepare the data that needs to be passed to the parent windows

	var popData = [];
	popData[0] = "Test1";
	popData[1] = 'Test2';
	popData[2] = JsonData;

view raw Popup data.js hosted with ❤ by GitHub

In the above code, we have created a javascript array and to this javascript array we are setting some data and we want to send this data to the parent window and the parent window can take some action based on the data that is sent from the dialog

There are two actions that can be done in the pop up either OK or Cancel. Here are the SharePoint functions for OK and Cancel click events

When the user click on "OK" button, we can call the below SharePoint function
 
SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.OK, popData);

When the user click on "Cancel" button, we can call the below SharePoint function

SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.cancel, popData);

 As you can see, we are passing popData javascript array to both ok and cancel button.

 commonModalDialogClose sharepoint function internally calls the callback function that we discussed earlier in this post.

In our case we have created a call back function called closeDialogCallBack and this will be called when we close the pop up

	closeDialogCallBack = function (dialogResult, returnValue) {
	//If the user presses OK button in the dialog window
	if (dialogResult === SP.UI.DialogResult.OK ) {
	if (returnValue && returnValue != undefined) {
	//Access the data that is passed from the dialog window
	//From the dialog window we are passing three values
	//returnValue[0] - will be having "Test 1"
	//returnValue[1] - will be having "Test 2"
	//returnValue[2] - will be having JSON data
	}
	}
	//If the user presses cancel button in the dialog window
	if (dialogResult === SP.UI.DialogResult.cancel){
	//Do action related to cancel button
	}
	}

view raw closeDialogCallBack.js hosted with ❤ by GitHub

 

Using jquery templates to display sharepoint list data on the client side using JSOM

The following post will provide a scenario where you want to format sharepoint list data data using jquery template and everything on the client side using JSOM

As every body might aware that SharePoint online wont allow server side coding and everything needs to be written on the client side only

In the SharePoint online world, the developer should be using JSOM to retrieve the sharepoint data. Once the data is retrieved, the data should be presented to the user in a presentable way and in this post we will see how you can use jQuery, jQuery Templates to display SharePoint list data.

For this post, I will consider a SharePoint list called Customers and I have the following list columns inside that Customers list

1. First Name
2. Last Name
4. Email

When displaying the data, I wanted to combine First Name and Last Name and I want the email to be an hyperlink for the First Name and Last Name and I want to display the data as an unordered list. The final output will look something like this

This post will explain how we can do the same in SharePoint online using JSOM, JQuery and JQuery Templates

The first step in getting the data from the sharepoint list is to get reference to SharePoint and to get a reference to SharePoint context we need to load required Sharepoint JS file and the JS that needs to be loaded is SP.js. The following code snipped will show that information

	that.GetSharePointListData = function (listName, camlQuery, onGetSuccess) {
	SP.SOD.executeFunc("sp.js", 'SP.ClientContext', function () {
	that._getData(listName, camlQuery, onGetSuccess);
	});
	}

view raw GetListItemData.js hosted with ❤ by GitHub

In the above function we have created a small function called GetSharePointListData and to that function we are passing the list name and the CAML query that needs to be executed on the list, there is also an anonymous function called OnGetSuccess and we will discuss more on this later in this post
We have created another function called getData and in this function we will fire a request to SharePoint and fetch the data.

	that._getData = function (navTermID, listName, xmlQuery, contentType, onGetSuccess) {
	var objClientCtx = new SP.ClientContext.get_current(); //can be reused
	if (objClientCtx) {
	var oList = objClientCtx.get_web().get_lists().getByTitle(listName);
	var query = new SP.CamlQuery();
	query.set_viewXml(xmlQuery);
	var objlistItems = oList.getItems(query);
	objClientCtx.load(objlistItems);
	objClientCtx.executeQueryAsync(function (sender, args) {
	that.DataSet = [];
	var objlistEnumerator = objlistItems.getEnumerator();
	while (objlistEnumerator.moveNext()) {
	var objListItem = objlistEnumerator.get_current();
	var firstName = objListItem.get_item('FirstName');
	var lastName = objListItem.get_item('LastName');
	var email = objListItem.get_item('Email');
	that.DataSet.push({
	"FirstName": firstName,
	"LastName": lastName,
	"Email": email,
	});
	}
	onGetSuccess(that.DataSet);
	}, function (sender, args) {
	that._onGetFail(sender, args);
	});
	}
	}

view raw GetIndividualItems.js hosted with ❤ by GitHub

The following code will show the information on how to get context to SharePoint

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

view raw SharePointcontext.js hosted with ❤ by GitHub

Once you get a context to SharePoint, the next step will be, try to get context to the current web and the list from which you want to retrieve the list items and display the results

	var oList = objClientCtx.get_web().get_lists().getByTitle(listName);
	var query = new SP.CamlQuery();
	query.set_viewXml(xmlQuery);
	var objlistItems = oList.getItems(query);
	objClientCtx.load(objlistItems);

view raw GetContextToWebAndList.js hosted with ❤ by GitHub

Once we set all the context, fire an async request to SharePoint and the following code will show that information



In order to display the data in the format that we require, we need to store the data on the client side that is retrieved from the SharePoint.

To store the data on the client side, we will use JSON and in the above code snippet, we are using dataset[] variable for that purpose.

For each and every item that we are getting from the sharepoint, we are storing that information in JSON array and we are using the following code snippet to store the data into JSON array

	that.DataSet.push({
	"FirstName": firstName,
	"LastName": lastName,
	"Email": email,
	});

view raw JSONStore.js hosted with ❤ by GitHub

 Once we get all the data, we return the data from the function using the anonymous function that we are passing as a parameter to _getData function

onGetSuccess(that.DataSet);

that.DataSet contains all the sharepoint list data in json format. The following code will show how the list data looks like in JOSN format

	[
	{
	"FirstName": "abc",
	"LastName": "xyz",
	"Email": "abc@xyz.com"
	},
	{"FirstName": "def",
	"LastName": "mnq",
	"Email": "def@mnq.com"
	},
	{"FirstName": "opq",
	"LastName": "ghi",
	"Email": "opq@ghi.com"
	}
	]

view raw jsonData.json hosted with ❤ by GitHub

If there is any error that SharePoint returns, we are capturing that information in another anonymous function and in that function we are calling another function called _onFail and in that function you can capture sharepoint error and update the UI accordingly.

Once we have the JSON data, we can make use of JQuery and JQueryTemplate plugins to display the data accordingly. We can make use of other plugins such as UnderScore or some other plugins for displaying the data. In this post we are using jQueryTemplates for displaying the data

The following code will show, how we can call the function GetSharePointListData and pass the required parameters. The following code snippet will show that information

GetSharePointListData(spListName, camlQuery, function (data) {
    $("#customerTemplate").tmpl(data).appendTo("#ulCustomer");
});

 In the above code snippet, #customerTemplate is the jquery template where we have written how the data should be displayed and formatted and more on this later in this post

To that template we are passing the data (JSON data) and we are appending the completed HTML to ul tag with the name "ulCustomer"

The following code snippet will show customerTemplate html template with the place holders for the data that is coming from JSON data

	<script id="customerTemplate" type="text/x-jquery-tmpl">
	<li>
	<a href="mailto:${Email}">${FirstName} ${LastName}</a>
	</li>
	</script>

view raw CustomJQueryTemplate.js hosted with ❤ by GitHub

I am displaying the data in un-ordered list format, where FirstName and LastName becoming an hyperlink and on clicking of the hyperlink, default email client will open

The final output of the data will look like this

References

jQuery Template: http://plugins.jquery.com/loadTemplate/1.4.4/

Let me know your comments on this post
 

How to get all versions of a sharepoint list using JSOM

There are many scenarios where the user wants to retrieve the SharePoint list item versions. In SharePoint 2013 world, Microsoft recommends to use client side libraries  to do most of the operations.

In this post we will see how we can retrieve SharePoint list item version using client side SharePoint libraries and especially using JSOM

Here are the steps I used to retrieve list item version using JSOM

Step 1:

Get the list name and try to retrieve the list items data for which you need the versions

	that.GetSharePointListData = function (spListName, camlQuery) {
	SP.SOD.executeFunc("sp.js", 'SP.ClientContext', function () {
	that.getData(spListName, camlQuery);
	});
	}

view raw GetSharePointVersionListData.js hosted with ❤ by GitHub

 

spList name is the SharePoint list from which you want to retrieve the list items

camlQuery helps in getting the required data from the sharepoint list

SP.SOD.executeFunc(key, functionName, fn)  - Refer to the following link for more information on  this function

Step 2:

The below code gives the versions of all the items for the given list name.

	that.getData = function (listName, xmlQuery, contentType, onGetSuccess) {
	var objClientCtx = new SP.ClientContext.get_current();
	if (objClientCtx) {
	var oWeb = objClientCtx.get_web();
	var oList = oWeb.get_lists().getByTitle(listName);
	var query = new SP.CamlQuery();
	query.set_viewXml(xmlQuery);
	var objlistItems = oList.getItems(query);
	objClientCtx.load(objlistItems);
	objClientCtx.executeQueryAsync(function (sender, args) {
	that.DataSet = [];
	var objlistEnumerator = objlistItems.getEnumerator();
	while (objlistEnumerator.moveNext()) {
	var objListItem = objlistEnumerator.get_current();
	var id = objListItem.get_item('ID');
	var filePath = 'your site collection/Lists/your list/'+id+'_.000'
	var web = objClientCtx.get_web();
	var listItemInfo = web.getFileByServerRelativeUrl(filePath)
	var listItemFields = listItemInfo.get_listItemAllFields()
	objClientCtx.load(web);
	objClientCtx.load(listItemInfo);
	objClientCtx.load(listItemFields);
	//objClientCtx.load(versions1);
	objClientCtx.executeQueryAsync(
	function (sender, args) {
	var fileVersions = listItemInfo.get_versions();
	objClientCtx.load(fileVersions);
	objClientCtx.executeQueryAsync(
	function (sender, args) {
	var objlistVersionEnumerator = fileVersions.getEnumerator();
	while (objlistVersionEnumerator.moveNext()) {
	var objCurrentListItemVersion = objlistVersionEnumerator.get_current();
	console.log(objCurrentListItemVersion.get_url());
	}
	},
	function (sender, args) {console.log('Error');}
	)
	},
	function (sender, args){
	console.log('error')
	});
	}
	onGetSuccess(that.DataSet);
	}, function (sender, args) {
	that._onGetFail(sender, args);
	});
	}
	}

view raw CompleteFunction.js hosted with ❤ by GitHub

The below steps explains the above code in more detail

 

Get the reference to SharePoint context and the below code will show the snippet for getting sharepoint context

 

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

view raw SharePointcontext.js hosted with ❤ by GitHub

 

Get the reference to current sharepoint web  and the list with the help of sharepoint context reference that we got from the above code snippet

 

	var oWeb = objClientCtx.get_web();
	var oList = oWeb.get_lists().getByTitle(listName);
	var query = new SP.CamlQuery();
	query.set_viewXml(xmlQuery);
	var objlistItems = oList.getItems(query);
	objClientCtx.load(objlistItems);

view raw GetListItems.js hosted with ❤ by GitHub

 

Get individual list items. Fire an async query and get individual list items.

 

	objClientCtx.executeQueryAsync(function (sender, args) {
	that.DataSet = [];
	var objlistEnumerator = objlistItems.getEnumerator();
	while (objlistEnumerator.moveNext()) {
	var objListItem = objlistEnumerator.get_current();
	var id = objListItem.get_item('ID');
	var filePath = 'Path to current list/ListName/'+id+'_.000'
	var web = objClientCtx.get_web();
	var listItemInfo = web.getFileByServerRelativeUrl(filePath)
	var listItemFields = listItemInfo.get_listItemAllFields()
	objClientCtx.load(web);
	objClientCtx.load(listItemInfo);
	objClientCtx.load(listItemFields);

view raw GetIndividualItem.js hosted with ❤ by GitHub

 

Every list item in sharepoint lists is like url and any list item will be represented as 'path to site collection/Lists/list name/'+id+'_.000'.  id represents the current list id

 

Get reference to individual list item info with the following code snippet

web.getFileByServerRelativeUrl(filePath) and execute the code 

	objClientCtx.executeQueryAsync(
	function (sender, args) {
	var fileVersions = listItemInfo.get_versions();
	objClientCtx.load(fileVersions);

view raw GetListItemVersion hosted with ❤ by GitHub

 

get_versions() api will give all the versions of the current list item.  

Execute the query async again after calling the function get_versions().

 

 

 get_url() will have the information regarding the version history number of the list item 

_vti_history/512/Lists/List Name/265_.000

view raw VersionHistoryUrl.js hosted with ❤ by GitHub

 

Once versioning has been enabled, version data can be accessed from a special virtual directory called _vti_history

 

Refer the following url for more information on version number for the sharepoint list items

SharePoint Version Numbers

 

Once we get the list item version, the other obvious questions was, how to get the data associated to that version.

 

There are api's available to get the list data associated to that history version and what I found was, accessing the list item from the version history will always give me file not found error. So the only way to get the list item data for that version number is to use some html scrapping and by using some jquery syntax

 

Version history data of a particular list item can be accessed from a sharepoint url as shown below

 

Site collection complete url/Lists/ListName/DispForm.aspx?ID=265&VersionNo=1024

 

ID = 265 represents the current list item id and VersionNp 1024 represents major version 2 of the list item

 

In that page, list item data are enclosed with in a table with a called "ms-formtable" and with the help of some jquery we can get all the data from that class.

 

I have used the below jQuery code to get all the list item data

 

	var $div = $('<div>');
	$div.load('Site collection path/Lists/ListName/DispForm.aspx?ID=265&VersionNo=1024 table.ms-formtable', function(){
	var table = $(this).find('table.ms-formtable');
	var tr = $(table).find('tr');
	$(tr).each(function(){
	var row = $(this);
	var columnName = $.trim(row.find('td:eq(0)').text());
	var columnValue = $.trim(row.find('td:eq(1)').text());
	console.log(columnName);
	console.log(columnValue);
	});
	});

view raw GetVersiondata.js hosted with ❤ by GitHub