Rendering On Sharepoint TaskList Using JSLink( Client-Side Rendering in SharePoint 2013)


Here i am giving you demo of JSlink(Client side Rendering) on SharePoint Task List

This is one of the cool feature of SharePoint and in this blog i go through ,what it is Actually

Summary: Add Task Status Indicators in Task List SharePoint 2013 using JS Link, Customize Status Field in Task list with JSLink

Continue reading


Sharepoint Error “A type named ‘SP.Data.DemoYourListItemas’ could not be resolved by the model. When a model is available, each type name must resolve to a valid type.” While adding list item in list using REST API

Hello Developers..

Today while playing with REST API i got some mysteries error like “A type named ‘SP.Data.DemoListItemas’ could not be resolved by the model. When a model is available, each type name must resolve to a valid type.

After working on it i found solution and cause of due to which error occur.

Let me tell you that this error occur during inserting list item in list using REST API. While adding item in list we must pass “ListItemEntityTypeFullName” of list so that REST API can know type of list.

So now question is that how to find ListItemEntityTypeFullName of list.

You need to make REST query and fire in as url like:


Run this REST url in browser. You will get ListItemEntityTypeFullName in output.

FireShot Capture -  - http___bidsp03_1000_student_StudentRecords__api_Web_Lists_GetByTitle('todol

Now add this list type in your REST Query.

var listurl = _spPageContextInfo.webAbsoluteUrl + “/_api/Web/Lists/GetByTitle(‘ListItem’)/Items”;
var data = {
__metadata: { ‘type’: ‘SP.Data.ListType‘ },

url: listurl ,
type: “POST”,
async : false,
headers: {
“accept”: “application/json;odata=verbose”,
“X-RequestDigest”: $(“#__REQUESTDIGEST”).val(),
“content-Type”: “application/json;odata=verbose”
data: JSON.stringify(data),
success: function (data) {
error: function (error) {

Now you will not get any error like this while adding item in list using REST API.

Happy Coding…!!

Manipulation with Sharepoint List with flavored of AngularJS and ng-Grid

Hello Developers !!!

i am sharing with such things which i have implemented. i have played with  SharePoint2013 , angularJS and ng-grid and that was seriously amazing.

Now i am going to explain scenario which i have implemented.

What u do If your client require to display SharePoint list data with CEWP(Content Editor web part) and it must be user friendly with highest look and feel ? 

I guess , you guys understand the requirement carefully!!! Now i going to one step ahead . . . .

After listening the requirement , i just thinking which JS has to implement to fulfill Requirement, i have many option like NODE.JS , Angular.JS, JQuery etc . . So i think and tell my self.

Let’s Dipen , ready to Play with Angular.JS

now i have create one custom list in Sharepoint2013. i m not explaining you this thing , because i think it’s out of the track part . but i provide you link to refer for creating list.

Now, how many things you have to want to implement this things.

1) Index.HTML //To display the content in CEWP


3)ng-grid.Js and ng-grid.css

4)If  you wan to add bootsrap than call bootstrap.css

5) main.js  // your Scripting Logic and events are handled int his js file

now , i mention below index.HTMl File which i have created.


<!DOCTYPE html>
<html ng-app=”myApp”>
<head lang=”en”>
<link data-require=”bootstrap-css@3.2.0″ data-semver=”3.2.0″ rel=”stylesheet” href=”bootstrap.min.css”/>
<link rel=”stylesheet” type=”ng-grid.css”/>
<link rel=”stylesheet” type=”text/css” href=”style.css”/>
<script src=”jquery-1.8.2.js” type=”text/javascript”></script> // not necessary to add
<script src=”angular.js” type=”text/javascript”></script>
<script type=”ng-grid-1.3.2.js”></script>
<script type=”main.js”></script>
<body ng-controller=”MyCtrl”>
<div class=”gridStyle” ng-grid=”gridOptions”></div>

Step 1 : Here ,  i have declare one <div> and class=”gridStyle” grid style is a inbuilt class of the Angular ng-grid.

  • ng-app : Root Element of the HTML.The first ngApp found in the document will be used to define the root element to auto-bootstrap as an application.The ngApp directive designates the root element of the application and is typically placed near the root element of the page – e.g. on the <body> or<html> tags.

  • ng-Controller: Actually AngularJs is working on basic concept of Modal , View and Controller . ng-Controller is a inbuild property in angular. Now,You have question Right ? Why it is necessary to write? Exactly, it is most important . if you are not include than you can not use your Scripting logic with HTMl element.

    The ngController directive specifies a Controller class.The class contains business logic behind the application to decorate the scope with functions and values.The type of the ng-Controller is “Expression“. ng-controller="as propertyName".

  • ng-grid=”gridOption” is a inbuilt property in Angular. “gridoption” is custome option list which is created by coder in custom js File . ii know you guys are little bit panic or confuse , but trust me , Honestly saying You can understand better , how to work this at end of the post .


var app = angular.module(‘myApp’, [‘ngGrid’]); // myApp is our Root Element of the HTML. Ican say it’s Container to contain the element and data binding.
app.controller(‘MyCtrl’, function($scope,$http) { // Myctrl is controller
method: ‘GET’,
url: _spPageContextInfo.webAbsoluteUrl + “/_api/web/lists/getByTitle(‘Task’)/items?$select=Title,CustomDate,Modified”, //rest Api to get the a Data from the Sharepoint list .
headers: { “Accept”: “application/json;odata=verbose” }
}).success(function (data, status, headers, config) {
$scope.totalServerItems = data.d.results;
}).error(function (data, status, headers, config) {
alert(“Error Occured” + “Status Code = ” + Status);
$scope.gridOptions = {
data: ‘totalServerItems ‘,
columnDefs: [
{field: ‘Title’, displayName: ‘Title’},
{field: ‘CustomDate’, displayName: ‘Date’,cellFilter: ‘date:\’dd-MMM-yyyy\”}]

$scope,$http ? What is it ?  . . Wait wait wait … i m going explain it in detail . . . 🙂

Scope As Data-modal :

Scope is the glue between application controller and the view.Both controllers and directives have reference to the scope, but not to each other. This arrangement isolates the controller from the directive as well as from the DOM.

$http A Service

The $http service is a core Angular service that facilitates communication with the remote HTTP servers via the browser’s XMLHttpRequest object .Simple language it use to get data from external sources.


Column Definition to display the column to gird.There’s  bunch of options available in angular . you can utilize it depending on your requirement.I have used Field which is display no of  column to grid .

Field has two property : 1)field : which is column name which you want to display data or ic an sat binding of data. 2) displayName which renders  the column header or Title on page .

You can find other option From bellow link .

now you can Call this index.HTMl file to  Content Editor Web part . and Refresh the page . . . You can see list of data in CEWP and That will be amazing. . .

I  tried my best to describe the concept.I hope, you guys enjoyed this blog . If have an any query , kindly leave your comment.

Happy Coding 🙂

Display and slide picture From Picture Library in Content Editor webpart using CSOM in 2010/13


Today,I am going to Explain you here How to Display and slide picture From Picture Library in Content Editor webpart using CSOM

this is simple task Just Follow below step you will get the output

  • Create Js File or txt File and copy past below code in your File (Explainationcode of  code Find with comment in code file)
  •  Uplode file in style Library(Recomended) or any Library
  • Create Picture Library or you can use asset Library as well and uplode some slider images.
  •  Go to Your SP site and add Content Editor web part..
  • Editwebpart and   link with your JS(provide full URL or path of your Js which you have uplode in Style Library)
  • Apply and Ok now your Images is Ready to Slides in CEWP Cheers!!!

Below is Code for your JS or txt File

<div style="position: relative" id="imgCntr" paddingLeft="5px" peddingRight="5px">


<script src=""></script>

<script type="text/javascript">

ExecuteOrDelayUntilScriptLoaded(loadSlideImages, "sp.js");
//Recommended to define this fun First 

function onQuerySucceeded(sender, args) {
var listItemInfo = '';
var listItemEnumerator = frontPictureItems.getEnumerator();
var listItems = '';
while (listItemEnumerator.moveNext()) {
var oListItem = listItemEnumerator.get_current();
listItems += '<img src="http://sp:1000/student/iin/MySlider1/' + oListItem.get_displayName() + '.jpg" style="position:absolute" height="300px" width="900px"/>';


function onQueryFailed(sender, args) {
alert('Request failed. ' + args.get_message() + 'n' + args.get_stackTrace());

function initSlider() {
$('#imgCntr img:gt(0)').hide();
setInterval(function(){$('#imgCntr :first-child').fadeOut().next('img').fadeIn().end().appendTo('#imgCntr');}, 6000);

var siteUrl='http://sp:1000/student/iin';
//i have taken static URL here you can used Absolute URL as well

function loadSlideImages() {
var clientContext = new SP.ClientContext(siteUrl); 
var oList = clientContext.get_web().get_lists().getByTitle('MySlider');//get PicLibrary

var camlQuery = SP.CamlQuery.createAllItemsQuery();
//you can use caml syntax to get desire result i have Just take all field
this.frontPictureItems = oList.getItems(camlQuery);
clientContext.load(frontPictureItems, 'Include(Id,DisplayName,FileLeafRef,FileDirRef)');
//load neccessary Field to load image

 Function.createDelegate(this, this.onQuerySucceeded),
 Function.createDelegate(this, this.onQueryFailed));


now Run your site…. wow your CEWP Image slider is ready

Happy Coding


How Get Calendar recurrent events by CSOM from SharePoint 2013.

Hi I am Going to Explain you here how to get Recurrence Event From your Sharepoint Calender List Using Client Object model(CSOM) Getting Recurrence Event From List using Server OM  is bit eassy as Below

SPQuery query = new SPQuery();
query.ExpandRecurrence = true;

query.Query = String.Format(
"" +
"" +
"" +

Now Coming on CSOM-

  • The problem with recurrence is that there is only a single list item. The recurrence information is stored inside a hidden field of that list item called ‘RecurrenceData’ as XML that gets calculated out. Unfortunately Microsoft.SharePoint.Client.CamlQuery doesn’t have the properties that SPQuery does in the server object model to transform this information.
  • What is a little more frustrating is that the new OData operations through REST do not support the DateTimeRangesOverlap operator or “querying as to whether a date time falls inside a recurrent date time pattern

But Nothing is impossible…….. Final way is call old-fashion List.asmx.

  • There was a way to call Lists.asmx in versions before 2013 using SOAP and pass an entire XML message which would allow you to use the DateRangesOverlap filter in the query, and allow you to pass QueryOptions that would include ExpandRecurrence and CalendarDate, but it was flaky trying to pass an actual datetime value for CalendarDate as the value to check if the event overlaps with.
  function GetItemsFromCalendarAsmx () {
wsURL = webUrl + “_vti_bin/Lists.asmx”;
var xmlCall =
“<listName>” + calendarGuid + “</listName>” +
“<query>” +
“<Query>” +
“<Where>” +
“<DateRangesOverlap>” +
“<FieldRef Name=\”EventDate\” />” +
“<FieldRef Name=\”EndDate\” />” +
“<FieldRef Name=\”RecurrenceID\” />” +
“<Value Type=’DateTime’><Year/></Value>” +
“</DateRangesOverlap>” +
“</Where>” +
“</Query>” +
“</query>” +
“<queryOptions>” +
“<QueryOptions>” +
“<ExpandRecurrence>TRUE</ExpandRecurrence>” +
“</QueryOptions>” +
“</queryOptions>” +
“</GetListItems>” +
var result = [];
url: wsURL,
type: “POST”,
dataType: “xml”,
async: false,
data: xmlCall,
complete: function (xData, status) {
Core.LogMessage(“Core.GetItemsFromCalendarAsmx-> url: ” + wsURL + ” status: ” + status);
if (status === “success”) {
var root = $(xData.responseText);
root.find(“listitems”).children().children().each(function () {
$this = $(this);
var ids = $this.attr(“ows_UniqueId”).split(“;”);
var rec = $this.attr(“ows_fRecurrence”);
“StartTime”: $this.attr(“ows_EventDate”),
“EndTime”: $this.attr(“ows_EndDate”),
“Title”: $this.attr(“ows_Title”),
“Recurrence”: (rec === “1” ? true : false),
“Description”: Core.HtmlDecode($this.attr(“ows_Description”)),
“Guid”: ids[1],
“Id”: ids[0],
contentType: “text/xml; charset=\”utf-8\””
return result;

hope you GET expected Solutions

Happy Coding Thanks SPS

How to Validate XmlNodes in Xml Document?

We have to clear about terms “XMLNodes” and “XMLDocument”.

XMLDocument : very simple way any file with extension .xml is a “XMLDocument”.

And Every XMlDoc has an one or more XMLNodes.

Let me Explain in Brief….

Let’s Guess here a XMlDocument Test.xml

<Test>   //Test is known as a XMlNode.
     <Test1>  // Test1 known as  a childnode of XMlnode Test.
            ID=”1″,     // Id and name known as Xml Attribute of Test1 node.
Now you are understand basic concept of XMlNodes and XmlDoc.

Now fetch the Xml file from user or from source to validate the XMlnodes,

     You have to import Using Microsoft.XML;  // Namespace

var Doc = new XmlDocument();  // Variable to store the XmlDocument.
Doc.Load(“//Test.xml”); // To load our Xml file to Console application.
XmlNodeList AllfieldTags = Doc.GetElementsByTagName(“Test”);//Get all the child Nodes of the Test Node.
foreach(XmlNode CurrentFields in AllFieldTag)
Public static class Validate(XmlNode Current)
     XmlNodelist list= Current.ChildNodes;
    for (int Index = 0; Index < list.Count; Index++)
for (int SubIndex = Index + 1; SubIndex < list.Count – 1; SubIndex++)
if ((list[Index].Attributes[“ID”].Value ==                     list[SubIndex].Attributes[“ID”].Value) ||       (list[Index].Attributes[“Name”].Value ==     list[SubIndex].Attributes[“Name”].Value))
flag = true;
if (flag == true)
if (flag == true)
return false;
return true;

U can Validate attribute value in XMl File Using For loop as i mention above code.

:):)!!Happy Coding!!:):)

Enable Geo Location column using PowerShell in SharePoint 2013

To integrate maps and Geo Location in SharePoint, Geo Location column has been provided in SharePoint.

Which will not visible by-default. We can add this column in particular site, web or list.

One thing i need to specify that SharePoint 2013 uses Bings Maps to render the map of the location stored in Geo Location column.

To add Geo Location column we need powershell with admin user login.

Create PowerShell script add following code and save as demo.ps1

$fieldXml = “<Field Type = ‘Geolocation’ DisplayName=’Geo Location’ Name=’geolocation’ Group=’custom fields’/>”
#get spweb object
$web = Get-SPWeb “YourSiteName

In this Code replace “YourSiteName” with your “site url”. You can also change display name of column.

Now run this PowerShell script. Geo Location will be added in your site column. Now you can add this column in your list/library.

Thank you for reading.

Code, Play and Learn…