Make Title field read-only in SharePoint list edit form using JSLink

by
Complete SharePoint Training Course ($46 OFF)

This SharePoint customization tutorial, I would like to enhance your Client-Side Rendering code patterns in SharePoint 2013. Here we will see how can we make Title column or field read-only using SPClientTempltes and JSLink in SharePoint Online/2013/2016 in Edit form.

My client asked me to implement a quick change by making Title field read-only when an item is editing. This must be a quick and must not include any Visual Studio code as it has to be deployed in O365.

Make Title field read-only in SharePoint list edit form using JSLink

I have implemented a solution using SPClientTemplates and added this as a JSLink reference as part of the view in list item edit page in SharePoint.

Please follow the below steps to achieve this:

Copy the below code block and save it as “ttlReadOnlyEditPage.js”

var EnjoySharePoint = EnjoySharePoint || {};
EnjoySharePoint.TitleFieldReadOnly = function () {
varctx= {};
ctx.Templates= {};
ctx.Templates.Fields= {
Title: {
DisplayForm:null,
EditForm:EnjoySharePoint.TitleReadOnly,
NewForm:null,
View:null
}
};
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(ctx);
};
EnjoySharePoint.TitleReadOnly = function (ctx){
returnSPField_FormDisplay_Default(ctx);
};
EnjoySharePoint.TitleFieldReadOnly();

Copy/upload the js file on to site asserts / any document library.

Make Title field read only in SharePoint list edit form using JSLink

Open the SharePoint list and click on any list item, Edit the list item.

Click on edit page option as part of site setting gear icon.

Edit list view webpart and find for miscellaneous zone.

Refer the js file copied in Asserts library and apply the changes.

Make Title field read only in SharePoint list edit form using JSLink

Save the page and now you can see the Title field appears read-only like below:

Make Title field read only in SharePoint list edit form using JSLink

You may like following SharePoint tutorials:

This SharePoint tutorial, we learned to make Title column or field read only using SPClientTempltes and JSLink in SharePoint Online/2013/2016 in Edit form.

>