sharepoint SharePoint 2013 Client Side Rendering Change hyperlink of fields/columns inside the list view using CSR


Example

Below example shows how to change the hyperlink for "ID" and "Title(LinkTitle)" field inside the list view using CSR.

Step1 : Create a JS file and paste below code

(function () {
    
    function registerRenderer() {
        var ctxForm = {};
        ctxForm.Templates = {};

        ctxForm.Templates = {
            Fields : {
                'LinkTitle': { //------ Change Hyperlink of LinkTitle
                    View : function (ctx) {
                        var url = String.format('{0}?ID={1}', "/sites/Lists/testlist/EditItem.aspx", ctx.CurrentItem.ID);
                        return String.format('<a href="{0}" onclick="EditItem2(event, \'{0}\');return false;">{1}</a>', url, ctx.CurrentItem.Title);
                    }
                },
                'ID' : { //------ Change Hyperlink from ID field
                    View : function (ctx) {
                        var url = String.format('{0}?ID={1}', "/IssueTracker/Lists/testlist/DisplayItem.aspx", ctx.CurrentItem.ID);
                        return String.format('<a href="{0}" onclick="EditItem2(event, \'{0}\');return false;">{1}</a>', url, ctx.CurrentItem.ID);
                    }
                },

            }
        };
        SPClientTemplates.TemplateManager.RegisterTemplateOverrides(ctxForm);
    }
    ExecuteOrDelayUntilScriptLoaded(registerRenderer, 'clienttemplates.js');

})();

Step 2 : GoTo web part properties of List View and add JS Link reference to this newly created js file (e.g. ~sitecollection/SiteAssets/CSRCodeFile.js)

(Note : Refer your JSlink in this format only. "~sitecollection/YourJSfFilePath".)

Step 3 : Appy and Done