Change hyperlink of fields/columns inside the list view using CSR

In this post, I will show you how can you change the hyperlink of a field/column inside SharePoint list view using Client Side Rendering (CSR).

You can use this method to change the hyperlink any field that is available in your list view.

Refer below example.

Here we are changing the hyperlink of “ID” and “Title(LinkTitle)” field.

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('{1}', 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('{1}', 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