javascriptsharepoint-2013jslink

JSLink to Hyperlink Column in SharePoint List


I have an external list in SharePoint that includes a URL column. The URL column is a calculated field in SQL server, so the entire URL is already there. I need this field to hyperlink and I have been trying to use JSLink to do so. What would the JavaScript for that look like?

For example, if my fields were...

First Name | Last Name | Profile URL

How would I get the URL in the Profile URL field to hyperlink?

I have been looking for solutions all morning without any luck. I am not familiar with JavaScript, so the code I am using is pieced together from posts I have been reading. I have made sure the my JSLink address is correct.

~site/SiteAssets/myCode.js

I have tried different variations of code. My latest is this:

(function () {  

    var profUrlField = {};  
    profUrlField.Templates = {};  
    profUrlField.Templates.Fields = {  
        "Profile_X0020_URL": { 
        "View": function (ctx) {
                var urlField = ctx.CurrentItem[ctx.CurrentFieldSchema["Profile_X0020_URL"]];  

            return "<a href='" + urlField + "'>" + urlField + "</a>";  
            }
        }  
    };  
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(profileUrlField);  
})();

After applying my JSLink to my web part I reload the page and nothing happens. No errors but no links.

I'm also not sure how to reference the column. In SQL Server it is PROFILE_URL, but in the SharePoint list header it is Profile URL.


Solution

  • Modify the code as below to check if it works.

    (function () {  
        var profUrlField = {};  
        profUrlField.Templates = {};  
        profUrlField.Templates.Fields = {  
            "PROFILE_URL": { 
                "View": function (ctx) {
                    var urlField = ctx.CurrentItem[ctx.CurrentFieldSchema.Name];  
                    return "<a href='" + urlField + "'>" + urlField + "</a>";
                }
            }  
        };  
        SPClientTemplates.TemplateManager.RegisterTemplateOverrides(profileUrlField);  
    })();