Add a link to item Dispform to your Item Display Template in SharePoint 2013

A client had following requirement:

We want to use keywords to define on what pages we see our documents. We want to see a list of documents, with thumbnails and some metadata. And we want a button to press to see all the information on the document.

A solution is to use terms, and combine that with a Content By Search webpart. This is the successor from the feared/loathed Content by Query webpart. The definition from Microsoft is:

Display templates in SharePoint Server 2013 are templates used in Web Parts that use search technology (referred to in this article as Search Web Parts) to show the results of a query made to the search index. Display templates control which managed properties are shown in the search results, and how they appear in the Web Part. Each display template is made of two files: an HTML version of the display template that you can edit in your HTML editor, and a .js file that SharePoint uses.

You can find a lot of good blogposts on how to set up a CBS online, so I am not going to bore you with another one.

The result had to be this:

Final result

This is a version in dutch, but you can clearly see the thumbnail, title, some metadata and the “more info” link.

I was checking the default styles, but couldn’t find one that mimics the default view like you have in a document library. After all, that was the plan: to make the CBS look like a view in a document library. All the available styles just make a long list of the items, without working with columns. Bummer. But hey, a chance to learn how those new display templates work by modifying an existing one!

Oh, and if you want to know how to do it in that dreaded  Content-by-query webpart, this is how.

Modifying a Display Template

When you want to customise a Content By Search, you no longer need to fiddle with xsl, you need to change a display template. Once again, a lot of good articles out there on how to edit a display template.

Personally, I like to open SharePoint Designer (Yes, I went there) and open”all files” – _catalogs – masterpage – display templates. Then I copy an item html and rename it. SharePoint automatically adds the .js file.

If you want to whole html file, just let me know and I will send it over. Right now we are concentrating on getting the link to the display form!

Dispform link

The dispform page is the display form where you can see all metadata from a document or list item. You see it when you press the “show properties” button in a list or library. The page is stored in the /forms folder in each library. So if you have a site collection “sitecol” and a site “site A” and a library “Documents”, the link to the dispform is:

http://sitecol/site A/Documents/Forms/dispform.aspx

The link to the dispform has a few parameters that you need for the page:

ID: the unique list item ID from the item, this is mandatory because otherwise you can’t see the item

Source: the page you were on before you got to the dispform. When you close your dispform, this is the page where you will go to.

ContentTypeId: what content type is the item you want to show

Rootfolder: is the item you want to see the dispform for located in a subfolder ?

An example of such a link can be:

http://knowledgebase.eadblo.be/center/documents/Forms/DispForm.aspx?ID=4&Source=http%3A%2F%2Fknowledgebase%2Eeadblo%2Ebe%2Fcenter%2Fdocuments%2FForms%2FAllItems%2Easpx&ContentTypeId=0x01010072599A4CE4AC8144933FD782610A20C4010071839EAA1D0C5243A81A97E3DD4679CC&RootFolder=%2Fcenter%2Fdocuments

Yeah, that is a lot right.

For this project, I only needed 2 parameters: the list item ID and the source.

Step By Step

we need a few steps here:

1. add the fields to the mso

Go to your display template’ html file. Make sure you take a backup of the file first!
When you open the file in your favourite html editor (or use SharePoint Designer 2013 like I do), find the following tag:

<mso:ManagedPropertyMapping msdt:dt="string">

This tag will load the variables that you can use. Add the ListitemID and ParentLink parameter in the list of parameters that are shown there, separated by a comma:

ListItemID’,’ParentLink

The line should look like this:

<mso:ManagedPropertyMapping msdt:dt="string">'Link URL'{Link URL}:'Path','Line 1'{Line 1}:'Title','Line 2'{Line 2}:'bron','FileExtension','SecondaryFileExtension','ListItemID','ParentLink'</mso:ManagedPropertyMapping>

This will make sure the script knows the fields you want to add.

2. create variables

Next up is to change the ParentLink parameter. By default it links to the “allitems.aspx” page, which is the start page of your list or library. We need it to point to the dispform. Alternatively you can change the link to another page if you want, if you want a link to a certain view or page.

var parentlink = new String($getItemValue(ctx, "ParentLink"));
var parent = parentlink.replace("AllItems","dispform")

We need one more parameter: the url of the page we are on now. If we hit the “close” button on the “dispform.aspx” page, we want to make sure we go back to our page. We can do this with some easy javascript:

var PageSource = window.location.href;

3. add the link to the page

Now, everything is ready to add our link to the page:

<a href="_#=parent=#_?ID=_#=itemid=#_&Source=_#=PageSource=#_">meer info</a>

Add this line of code between the <div> brackets on the bottom of the page.

Save, and refresh the page with the display template on. If all works out, you should see the link.

Big thanks

A huge shoutout to Elio Struyf who patiently guided me via twitter towards the right solution. Remind me to get you a beer next time we meet!

About: Marijn

Marijn Somers (MVP) has over 14 years experience in the SharePoint world, starting out with SP2007. Over the years the focus has grown to Office 365, with a focus on collaboration and document management. He is a business consultant at Balestra and Principal Content Provider for "Mijn 365 Coach" that offers dutch employee video training. His main work tracks are around user adoption, training and coaching and governance. He is also not afraid to dig deeper in the technicalities with PowerShell, adaptive cards or custom formatting in lists and libraries. You can listen to him on the biweekly "Office 365 Distilled" podcast.


10 thoughts on “Add a link to item Dispform to your Item Display Template in SharePoint 2013”

  1. Thanks for post. This has been very helpful. I am wondering, how are you getting the itemid? The ctx.CurrentItem property for the ListItemID is null and I am not able to retrieve it using the getvalue function either. Any pointers?

    1. Hi,

      I just added the ListItemID to the ManagedPropertyMappings on top of the page.
      I put it in a variable:
      var itemid = $getItemValue(ctx, “ListItemID”);

      And that is all. Check with a developer if that doesn’t solve it.. (I am not a developer, althoug I sometimes post technical content or code)

    1. I used the 2 lines one. But it should work on any template. I will post a link to my template tomorrow!

      1. Hi again,
        i found out my mistake. I used the Item_OfficeDocument.html Template and in this template i do not get the item id. Now i swited to the Item_Default.html Template to create a new Display Type and now I get my Item ID’s. Funny…

  2. Hi, how do you handle folders? If a document is in a folder then the ParentLink is to the folder not the view so you can’t replace AllItems. Any thoughts?

  3. Hi, just found this and fits perfectly for a solution I am trying to create, albeit to take users to a custom editform. Please can you send me your template so I can try it out? Thanks in advance – Matt

  4. i would do lilke

    var thisWeb=_spPageContextInfo.webAbsoluteUrl;

    var listItemId = ctx.CurrentItem.ListItemID;

    var listId = ctx.CurrentItem.ListID;

    href=”_#= thisWeb =#_/_layouts/15/copyutil.aspx?Use=id&Action=dispform&ItemId=_#= itemid =#_&ListId=_#= Listid =#_&InThisWeb=1&Source=_#= PageSource =#_”

Leave a Reply

%d bloggers like this: