1

I just started using JSLink, and i think it's great! But now i'm facing a problem with the following...

I have a DocLib where i want to display the Description field beneath the Title field. This works, but i need to include the actual column in the view to make it work. So now i have a view where the description is showing twice...

this is my code:

(function () {
var overrideCtx = {};
overrideCtx.Templates = {};
overrideCtx.Templates.Fields = {
'Title': { 'View': ShowDesc }
}; 
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);       
    })();

function ShowDesc(ctx) {
debugger;
var fieldVal = ctx.CurrentItem.Title;
var descVal = ctx.CurrentItem["Description0"];
var fileRefVal = ctx.CurrentItem["FileRef"];

var html = "<a href='" + fileRefVal + "' target='_blank'>" + fieldVal + "</a>";
html += "<br/>" + descVal;

return html;
}

How can i hide this field/column in my view and still show the description beneath the title?

Thanks in advance!!!

1
  • Or is there a way to hide a certain column header? Jul 25, 2014 at 10:58

1 Answer 1

1

You are currently overriding a field. You can instead override the entire view, and display the fields you wish in whatever manner you wish. You need to set a few extra properties in the overrideCtx.Templates object, but it's rather simple. Here is an example:

(function () {
    var overrideCtx = {};
    overrideCtx.Templates = {};

    overrideCtx.Templates.Header = "<div><b>My List</b></div><table>";
    overrideCtx.Templates.Item = ItemOverride;
    overrideCtx.Templates.Footer = "</table>";

    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
})();

function ItemOverride(ctx) {
    var fieldVal = ctx.CurrentItem.Title;
    var descVal = ctx.CurrentItem.Description0;    // You can use dot notation if you prefer
    var fileRefVal = ctx.CurrentItem["FileRef"];

    var html = "<td><a href='" + fileRefVal + "' target='_blank'>" + fieldVal + "</a>";
    html += "<br/>" + descVal + "</td>";

    //Add your other fields, in whatever order you like, between <td> elements

    return "<tr>" + html + "</tr>";
}

Here are some links that may help:

http://www.learningsharepoint.com/2013/04/07/styling-announcements-with-javascript-using-js-link-in-sharepoint-2013/

http://msdn.microsoft.com/en-us/magazine/dn745867.aspx

2
  • Thanks, i tried that already. The thing is, I need the filter/sort functionality from the header bar. Jul 25, 2014 at 13:10
  • Ah, yes, that creates a dilemma. If you don't mind a custom approach that is JavaScript heavy, you can use REST to retrieve the data, and display the results in a jQuery DataTable. It has the sort/filter functionality builtin.
    – wjervis
    Jul 25, 2014 at 14:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.