Wednesday, March 12, 2014

Simple Concept: List View How to add a link to the column other than Title?

Question: I have a column that is not a default Title. I need to have this column rendered with a link to display form in the list view. How can I do it?
Answer:
You have several options, the old ones are described in Simple Concept: List View How to add context menu to the column?

A new versatile approach - JSLink. It works as a charm on prem , as well as on SharePoint Online.

1. Create a js file to render template for the field

var ebt = ebt || {};

// shows link to list item display form
ebt.displayLinkTemplate = function (ctx) {
    if (ctx == null)
        return '';
    var value = ctx.CurrentItem[ctx.CurrentFieldSchema.Name];
    var url = ctx.displayFormUrl + "&ID=" + ctx.CurrentItem.ID + "&ContentTypeID=" + ctx.CurrentItem.ContentTypeId;
   

    return "<a href='" + url + "'>" + value.Label + "</a>";
};

(function () {
    var context = {};
    context.Templates = {};
    context.Templates.Fields = {
        "Project": { "View": ebt.displayLinkTemplate }        
    };
    
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(context);
})();

2. Upload the js file into Asset Library and then update the view.JSLink.
I use PowerShell for SharePoint Online By Gary Lapointe

$PrjLst= Get-SPOList -Web "/" -identity "Projects List"
$PrjViews=$PrjLst.GetViews()  
$prjDefaultView = $PrjViews|Where-Object {$_.Title -eq "ProjectView"}
$prjDefaultView.JSLink="~site/SiteAssets/ebt.root.projectlistview.js"
$prjDefaultView.Update()
$PrjLst.Update()