SharePoint comes with a bunch of default functionalities and we all use SharePoint’s version history functionality to see the version of any list item. When versioning is enabled in your SharePoint list or library, you can store, track, and restore items in a list and files in a library whenever they change.
But it’s get quite tricky when you want to display the version history of a particular element on a custom page or on any template.
There is one way to achieve it by using SharePoint service or SPServices.
Before jump into the code, we must know that what SP Service is – SPServices is a jQuery library which abstracts SharePoint’s Web Services and allows the user to use them. It also includes functions which use the various WebService operations to provide more useful capabilities. It works entirely client side and requires no server install. Here we have used jquery_SPServices_jquery.min.js and moment.min.js as our reference files.
In our page load function we will get the following things:
<script type=”text/javascript”>
$(document).ready(function(){
var webUrl = _spPageContextInfo.webAbsoluteUrl;
var listId = _spPageContextInfo.pageListId;
var listItemId = getIDformquery(‘ID’);
LoadSodByKey(“sp.js”, function () {});
getListItemBySPServices(listId , listItemId);
});
var html = ‘ ‘;
//function to get ID from query string
function getIDformquery(param){
var url = window.location.href.slice(window.location.href.indexOf(‘?’) + 1).split(‘&’);
for (var i = 0; i < url.length; i++) {
var urlparam = url[i].split(‘=’);
if (urlparam[0] == param) {
return urlparam[1];
}
}
}
Function to get Version History will go like this:
function getListItemBySPServices(listName, listItemId) {
$().SPServices({
operation: “GetVersionCollection”,
async: false,
strlistID: listName,
strlistItemID: listItemId,
strFieldName: “ProgressNotes”,//Column Name for which you want to retrieve version history
completefunc: function (xData, Status) {
console.log(xData);
var progNotes = ”;
$(xData.responseText).find(“Version”).each(function(i) { //Each loop go through all the elements to check whether version history is available.
if( progNotes != $(this).attr(“ProgressNotes”)){ // To avoid repetition
var modifiedOn = $(this).attr(“Modified”); // Splitting time to get as per local time.
var fullDate = modifiedOn.split(“-“);
var year = fullDate [0];var month = fullDate [1];var date = fullDate [2];
var newDate = date.split(“T”);date = newDate[0];
var finalDate = month+”/”+date+”/”+year;
var time = newDate[1].split(‘:’);
var hour = time[0]; var min = time[1]; var sec= time[2];
var totalTime = hour+”:”+min;
if(hour>=12){
totalTime = totalTime+”PM”;
}
else{
totalTime =totalTime+”AM ” ;
}
var notes = $(this).attr(“ProgressNotes”);
var modifiedBy = $(this).attr(“editor”) ; // To get user name and email
var details = new Array();
details =modifiedBy.split(“#”);
var name = details[6]; //This will give us user name
var mail = details[4]; // This will give us email of user
console.log(“Progress Notes: ” + $(this).attr(“ProgressNotes”) + ” Modified On: ” + $(this).attr(“Modified”)+”Modified By: ” + name );
progNotes = $(this).attr(“ProgressNotes”);// We will check form this variable to avoid repetition in version history.
//Now here we have created dynamic html to display the content fetched
html = ”;
html += “<div>”;
html += “<div>”;
html += “<span>”+name+”</span></br><span>”+mail +finalDate+” “+totalTime +”</span>”;
html += “<br>”;
html += “<br>”;
html += “</div>”;
html += “<div>”;
html +=”<span >Progress Notes :</span><span> “+ notes +”</span>”;
html += “</div>”;
html += “</div>”;
$(‘#divHtml’).append(html);
}
});
}
});
}
</script>
This is the div where we have bind the created dynamic html
<div id=”divHistory” class=”displaydiv”> </div>
