Display Pages Version Information in SharePoint 2013

In SharePoint 2013, I had a requirement to display page versions in drop down and on selection of each version respective version information should open in new window.

This requirement consists of two parts.

1.          Display drop down  on each page
2.          Add versions in drop down and on selection of each drop down open version information.

For achieving 1^st part, I created page layout and added html Drop down code on page layout source, so every page created using that page layout will have drop down on this page.

Code:

 

               

For 2^nd part – I added below script in page layout. This code extracts version number and sets it as text for drop down option and value as URL for opening version information.

In SharePoint under layouts directory we can get all versions information on Versions.aspx.

I am calling this page using JQuery Ajax API to read page content. Once we get all html source which will have all versions information, I am extracting required values using JQuery.

So on drop down change you have to open URL in value field in new window. That’s it.

This code requires {LIST ID} as Pages library ID and Item ID is Page ID.  

var VersonNumberArray = new Array;
$(document).ready(function() {
 getItemVersions(function(versionEntries){
  for ( i = 0; i < versionEntries.length; i++ )
  {
    var opt = document.createElement("option");      
     opt.text = VersonNumberArray[i];
   
    var urlVal = versionEntries[i].href
       
        if (urlVal.indexOf("?") > -1)
        {
          urlVal = urlVal.split('=')[1];
          urlVal = "/Pages/Forms/DispForm.aspx?ID={ItemID}&VersionNo=" + urlVal;
        }
        else
        {
         urlVal = "/Pages/Forms/DispForm.aspx?ID={ItemID}&VersionNo="
        }
       
        opt.value = urlVal;
        document.getElementById('versionid').options.add(opt);
  }


});

 
  });


function getItemVersions(success)
{
var itemid =  document.getElementById('pageid').value;
var versionsUrl = 'http://{SiteURL}/_layouts/15/versions.aspx?list={ListID}&ID='+ itemid;
   $.get( versionsUrl, function( data ) {
 
      var versionEntries = parseVersionList(data);
      success(versionEntries);
   });
 
   }


function parseVersionList(data){
 
   var versionList = $(data).find('table.ms-settingsframe');
   var verurlList =  $(versionList).find('a[onfocus="OnLink(this)"]');
   var versonRows = $(versionList).find('> tbody > tr');
 
   var children = null;
 
   for(var i=0; i < versonRows.length ; i++)
   {
    var td = $(versonRows[i]).children('td:first');
   
     if(td.length == 1)
     {
       if(td[0].vAlign == "top" && td[0].className == "ms-vb2")
        {
          VersonNumberArray.push(td[0].outerText);
        }
     }
    }
    return verurlList;
}

Happy SharePointing

 

Change Display Name of current user using REST API in SharePoint 2013

In one SharePoint 2013 portal, we had a requirement to change display name of current logged in User, which appears in Welcome Menu.

We had below script in master page, which successfully changed display name as First Name & Last Name.

_ spPageContextInfo.userId   will give user id in User Info List.

After that we can construct REST URL to access User Info List and retrieve User Details (First Name, Last Name, Department, Email etc.) using REST API.

.ms-core-menu-root CSS class gives User Display Name object and by using Jquery syntax below we can set name as per our requirement.

var userid = _spPageContextInfo.userId;

   var reqUrl = _spPageContextInfo.webAbsoluteUrl + "/_api/Web/SiteUserInfoList/Items("+ userid +")?$select=FirstName,LastName";

   var displayName ;

   

   

   $.ajax({

                url: reqUrl,

                type: "GET",

                headers: {

                    "accept": "application/json;odata=verbose",

               },

        success: function (data) { 

         $(".ms-core-menu-root")[1].innerText= data.d.FirstName + " " +  data.d.LastName;

                 },

        error: function (error) {

              alert("error in REST API call");

        }

       });

Retrieve List item Attachments using REST API

In previous blog, I explained about adding attachments to list item using html5 and Jquery. Now let’s use some REST API to pull these attachments and display them in list.
I am using same page from previous post to display or edit list item. And MY page URL is as below

{Site URL}/SitePages/File.aspx?RID={ID}

Now on document ready event I have used below code which retrieves item as well as attachment and display in my custom form:

 getListItem function uses item ID from query string and passes CAML query to retrieve particular item

In Succeed delegate method we are iterating collection and assigning respective Tittle ,
Description values to textboxes. For retrieving attachments I am using REST API, using ListData WCF service. URL for all attachments collection can be built like below

{Site URL}/_vti_bin/ListData.svc/{List Name} ([item ID])/Attachments 
       
This returns all attachments JSON result collection object , now  get file  Name of each file by iterating through it. And we can build URL for file path as below

{Site URL}/Lists/{List Name} /Attachments/{Item ID}/{FileName}

 

When your page will load , output will be as shown in below. Click on each attachment will open respective file.
 

 




That's it.  

Display SharePoint data in chart

I had a requirement to display Tasks Status from SharePoint in a pie chart. We can do this in several ways; in this post will explain about using REST API and Google charts to display your data.

Everyone is familiar with Tasks list and very commonly used in SharePoint .Status field in this list has below options and would like to display my chart based on this status.

·         Not Started

·         In Progress

·         Completed

·         Deferred

·         Waiting on someone else

SharePoint 2010 had WCF data service that gives REST interface. Using this we can query on SharePoint data.

URL: -  <Site URL >/_vti_bin/ListData.svc

Steps:

1.       Get count of each status by using below query  on Task list

<Site URL>/_vti_bin/ListData.svc/Task/$count?$expand=Status&$filter=Status/Value eq 'Not Started'

2.       Build array of all status with count as shown in code html.

3.       Use google API to create Pie chart

4.       Upload this html and add as a CEWP.

 

 

Source Code :

Output :