Tuesday, November 5, 2013

Customize list views and forms using client-side rendeing in SharePoint 2013

vs2012->file->new->project c# ->office/SharePoint->apps->apps for SharePoint 2013-> "AnnouncementCSR"
Click on 'Ok' Button
Click on 'Validate' Button 
Click on 'Sign-In' Button
Click on 'Finish' Button.
AnnouncementCSR -> Right Click -> Add -> New Item -> Select 'List' Template and name it as 'Announcements' 
Click on 'Add' Button
Click on 'Finish' Button.

AnnouncementCSR -> Scripts -> add "AnnouncementsCSR.js"
and add below javascript to AnnouncementsCSR.js file
(function () {

function overrideAllItems() {
    var allItemsOverride = {};
    allItemsOverride.BaseViewID = 1;
    allItemsOverride.ListTemplateType = 10000;
    allItemsOverride.Templates = {};
    allItemsOverride.Templates.Header = allItemsRenderAnnouncementsHeader;
    allItemsOverride.Templates.Footer = allItemsRenderAnnouncementsFooter;
    allItemsOverride.Templates.Item = allItemsRenderAnnouncements;

    allItemsOverride.OnPreRender = allItemsOnPreRender;
    allItemsOverride.OnPostRender = allItemsOnPostRender;


function allItemsOnPreRender(ctx) {
    //alert("allItemsOnPreRender: " + JSON.stringify(ctx));

function allItemsOnPostRender(ctx) {
    // alert("allItemsOnPostRender" + JSON.stringify(ctx));

function allItemsRenderAnnouncementsHeader(ctx) {
    var newItemFormUrl = ctx.newFormUrl;
    var newItemLink = "<a onclick='NewItem2(event, '" + newItemFormUrl + "'); return false;' href='" + newItemFormUrl + " target='_self' data-viewctr='0'>New Item</a>";
    return "<div style='border:solid 1px #aaa; padding:4px; background-color: #ddd;' >" + newItemLink + "</div>";

function allItemsRenderAnnouncements(ctx) {
    var itemStyle = "width:600px;margin:12px;";
    var titleStyle = "background-color:black;color:white;padding:2px; padding-left:12px;font-size:1.25em;border-top-left-radius:16px";
    var bodyStyle = "border:black 1px solid;background-color:#ddd;color:#333;padding:4px;border-bottom-right-radius:16px";

    return "<div style='" + itemStyle + "'>" +
               "<div style='" + titleStyle + "'>" + ctx.CurrentItem.Title + "</div>" +
               "<div style='" + bodyStyle + "'>" + ctx.CurrentItem.Body + "</div>" +

function allItemsRenderAnnouncementsFooter(ctx) {
    return "<div style='height:4px;background-color:black' />";

function overrideNewForm() {

    var newFormOverride = {};
    newFormOverride.BaseViewID = "NewForm";
    newFormOverride.ListTemplateType = 10000;

    newFormOverride.Templates = {};

    newFormOverride.Templates.Fields = {
        'Title': { 'NewForm': newFormTitleField },


function newFormTitleField(rCtx) {

    var _myData = SPClientTemplates.Utility.GetFormContextForCurrentField(rCtx);
    var _inputId = _myData.fieldName + '_' + _myData.fieldSchema.Id + '_$TextField';

    window.addTitle = function () {
        var autoTitle = "New announcement made at " + (new Date()).toLocaleDateString();
        var titleField = document.getElementById(_inputId);
        titleField.value = autoTitle;


    return "<div style='border:1px solid #ccc;padding:4px;background-color:#eee;'>" +
           "<div><input value='Add Auto Title' type='button' onclick='addTitle()' style='margin:0px;margin-bottom:4px;padding:4px;color:red;backgroundcolor:#bbb;' /></div>" +
           SPFieldText_Edit(rCtx) +


AnnouncementCSR -> Lists -> Announcements -> AnnouncementsInstance -> Elements.xml
add below data to Element.xml
<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
       <ListInstance Title="Announcements"
                             Description="My List Instance">
                                  <Field Name="Title">Microsoft Releases SkyDrive App For Xbox 360</Field>
                                  <Field Name="Body">Microsoft today announced the release of SkyDrive app for Xbox 360 gaming console. This new app will allow you to enjoy the photos and video you upload on SkyDrive from web or apps through Xbox 360.</Field>
                                  <Field Name="Expires">01/01/2014</Field>
                                  <Field Name="Title">Microsoft Surface tablet arrives at Best Buy today</Field>
                                  <Field Name="Body">Microsoft's Surface  will be available for sale at Best Buy's Web site today starting at 2 p.m. PT. The device will then make it way to Best Buy retail outlets and select Best Buy Mobile stores this Sunday, December 16.</Field>
                                  <Field Name="Expires">07/15/2014</Field>
                                   <Field Name="Title">Microsoft Expands Distribution for Microsoft Surface</Field>
                                  <Field Name="Body"> Microsoft Corp. today announced plans to make Microsoft Surface available at additional retailers as soon as mid-December. In addition, the company announced the extension of the Microsoft holiday stores, including the transition of several of the stores into permanent Microsoft retail outlets.</Field>
                                  <Field Name="Expires">07/15/2014</Field>
                                  <Field Name="Title">Microsoft Surface tablets announced, powered by Windows 8</Field>
                                  <Field Name="Body">After days of speculation and rumors, Microsoft's major announcement has just been unveiled at a press event in Los Angeles: a Surface tablet. We suspected the company might be working on its own tablet, and Microsoft CEO Steve Ballmer revealed the device on stage at Milk Studios in Los Angeles today.</Field>
                                  <Field Name="Expires">07/15/2014</Field>

AnnouncementCSR -> Lists -> Announcements -> Schema.xml
 go to <View BaseViewID="1" and change the <JSLink> as 
<JSLink Default="TRUE">clienttemplates.js|~site/Scripts/AnnouncementsCSR.js</JSLink>

go to <View BaseViewID="1" and add ViewFields as follows as 
                                  <FieldRef Name="Title"></FieldRef>
                                  <FieldRef Name="Body"></FieldRef>
                                  <FieldRef Name="Modified"></FieldRef>

AnnouncementCSR -> Lists -> Announcements -> Schema.xml
 go to <Forms> tag and add JSLink to DisplayForm, EditForm, NewForm forms as follows 
<Form Type="DisplayForm" Url="DispForm.aspx" JSLink="~site/Scripts/AnnouncementsCSR.js" SetupPath="pages\form.aspx" WebPartZoneID="Main" />
<Form Type="EditForm" Url="EditForm.aspx" JSLink="~site/Scripts/AnnouncementsCSR.js"  SetupPath="pages\form.aspx" WebPartZoneID="Main" />
<Form Type="NewForm" Url="NewForm.aspx" JSLink="~site/Scripts/AnnouncementsCSR.js" SetupPath="pages\form.aspx" WebPartZoneID="Main" />


AnnouncementCSR -> AppManifest.xml
change the start page url as "AnnouncementCSR/Lists/Announcements/AllItems.aspx" 

AnnouncementCSR -> Right Click -> Deploy
Thank You.

No comments:

Post a Comment

Featured Post

Azure OpenAI Chat in C# and Python

Azure OpenAI Chat in C#: // Install the .NET library via NuGet: dotnet add package Azure.AI.OpenAI --version 1.0.0-beta.5   using System; u...

Popular posts