May 3, 2013

SharePoint: How to link item title to item in Display Template

Task

When you add List View Web Part to a page in SharePoint and would like it to display e.g., all pages in the Pages library, and provide links to items, you will run into issue where you're not able to link to the item using the title of the item. You can only link to the item usin the file name, which will look bad, and include dashes, remove special characters, etc.

In SharePoint 2010, you would modify the XSLT of the XSLTListViewWebPart using SharePoint Designer (like here), but in SharePoint 2013 you can use new feature in SharePoint 2013, called JSLink to do the same.

Solution

Use JSLink to override how Title column is rendered. But instead of actual title column, you want to use the LinkTitle or LinkTitleNoMenu columns. This is because if you only use Title, the JSLink will not have the item URLs available – apparently optimization within SharePoint not to return item properties that are not used.

In the override, add link tags around the title. I do like this JSLink method better compared to the old XSLT SharePoint Designer way as you can reuse the JavaScript file and only reference that in the Web Parts when required.
  1. In a location of your choice (such as SiteAssets library of your site, or in _catalogs/masterpage), create new JavaScript file.
  2. In the file, add the code below
  3. In your web part, reference this JavaScript file in the JSLink setting, like ~site/SiteAssets/news_ui.js, or ~sitecollection/_catalogs/masterpage/news_ui.js
(function () {
//   Initialize the variables for overrides objects
 var overrideCtx = {};
 overrideCtx.Templates = {};
      
 //List of default Object.keys(ctx.CurrentItem)
 //ID,PermMask,FSObjType,HTML_x0020_File_x0020_Type,ContentType,File_x0020_Type,
 //File_x0020_Type.mapapp,HTML_x0020_File_x0020_Type.File_x0020_Type.mapcon,
 //HTML_x0020_File_x0020_Type.File_x0020_Type.mapico,serverurl.progid,
 //ServerRedirectedEmbedUrl,File_x0020_Type.progid,File_x0020_Type.url,
 //FileRef,FileLeafRef,CheckoutUser,CheckedOutUserId,IsCheckedoutToLocal,Title,
 //Created,Created.FriendlyDisplay,firstRow
 

 overrideCtx.Templates.Fields = {
'LinkTitleNoMenu': { 'View' : '<a href="<#=ctx.CurrentItem.FileRef#>"><#=ctx.CurrentItem.Title#></a>' } 
};
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx); })();
 
NOTE! If you still want to use only Title column, you need to include some other field in the View you're using that contains URL in order for this to work, e.g., Icon and Name fields.


Technorati Tags:

15 comments:

  1. Hi, I could not make any changes to the Title column rendering. I could make changes to other columns. Does you script work if you try to display "Hello" in your title column like this?
    overrideCtx.Templates.Fields = { 'Title': { 'View' : 'Hello' }
    In my case it still displays the standard Title.
    Thanks,
    Giacomo

    ReplyDelete
  2. Thanks for sharing this. I was very sceptical when I saw the notation #=ctx.CurrentItem.FileRef# in a JavaScript file, but it seems to work just fine... Would you mind explaining it?

    ReplyDelete
  3. It looks like there is a requirement on this case that the name column must exist in the view. If it is not included in the view, FileRef is not available in the ctx.CurrentItem. Have you figured a way around this? If I am making the title my "link", I don't want the name column to show.

    ReplyDelete
  4. Marketed Hyperlinks is an extra list type presented by Microsof company for the most latest launch of the system.

    ReplyDelete
  5. Its a great post and everything works fine.

    I am trying to get below value

    ctx.CurrentItem.HTML_x0020_File_x0020_Type.File_x0020_Type.mapico

    but it results in an error. When I am debugging and looking at watch i can see the correct value but when i try to get the same value its undefinded.

    ReplyDelete
  6. I am able to get below value

    ctx.CurrentItem.File_x0020_Type

    Do you know how can i get the actual icon for each type of file?

    ReplyDelete
  7. Christophe:
    It's just a notation you need to use so that SharePoint can transform the .html file into .js file. If you look at the generated .js file, you won't find those #= markups there.

    Ravi:
    I would perhaps try creating direct link to icon file:

    var iconUrl = "/_layouts/images/ic" + extension + ".gif";

    ReplyDelete
  8. This works great. But I have one issue. I want to display only the title field in my view. If I remove the file name field from the view, then the title field does not render as a link. Is there a solution to that?

    ReplyDelete
  9. This doesn't seem to do anything on the library view page I tried it on. I created a new view with Icon, Name, and Title. I edited the web part JSLink property to use the file. When I clicked "Apply" something happened, and it appeared to work, but then when I clicked "OK", the web part view reverted back to the default. I saved the JS file in the Site Assets library. Does it make a difference where the JS file is saved? The article linked above seemed to indicate that perhaps it should be saved in the master templates folder.

    ReplyDelete
  10. You can have the .js file in _catalogs/masterpage or elsewhere, both are proven to work just fine. You can use browser debugger (F12) to determine whether the issue is in the .js file contents, or if the browser cannot even get the defined file if you've referenced it incorrectly.

    ReplyDelete
  11. hi there, this is a great script thank you. I've encountered two issues with this script, one I have solved but will describe here in case it is of use to other users, and the second I need help with please:
    1. I added a listview webpart and included the above file in the JSLink box. It worked perfectly on my user but didn't work for our standard users who don't have design permisions. In the end I discovered that if I added a script editor webpart and pasted the script into this inside script tags then it worked. (it still requires the JSLink to be used as well)

    2. Not only does this script override the title and input a link it also seems to override the column spacing in my list view webpart, so instead of the columns being evenly spaced they are all squashed up to the left of the box. Any ideas how I could fix this?

    ReplyDelete
  12. context.Templates.Fields = {
    "Favourite": {
    "View": titleViewTemplate
    },
    "GuidesAndSupport": {
    "View": GuidesAndSupport
    },
    'Title': { 'View' : '<#=ctx.CurrentItem.Title#>' }
    };

    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(
    context
    );

    ReplyDelete