1

I used this solution to open my link in new window, it works great when alone.

Open the list title link in new window using jslink office 365

But when I add to the code below, the title stays bold but the link stays overridden. How can I keep the inline look, with the bold title but keep the link active to open in a new window? All my combinations aren't working for me.

(function () {
    var overrideCtx;
    overrideCtx.Templates = {};
    overrideCtx.Templates.Item = CustomItem;
    overrideCtx.Templates.Header = "<b>Blog Title</b><br><br>";
    overrideCtx.Templates.Footer = "<br>";

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

function CustomItem(ctx) {
    var ret = "<b>" + ctx.CurrentItem.Title + "</b>";
    var ret += "<br>Published Date: " + ctx.CurrentItem.Created;
    var ret += "<br>" + ctx.CurrentItem.Body;
    var ret += "<br># of Comments: " + ctx.CurrentItem.NumComments;
    var ret += "<hr>";
    return ret;
}

On the CurrentItem.Title tag, I added LinkTitle but it returned "undefined".

I also tried adding underneath the .Header tag:

overrideCtx.Templates.Fields = {
    "LinkTitle": { "View" : getLinkLocation }
};

and then the code below in conjunction with the ctx.CurrentItem.Title like:

var ret = "<b>" + '<a href=\"' + ctx.displayFormUrl + '&ID=' + ctx.CurrentItem.ID + '\" target=\"_blank\">' + ctx.CurrentItem.Title + '</a>' + "</b>";

but it wouldn't recognize it.

Any help would be greatly appreciated.

  • Try style="font-weight:bold;" inside the <a> tag. It seems like css is overriding your changes and an !important clause could help that or adding the style in the tag directly – Mike Aug 25 '16 at 19:34
  • I added overrideCtx.Templates.Fields = {"Link.Title":getLinkLocation}}; under the .Header tag – Justin Demers Aug 25 '16 at 19:51
  • and then: function CustomItem(ctx) { var ret = ""; var ret += "<a href=\"' + ctx.displayFormUrl + '&ID=' + ctx.CurrentItem.ID + '\" target=\"_blank\">' + ctx.CurrentItem.Title + '</a>'; var ret += "<br>Published Date: " + ctx.CurrentItem.Created; var ret += "<br>" + ctx.CurrentItem.Body; var ret += "<br># of Comments: " + ctx.CurrentItem.NumComments; var ret += "<hr>"; return ret; } – Justin Demers Aug 25 '16 at 19:52
  • I forgot to say I added the style="font-weight:bold;" and still Nothing works... I am stumped. – Justin Demers Aug 25 '16 at 19:52
  • try the style="font-weight:bold !important;" – Mike Aug 25 '16 at 20:30
1

Ok, a few things I see going on here:

var overrideCtx;

needs to be

var overrideCtx = {};

Secondly, in your custom function, you only need to declare var ret on the first line. On all the other lines you should remove var.

That all being said, the code below (which is I think what you were going for) works for me. The link is bold, the link is active, and it opens in a new window.

(function () {
    var overrideCtx = {};
    overrideCtx.Templates = {};
    overrideCtx.Templates.Item = CustomItem;
    overrideCtx.Templates.Header = "<b>Blog Title</b><br><br>";
    overrideCtx.Templates.Footer = "<br>";

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

function CustomItem(ctx) {
    var ret = '<b><a href=\"' + ctx.displayFormUrl + '&ID=' + ctx.CurrentItem.ID + '\" target=\"_blank\">' + ctx.CurrentItem.Title + '</a></b>';
    ret += "<br>Published Date: " + ctx.CurrentItem.Created;
    ret += "<br>" + ctx.CurrentItem.Body;
    ret += "<br># of Comments: " + ctx.CurrentItem.NumComments;
    ret += "<hr>";
    return ret;
}

For what it's worth, you should remember that any fields you want to use in custom rendering need to be included in the view. CurrentItem.LinkTitle corresponds to "Title (linked to item)" or "Title (linked to item with edit menu)" when you are setting up your view. My guess is your view only uses "Title", which is why CurrentItem.LinkTitle was undefined.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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