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

August 1st, 2013 | Posted by Marijn in Uncategorized

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:

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:


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!

You can follow any responses to this entry through the RSS 2.0 You can leave a response, or trackback.

10 Responses

Leave a Reply

%d bloggers like this: