Add to Hyperlink to column in SharePoint List using JSLINK - Help

Question

I'm having issues adding a hyperlink to a field using the below. My column field is called LinkTitle (single Line of Text) My view is called Dashboard and i have refrenced the js like so ~sitecollection/SiteName/SiteAssets/jsLink.js But it doesn't work. Any ideas what i'm doing wrong or missing?

(function () {  

    // Create an object that have the context information about the fields that we want to change the rendering of.   

    var nameFiledContext = {};  

    nameFiledContext.Templates = {};  

    nameFiledContext.Templates.Fields = {  

        // Apply the new hyperlink HTML Rendering to the field in your view.  Swap out "<Your Field Name>" for your field name 

        "LinkTitle": { "View": DashBoard }  

    };  

    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(nameFiledContext);  

})();  



// This function applies the rendering logic 

function DashBoard(ctx) {  

    var name = ctx.CurrentItem.LinkTitle;  //Swap out name variable for whatever field contains your hyperlink name



    return "<a target='_blank' href='http://google.com"   

        + name + "</a>";      //Put the url for your hyperlink in the href above

}  

Answer 1

I will suggest you to use the Client Side Rendering like below:

(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/SiteName/Lists/ListName/EditForm.aspx", ctx.CurrentItem.ID);
                        return String.format('<a href="{0}" onclick="EditItem2(event, \'{0}\');return false;">{1}</a>', url, ctx.CurrentItem.Title);
                    }
                },
            }
        };
        SPClientTemplates.TemplateManager.RegisterTemplateOverrides(ctxForm);
    }
    ExecuteOrDelayUntilScriptLoaded(registerRenderer, 'clienttemplates.js');
})();

Here I have added the edit form link on Title (linked to item with edit menu) column whose internal name is LinkTitle. If you want to add it on another column then you need to add the internal name of your column instead of LinkTitle.

You can get the internal name of your column by following this article: How to find the Internal name of columns in SharePoint Online?

How to set the JSLink property of your Web Part:

For detailed steps, check my answer given at: sharepoint 2013 list expand/collapse multiple line text column

Answer 2

Use the masterpage gallery or styles library location to store the jslink file and reference as below:

Sitecollection level: ~sitecollection/_catalogs/masterpage/<your js file>.js

Site level: ~site/_catalogs/masterpage/<your js file>.js