SeikoShadow

SeikoShadow.tk

​​Editing Search Result Displays

Be Sure To Share:

 

From the Search Center​ (Search Homepage) navigate to Site Settings. In the Look and Feel section chose Design Manager​.

 

1. In Design Manager choose​​ ​Upload Design Files​.

 

2. Click the link at the top of the page to open the Master Page Gallery in Windows Explorer.​

 

​​introduction 1.png

 

3. Browse down to Display Templates/Search/ (may be on next page) and locate the Item_PDF.html file. This is the file used for the out of the box PDF Search result. Notice that there are actually two files named Item_PDF​​. We always work with the HTML file leaving SharePoint to manage the JavaScript file.​​

Intro 2.PNG
​​​​

4. Download the PDF_Item file to your desktop​​​ and make a backup of the file somehwere on your system just encase as changing these files can break the SharePoint search.


​5. Open the PDF_Item that you wish to make changes to and look for the ManagedPropertyMapping​ string near the top of the file, ​We need to add any new custom properties to this tag before we can display that property in the page. This is where you have to decide what Managed Properties from the Search Service you are going to use in your page. In my case this was the last modified time (named LastModifiedTime ​in the Managed Properties​). So I'll add that to the end of the line. Pay attention to the syntax here.

 

editsearchresultsimg1.PNG

 

6. Now we need to add the field to the display part of the page. Now I want to add a little bit of text explaining the value and I want to display the value itself. Microsoft introduced a new token that we will use to display this value  _#= to start and =#_ to end. That combination of characters will tell SharePoint to look at what’s in between and treat it like JavaScript. So what we need now is a way to reference our field LastModifiedTime. We do that by referencing the Context of the Current Item in the search results. All put together it looks like this: _#= ctx.CurrentItem.LastModifiedTio =#_. So now our code looks like this inserted below the RenderBody value (The bit that display the majority of the search result display):​ 

 

​​​editsearchresultsimg2.PNG


​​So far what we've managed to do is display this value in search results, so far this is what it will look like:


editsearchresultsimg3.PNG

 

7. But we want to explain what this random piece of information actually means and for that we'll simply add some basic html and in-line css for styling as follows:

 

editsearchresultsimg4.PNG


​​This will have the effect of adding a string saying Last Modified: before the last modified time. 


8. Navigate to Display Templates/Search/ ​and click Files on the top bar followed by Upload Document.​ Then upload the editted document replacing the previous version (Easiest way to do this is to simply keep the same name so it overwrites the previous version, hence the reason a backup was created earlier).


Do any search that displays PDF's and you should see the changes.

Have your Say