http://code.msdn.microsoft.com/office/SharePoint-2013-Customize-0663543f
http://msdn.microsoft.com/en-us/library/jj220061.aspx
http://elczara.wordpress.com/2013/09/06/client-side-rendering-in-new-form-for-sharepoint-online-and-on-premise/
http://elczara.wordpress.com/2013/08/28/client-side-rendering-in-view-form-for-sharepoint-online-and-on-premise/
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
AnnouncementCSR -> Lists -> Announcements -> Schema.xml
go to <Forms> tag and add JSLink to DisplayForm, EditForm, NewForm forms as follows
AnnouncementCSR -> AppManifest.xml
change the start page url as "AnnouncementCSR/Lists/Announcements/AllItems.aspx"
AnnouncementCSR -> Right Click -> Deploy
Thank You.
http://msdn.microsoft.com/en-us/library/jj220061.aspx
http://elczara.wordpress.com/2013/09/06/client-side-rendering-in-new-form-for-sharepoint-online-and-on-premise/
http://elczara.wordpress.com/2013/08/28/client-side-rendering-in-view-form-for-sharepoint-online-and-on-premise/
vs2012->file->new->project c# ->office/SharePoint->apps->apps for SharePoint 2013-> "AnnouncementCSR"
AnnouncementCSR -> Right Click -> Add -> New Item -> Select 'List' Template and name it as 'Announcements'
AnnouncementCSR -> Scripts -> add "AnnouncementsCSR.js"
and add below javascript to AnnouncementsCSR.js file
(function () {
overrideAllItems();
overrideNewForm();
})();
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;
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(allItemsOverride);
}
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>" +
"</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 },
};
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(newFormOverride);
}
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) +
"</div>";
}
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"
OnQuickLaunch="TRUE"
TemplateType="10000"
Url="Lists/Announcements"
Description="My List Instance">
<Data>
<Rows>
<Row>
<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>
</Row>
<Row>
<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>
</Row>
<Row>
<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>
</Row>
<Row>
<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>
</Row>
</Rows>
</Data>
</ListInstance>
</Elements>
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
<ViewFields>
<FieldRef Name="Title"></FieldRef>
<FieldRef Name="Body"></FieldRef>
<FieldRef Name="Modified"></FieldRef>
</ViewFields>
AnnouncementCSR -> Lists -> Announcements -> Schema.xml
go to <Forms> tag and add JSLink to DisplayForm, EditForm, NewForm forms as follows
<Forms>
<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" />
</Forms>
AnnouncementCSR -> AppManifest.xml
change the start page url as "AnnouncementCSR/Lists/Announcements/AllItems.aspx"
AnnouncementCSR -> Right Click -> Deploy
No comments:
Post a Comment