How to set, Person or Group field to Empty or Null in SharePoint using JSOM

There was a requirement for me, where I need to set/update custom "Person or Group" field column to empty using JSOM

Here is the simple way to do that

Create an empty array

var oUser = new Array();

and pass that empty array to column of type "Person or Group"

listItem.set_item('CustomModifiedBy', oUser)

In the above code snippet, 'CustomModifiedBy' is of type "Person or Group"

JSRequest

Today I was exploring JSRequest in sharepoint and I found it very useful for some of the most common things that we will be doing in SharePoint.

Some of the uses of JSRequest are:

1. Reading querystring values from the URL
2. Getting the file name of the page
3. Getting the path name of the file that is getting browsed

Before using the JSRequest properties, you need to call a method called "EnsureSetup" on JSRequest

JSRequest.EnsureSetup();

//Getting a querystring value called searchResults
var searchResults = JSRequest.QueryString["searchResults"]

//Get the current page name. i.e - "default.aspx"
var pageName = JSRequest.FileName;

//Get the current path name. i.e - "/sitecollectionurl/libraryname/default.aspx"
itemId = JSRequest.PathName;


Referred the following url's for the same

http://mahedevelopment.blogspot.com/2013/03/getting-query-string-values-using.html

http://praneethmoka.wordpress.com/2012/01/12/some-useful-javascript-variablesfunctions-in-sharepoint/


Its easy to use and easy to remember

Usage of JSLink in SharePoint 2013

In this post we will see how to use the JSLink in SharePoint 2013.
 
Till sharepoint 2010, to customize any list views(Lists or Libraries), we are using XSLT to customize the representation of the list view or document library view.
 
In SharePoint 2013, a new feature has been added called (Client Side Rendering). In this blog post we will see what is client side rendering and how to use client side rendering and how to debug the same
 
Client Side Rendering is a new feature that got introduced in SharePoint 2013 which will allow the developers to transform the data on the client instead on the server
 
This gives lot of options to the developers to use client side technologies such as HTML, JQuery and any other javascript frameworks.
 
Some of the examples where the Client Side Rendering will be helpful:
 
1. Format the values in the list view web parts
2. Make the columns as read only in the Edit or New list form
 
 
In this blog post we will see how we can use client side rendering to format the values in the XsltListViewWebPart
 
When we talk about, client side rendering, there are two things that we need to consider in SharePoint 2013.
 

• Display Templates

Display Templates along with Control Templates and Item Templates are used in SharePoint Search and is used to completely transform the search results display

•  JSLink

JSLink is new property attached to list views, content types, fields and how the JSLink works is, we just need to associate a link to a javascript file to this JSLink property associated to either list views or list forms such as new or edit form
 
See the attached screen shot where the JSLink property will be found for a list view web part

In this blog post we will see how to modify the XSLTListViewWeb Part to add hyperlinks to one of the list column dynamically using the javascript and also, add some graphical image to another column where we want to display the site usage in a graphical representation

We can still achieve the same thing in the old XSLT approach and using XSLT based approach is old way of achieving the same thing

Javascript File

First we will create the javascript file and we will see how to associate this javascript file to the JSLink textbox control to the XSLTListView Webpart

As explained earlier, we will try to add a new value a Permission column. By default there wont be any value in the permission column

But when the list is rendering we will get the value from the "SiteURL" column and we will append site collection permission page of that url and we will render that new value to the "Permission" column

See the below javascript file that I have written to modify the same and we will discuss in detail about this javascript



First we need to write a javascript function which is self invoking and the syntax of that function is


(function(){
})();

So, when the page loads, that function will be called automatically. With in that function, we will write the logic for formatting the list columns inside XSLTListView web part

First we need to declare variables for fields for which we need to override the data

var overrideCtx = {};

overrideCtx.Templates = {};

The script specifies that we need to override the "Permission" column and we need to specify that value for the Fields override

The syntax for Fields to override was

overrideCtx.Templates.Fields = {FieldName : {Scope : Override}}

• FieldName - This is the internal name of the field you want to override.
• Scope – This defines when to override the field. The choices are "View","DisplayForm","EditForm", and "NewForm"
• Override – The actual override. This can be a HTML string with JavaScript embedded, or a function to be executed. In our case we are using a function that needs to be executed

overrideCtx.Templates.Fields = {'Permissions': {'View':changePermissionLink}}

In the above syntax, what we are saying was, replace the "Permissions" field value with that value that is returned from "changePermissionLink"

"changePermissionLink" is a custom javascript function that has been written which will return the value that can be placed inside the permission column

If you want to override value of another field, we can add the same to the Fields object as shown below

Next we need to register our override object with SharePoint using RegisterTemplateOverride method as show below

SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);

Now we will see what changes we need to do to "changePermissionLink" to update the new value
 

 

changePermissionLink will take a parameter called ctx, which will give the complete context information of the current item that is being rendered, such as all the list columns information

To get the current field information, we can use either of the below syntax

var fieldValue = ctx.CurrentItem[ctx.CurrentFieldSchema.Name];
                           or
var fieldValue = ctx.CurrentItem.Permissions; //Provided if you know the internal name of the field

Then we will get the SiteURL field using the following syntax

var siteUrl = ctx.CurrentItem.SiteURL;

Then we use the following code to format the hyperlink and return that value. As you can see, we are embedding the html anchor in the format

var permissionUrl = $(siteUrl).html()+"/_layouts/15/user.aspx"

var permissionLink = 'Permission'

return permissionLink;

Associating this JS file to JSLink property of XSLTListView web part.

• Edit the page
• Edit the web part
• In the edit web part properties, go to miscellaneous section there you will find a JS Link text box and to that text box value provide the url of the above JS file

When providing the path to the custom js file to the JSLink property, you can use the below syntax

 

~sitecollection/Style Library/LCACollabDB/JS/LCACollabDBRendering.js

 

To add multiple JS files to the JSLink, you can use the pipe symbol. See the below syntax for the same

~sitecollection/Style Library/LCACollabDB/JS/LCACollabDBRendering.js|~sitecollection/Style Library/LCACollabDB/JS/LCACollabDBRendering1.js

 

 

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:



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




 

New Custom Styles and new bulleted styles to SharePoint 2013 Rich Text Editor

By default SharePoint 2013 RTE provides two bulleted styles such as bullets and numbers as shown below


We can add new styles to support new bulleted styles and for this we need to extend the styles that comes with SharePoint 2013.

In one of my previous post, I have explained how to add new table styles. Here is the URL for the same.

In this pose we will see how we can extend styles and elements of SharePoint 2013 styles so that we can add our own styles

There are two sections in Styles in RTE for SharePoint 2013 called

1. Page Elements
2. Text Styles

First we will see the difference between Page Elements and Text Styles

Page Elements:

Page elements: Page elements are HTML elements such as Span, H1 to H6 etc. This will apply styles to particular html elements.

To add new page element styles we need to use the below syntax

elementName.ms-rteElement-yourName

Here elementName is any html element as explained above. For elements, we need to extend ms-rteElement

Text Styles:

This will allow to change styles for the text portion. For ex: I have a text called: "SharePoint 2013 has great features when compared to SharePoint 2010". I wanted to highlight both SharePoint 2013 and SharePoint 2010 to different styles and in this scenario we will be using text styles where we can apply different styles to the text

ms-rteStyle-yourName

For styles we need to extend ms-rteStyle.

The below steps we will see how we can create new styles and elements. For the elements we will see how we can add new bulleted styles and for styles we will see how we can add new text styles


Steps:

1. Create a new CSS file called RteStyles.css and in that css we will create one CSS styles for text style and another CSS style for elements where we will add new bulleted style for exclamation (!) and section (§) as shown below


We also  build another style for text, where we will highlight the text red in color and we will make the text bold as shown below

RTE Element Styles



In the above RTE element styles, we are trying to add styles to html element h6. We have given the value to -ms-name as "LSW Glyphs Exclamation". A element style will appear in the element section of the RTE Styles as shown  below

We also need to specify -ms-element to true otherwise the new element style will not appear

As you can see, a new styles as been added for exclamation. If you select that styles, a new exclamation will be added at the start of the text. For getting the exclamation we added a glyph style called "\0021".

See the below url for some of the glyphs styles:

http://css-tricks.com/snippets/html/glyphs/

For getting new bulleted styles, we shouldn't use any of the existing html elements. So I have used new elements such as h7, h8 etc. If we use existing html elements such as h1 to h7 or Para tag or Span tag, we wont get bulleted functionality
 
So, to get bulleted functionality, I have used new  elements such as h7 and h8 for exclamation and section bulleted lists. See the below styles for the same



As you can see above, we have added two element styles for h7 and h8 to get new bulleted styles for exclamation and section. See the below image for the same

 

 

 

As you can see in the above figure, two new RTE element styles for h7 and h8 tags as been added

The newly created styles should be added to the master page



Now where ever rich custom editors has been used such as "Publishing Html Fields" or "Content Editor Web parts", the new RTE styles will be seen

For Text styles, we need to follow the same procedure as we followed for elements. Instead of rteElement, we need to specify rteStyles.

Since rteStyles will act on the text portion, no need to specify any html tags before rteStyles.

The signature to extend rteStyles are show below



As you can see in the above, we created rteStyle with styleName and this name can be replaced with your own style name

Also, I have given -ms-name as "New Style" and this name will appear in the RTE styles as shown below 

As seen above, a new text style with the name "New Style" will appear in the Text Styles window

Select some text in the RTE editor and you select the above mentioned styles, then the selected text will have that styles(Text will appear as bold and red color will be applied)
 

Adding custom RTE Table Styles to SharePoint 2013

Out of the box SharePoint RTE provides 12 table styles and there are scenarios where we need to add new table styles.

As seen above, there are 12 table styles and to this we will add two more table styles

SharePoint provides extensibility framework to add custom table styles and in this post we will examine how to add custom table styles to the RTE. We can add as many table styles as we want but we need to follow some naming conventions so that RTE knows to add those custom table styles

In order to add new table styles, we need to extend "ms-rteTable" class and we need to prefix our own name to "ms-rteTable".

If we don't use "ms-rteTable" then new table styles wont appear in the table drop down.

Steps:

 

 

1. Create a new CSS class and I created a class name called customRTETableStyles.css
2. To this css class, I have created the below styles
4. In the above CSS class, I have created my own table style by extending ms-rteTable and I have given the same as "ms-rteTable-myCustomTable"
5. -ms-name: Give some name to property that you wanted to see in the table style drop down.
6. In this case I have given the name as "My Custom Table" and this name will appear at the bottom of all the table styles
7. Save the above CSS file into any sharepoint document library and preferably "Style Library"
8. Refer that css file in your master page
9. Edit any Rich HTML Field or Content Editor Web Part
10. Insert Table and highlight the table and go to Design tab in the ribbon
11. Under table styles, you should see our new table style as shown below

If you select the above table style, the table inside the Rich HTML Field and Content Editor Web Part will have that table style and in this case it is having the following features

1. Table header will be having blue back ground
2. Table border will be having gray color
3. Padding is 10px


In order to add new RTE table style, copy the above code and replace "myCustomTable" with new name and new RTE table style will appear





 

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

 

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.

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

 

 

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

 

 

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

 

 

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 

 

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 

 

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