Tuesday 10 June 2014

SharePoint JS link List Newform.aspx

Open List NewForm.aspx
You will see List Columns
Take any column Name. Ex: I will take Title
If you want to make that Title as Readonly
We can do it using JS Links.
Before rendering the control JS Link will call, so we will write some code to change the rendering
Now i will write a Javascript file.
(function () {
var myCtx = {};
myCtx.Templates = {};
myCtx.Templates.Fields = {
'Title': { 'NewForm': renderRequestStatus }
};
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(myCtx);
})();
function renderRequestStatus(ctx) {
var formCtxTitleField = SPClientTemplates.Utility.GetFormContextForCurrentField(ctx);
var formCtxTitleFieldId = formCtxTitleField.fieldSchema.Id;
var formCtxTitleFieldName = formCtxTitleField.fieldName;
var formCtxTitleFieldDiv = formCtxTitleFieldName + '_' + formCtxTitleFieldId;
var returnO = '<div><input id='+ formCtxTitleField.fieldSchema.Id +' type="text" name='+ formCtxTitleField.fieldName +' disabled="disabled" /></div>';
return returnO;
}
Save above javascript in one MyCustomForm.js file
Now upload that file in Master Page gallery
Publish Major version
Now go to List Newform.aspx
Click Edit page
go to webpart properties
You can find JS Link
In that textbox add this..
site/_catalogs/masterpage/MyCustomForm.js
Or if you upload in Style Library, you have to give like this..
~site/Style Library/MyCustomForm.js
Save
Refresh
Now you will see
If you want to do same functionality for EditForm, change below code...
'Title': { 'EditForm': renderRequestStatus }