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

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.

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.

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

You may like following SharePoint tutorials:

• Add JSLink in Task List View in SharePoint Online
• SharePoint Online: Change SharePoint ListView To Jquery Accordion Using JSLink Client Side Rendering
• SharePoint 2013/2016/Online: How to Load multiple js file in JSLink
• Add header and footer to list view web part using JSLink in SharePoint Online/2013/2016
• How to use JSLink in SharePoint 2013/2016/Online
• SharePoint modern list column formatting examples
• Add heading in the default newForm.aspx in SharePoint list using JavaScript and CSS
• Change column ordering in list forms in SharePoint Online/2013/2016
• How to remove/hide default title column from SharePoint Online list (modern/Classic)
• Rename SharePoint 2013 list column title in list view using jQuery
• SharePoint 2013 Increase List Title column width using jQuery

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.