Link Any SharePoint List Column To Item Using CSR

This blog demonstrates how to convert a SharePoint list column into a hyperlink (Link to Item) using CSR function.

In most of the cases, our clients want to have a hyperlink enabled on the SharePoint list columns, instead of using the default Title (Link to Item) Column. So, to achieve this, we can use the following CSR function.

CSR function to link a column to the item

< script type = "text/javascript" > SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
    Templates: {
        Fields: {
            '<ColumnName>': {
                'View': function(ctx) {
                    var url = String.format('{0}?ID={1}', "https://<SiteUrl>/Lists/<ListName>/DispForm.aspx", ctx.CurrentItem.ID);
                    return String.format('<a href="{0}" target="_self">{1}</a>', url, ctx.CurrentItem. < ColumnName > );
                }
            }
        }
    }
});
</script>

In the above function, replace <ColumnName> with the actual column name that you want to render as a hyperlink. Also, replace <SiteUrl> and <ListName> with your original site URL and listname respectively where a user will redirect to when the hyperlink is clicked. In the above function, the mentioned URL will target to DispForm.aspx of the list.

Placing the function in AllItems.aspx View page.

 

• Using SharePoint Designer, open the target list and edit AllItems.aspx View page in the advanced mode.
• Find “PlaceHolderAdditionalPageHead” content place holder and paste the above CSR function inside this placeholder.
• Save and refresh the View in the browser and you will find that the column is rendered as a hyperlink.

 

Note - If you try to place the script inside the web part zone, it will corrupt the View and you will need to recreate the View.

I came across another solution that mentioned adding “LinkToItem=True” attribute in FieldRef on the View page. But the problem with this solution is that the LinkToItem attribute is removed automatically whenever the View settings are changed, like column ordering or column inclusion/exclusion.