Client Side Rendering with JavaScript Templates in SharePoint 2013

Leave a comment


Share Your Point

Introduction

In SharePoint 2010 we used XSLT to customize the look of lists and forms. Client Side Rendering (CSR) in SharePoint 2013 is the next step in easy customization and changing the look of SharePoint. CSR is based on JavaScript (and HTML), so its flexibility allows using it in sandbox solutions and SharePoint Online where there is no place to use code-behind.

Parts of SharePoint lists that can be customized this way are:

  • List view
  • Forms – Display, New, Edit Form
  • Fields

View original post 357 more words

Control ‘GridView’ of type ‘GridView’ must be placed inside a form tag with runat=server.

Leave a comment


Please add below functions in code-behind cs file.

  public override void VerifyRenderingInServerForm(Control control)
{
/* Confirms that an HtmlForm control is rendered for the specified ASP.NET
server control at run time. */
}

public override bool EnableEventValidation
{
get { return false; }
set { /*Do nothing*/ }
}

Unable to see more than 100 Items from SharePoint list using Rest API

Leave a comment


In your custom list which is having more than 500 records. When you query with REST API it returns only 100 records.

Eg: http://<domain>/<site url>/_api/web/lists/GetByTitle(‘ListName’)/items

Solution:
To override that you need to append $top=3000 or $top=5000

Eg: http://<domain>/<site url>/_api/web/lists/GetByTitle(‘ListName’)/items?$select=AuthorId&$top=3000

Here authorId is CreatedBy Column.

Feel free to email me at bharath.chennu@onetidbit.com

 

 

How to identify sharepoint 2013 controls with javascript in a sharepoint newform.aspx and clear them

Leave a comment


Textbox with ID
Choice field with ID
DateTime with ID

but differs for Metadata field and Enhanced rich textbox

Metadata field will vary since its an array
===========================================

var myMetadataField = jQuery(‘div[Title=”Title of the field”]’).find(‘div [role=”textbox”]’);
myMetadataField.text(“”);

Enhanced Rich textbox
======================

var RichTTB=jQuery(‘div[id=”Rich_x0020_description_d7e728f9-1cc7-497a-8c6b- e7ec68ee9f97_$TextField_topDiv”]’).find(‘div[role=”textbox”]’);
RichTTB.text(“”);

People picker field
====================

var spclientPeoplePicker = SPClientPeoplePicker.SPClientPeoplePickerDict[“_x0066_md4_62a2c22c-557e-4650-9454-cb293b0f44aa_$ClientPeoplePicker”];
if (spclientPeoplePicker) {
var ResolvedUsers = jQuery(document.getElementById(spclientPeoplePicker.ResolvedListElementId)).find(“span[class=’sp-peoplepicker-userSpan’]”);
jQuery(ResolvedUsers).each(function (index) {
spclientPeoplePicker.DeleteProcessedUser(this);

});
}

Get Users and update new user in People field of a particular List Item in Sharepoint 2013

Leave a comment


1) Use REST API url to get the users in people field
2) Write a function where we use ajax to get the data and declare an array and push the existing data along with user you want to add and at last update the listitem column People field.

You can write the code in a button click of a javascript.

Button
======

<input id=”btnUTSubmit” type=”submit” value=”submit” onclick=”insertToList();” style=”text-align: center;width: 100px;margin: 0 auto;display: block;”>

Function
========
Name of the function is: insertToList() and name of list is DOCS and columnname is SchoolUsers

function insertToList() {
var clientContext=SP.ClientContext.get_current();
//Let’s say here item id will be there in URL. We will get it by getting Querystring

// <siteurl>?pdfID=2
JSRequest.EnsureSetup();
itemId=JSRequest.QueryString[“pdfID”];
//REST URL
var urlForAllItems =”/_api/web/lists/getbytitle(‘DOCS’)/items(“+itemId+”)?$select=SchoolUsers/Title&$expand=SchoolUsers/Id”;

//function to get items

getItems(urlForAllItems);
}

Function to get Users and Update
=================================

function getItems(urlForAllItems))
{

$.ajax({

url: “https://abc.hyt/abc&#8221; + url,

type: “GET”,

headers: {

“accept”: “application/json;odata=verbose”,

},

success: function (data) {

var clientContext=SP.ClientContext.get_current();
var oList = clientContext.get_web().get_lists().getByTitle(‘DOCS’);
var itemId = getQuerystring(“pdfID”);
var itemToUpdate = oList.getItemById(itemId);
var users =[];

for(var i = 0; i < data.d.SchoolUsers.results.length;i++)
{

users.push(SP.FieldUserValue.fromUser(data.d.SchoolUsers.results[i].Title));

}

users.push(SP.FieldUserValue.fromUser(_sgContext.currentUser.Name));
itemToUpdate.set_item(“SchoolUsers”, users);
itemToUpdate.update();
clientContext.load(itemToUpdate);
clientContext.executeQueryAsync( );

alert(“Thanks for Update the field with new user”);

},

error: function (error) {

alert(JSON.stringify(error));

}

});
}

Image slideshow using document library in SharePoint 2013

Leave a comment


1) How to genereate a image slideshow with using list in SharePoint 2013?
A) Concept:

backend: Sharepoint Documnet Library
Frontend animation: bxslider (js and Css)

Step -1:
Create a document library name it as: banners and add 3 images.

Step-2:
Create a sharepoint page and Insert banners list webpart.
After adding webpart. Go to webpart properties by edit properties.
In JS link give the paths of our CSR (JS file and bxslider.js file).

For example: ~site/Style Library/bx-slider.js|~site/Style Library/Generatebanner.js

Before we must add bxlider.js and its css files into style library.

Download those files at: http://bxslider.com/

Step-3:

Add CSR coding into our Generatebanner.js.

(function () {
loadCss(‘/sites/abc/Style%20Library/bxslider.css’);

function OnEventsViewPostRender(renderCtx) {
jQuery(document).ready(function(){

//write any jquery code if you want

});
}

function SliderscriptLoadSuccess(){}
function loadCss(url) {
var link = document.createElement(‘link’);
link.href = url;
link.rel = ‘stylesheet’;
document.getElementsByTagName(‘head’)[0].appendChild(link);
}

function OnEventsViewPreRender(renderCtx) {
}
function RenderBannerPhotos(renderCtx) {

var listData = renderCtx.ListData;
if (renderCtx.Templates.Body == ”) {
return RenderViewTemplate(renderCtx);
}
var bannersliderHtml = ”;

bannersliderHtml += ‘

‘;

bannersliderHtml += ‘

‘;

for (var idx in listData.Row) {
var listItem = listData.Row[idx];

var title = listItem.Title;
var itemID = listItem.ID;
var imgURl = listItem.FileRef;
var redirectURL=listItem.Url;

sniipet-lib-galleryslides

bannersliderHtml += divHTML;


}

bannersliderHtml += ‘

‘;
bannersliderHtml += ‘</div>’;
return bannersliderHtml;
}

function RenderEventsViewBodyTemplate(renderCtx) {
if(renderCtx.ListTitle == “BannerPhotos”) {
return RenderBannerPhotos(renderCtx);
}
}
function _registerEventsViewTemplate() {

var eventsViewContext = {};

eventsViewContext.Templates = {};
eventsViewContext.Templates.View = RenderEventsViewBodyTemplate;
eventsViewContext.OnPreRender = OnEventsViewPreRender;
eventsViewContext.OnPostRender = OnEventsViewPostRender;
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(eventsViewContext);
}
ExecuteOrDelayUntilScriptLoaded(_registerEventsViewTemplate, ‘clienttemplates.js’);

})();

5) Refresh the page you will get images sliding

For any queries feel free to contact me

Change the default image for document library folders

1 Comment


If you are not having Sharepoint 15 hive access you can change folder image in the following way.

Step 1:

upload the new folder icon in style library

Step 2:

Create a test document say ex:TestLib library and In that create few folders
1) Test1
2) Test 2
3) Test3

Now create a new Sharepoint page and insert the TestLib webpart. In the same page create a script editor webpart and add the below code.

Now you can see the folder icon changed with new image you placed in style library as mentioned in Step 1

<style type=”text/css”>
.ms-vb-icon > IMG, .ms-vb-icon > a > IMG {
width: 40px; /* increase image width to 40 px */
content:url(“https://xyz/sites/abc/Style%20Library/Images/Places-folder-red-icon.png “);
}

Older Entries

%d bloggers like this: