Search Nuggets » display templates http://blog.comperiosearch.com A blog about Search as THE solution Mon, 13 Jun 2016 08:59:45 +0000 en-US hourly 1 https://wordpress.org/?v=3.9.40 SharePoint search display templates made easy http://blog.comperiosearch.com/blog/2014/06/23/sharepoint-search-display-templates/ http://blog.comperiosearch.com/blog/2014/06/23/sharepoint-search-display-templates/#comments Mon, 23 Jun 2014 10:49:47 +0000 http://blog.comperiosearch.com/?p=2625 One of the most interesting features in SharePoint 2013 are the display templates. This blog post will describe how to customize a search display template in order to show the item created date.

The display templates are located in the site collection root site, under the _catalogs/Display Templates folder. Each template has two files: the html file and a javascript file. The javascript file is the one that SharePoint uses, while the html exists in order to make it easier for us developers to create and customize the display templates. Once an html file has been modified, SharePoint generates the corresponding updated javascript file, so the process is fully automated.

So what are the steps involved in creating a new display template?

In SharePoint designer, after opening the root website, navigate to the Display Templates folder. Here, in the Search subfolder, you will find the display templates that SharePoint uses for many types of results – documents, web sites, people and others. Choose a display template as a starting point for your own, depending on the result type that you are targeting, copy it and then rename it. Once saved, you will see that SharePoint has already generated the corresponding javascript file. Modify the html file as you wish. What is left to do now is to link the template to an actual result type, so that SharePoint knows what to associate your display template to. This can be done through the interface, by navigating to Site Settings – Search Result Types.

Let’s take it step by step.

Duplicating an existing display template

Open the site collection with SharePoint designer. Navigate to the Display Templates folder under _catalogs\masterpage\display templates. Here you will find some Folders that SharePoint uses to group Display Templates together.

The Word item template is in the Search folder. Make a copy of the Item_Word.html and rename it to ComperioItem_Word.html

spdisptemp_01

Edit the file and inside you will see some html and javascript code.

Edit the title field so that your custom template has a different display name than the original one.

The <mso:CustomDocumentProperties> tag contains some properties of the template. Some important properties are:

  • TargetControlType – tells SharePoint what the template is used for (search results, web parts, filters)
  • ManagedPropertyMapping – contains a list of the managed properties that are or can be used by the current template

The <body> tag contains the rendering logic for the display template.

The template can only recognize the managed properties that are listed in the header. To use another managed property, add it here. We are using the Created property that displays the document created date.

<mso:ManagedPropertyMapping msdt:dt="string"> 
'Title':'Title','Path':'Path', [………..] , ‘Created’:’Created’ 
</mso:ManagedPropertyMapping>

Now that the template is aware of the property, you can use it by adding it to the body. Add the line below in the Body of the rendering template:

<div class="ms-descriptiontext"> _#= ctx.CurrentItem.Created =#_ </div>

spdisptemp_02

Mapping the display template to a result type

Now we are going to manually link the display template to a result type, so that we can see that it works.

In order for SharePoint to use your custom template, it needs to know of it. So navigate to Site Actions – Site Settings and under Site Collection Administration choose Search Result Types. Create a New Result Type for your template like below:

  • Choose a Name
  • Choose Microsoft Word as content to match
  • Choose your custom display template

spdisptemp_03

Now go to the results page and search for a word document. The results should display a date looking like this:

spdisptemp_04

We have only been scratching the surface and a lot more customization can be done here, for example formatting the date value in javascript by using a function like format(“yyyy-MM-dd”) on a Date object. Combined, SharePoint and javascript have (almost) endless possibilities.

Happy coding!

 

]]> http://blog.comperiosearch.com/blog/2014/06/23/sharepoint-search-display-templates/feed/ 0 Instant Search in SharePoint 2013 http://blog.comperiosearch.com/blog/2014/05/26/instant-search-in-sharepoint-2013/ http://blog.comperiosearch.com/blog/2014/05/26/instant-search-in-sharepoint-2013/#comments Mon, 26 May 2014 07:27:23 +0000 http://blog.comperiosearch.com/?p=2297 Have you been thinking about implementing instant search to your SharePoint 2013 project, but not quite sure where to start? In this blog post I will try to explain how you can easily enhance the search experience in SharePoint 2013 in a few simple steps.

Instant search is widely known as «the way Google do it» – in fact they were the ones who started this trend and now everyone are used to it. What if you could give your SharePoint users the same experience they are already familiar with?

To begin with you must have in mind that instant search will produce a lot more queries and that your search performance will get worse if you have too many users hammering your SSA (Search Service Application). So, yes – there is a risk. The trade-off is high if you can increase the search experience to your users, but there’s also a risk of damaging the search experience totally if things start to go slow and people end up getting zero-hits.

Anyways, for the proof of concept you don’t need to think about this now :-)

Before moving on please check that you can meet these prerequisites:

Prerequisites

  • Administrator Access to a SharePoint 2013 site
  • SharePoint Designer 2013 or a way of mapping your site’s directory
  • A text editor such as Sublime Text or Notepad++ (doesn’t really matter, but I recommend an editor with some code highlighting / intellisense)
  • Basic understanding of the concept regarding DisplayTemplate in SharePoint 2013 (You can read more about it here and here :-) )

What we are going to do is that we are simply going to create a new DisplayTemplate for the SearchBox Control based on the original DisplayTemplate and edit the OnKeyUpEvent.

Changing the DisplayTemplate

    1. Open SharePoint Designer 2013 and open your site
    2. Browse to http://SPSite/_catalogs/masterpage/Display Template/Search
    3. Create a copy of the DisplayTemplate named Control_SearchBox.html and name it Control_InstantSearchBox.html and open it and edit the <title>-tag to something else (you’ll need it do identify the template later)
    4.  Go to the javascript section in the template and create a function called  doInstantSearch(clientControl, value, event) that only executes the normal query request.

It should look something like this:

  1. Edit the searchbox-control’s ‘onkeyup’-event by replacing the attribute’s value with: ‘doInstantSearch($getClientControl(this), this.value, event);’ and save your template. Now you can go to your SearchBox web part and change the template to your new one (look for the title you set in step 3.) and test it yourself.
  2. Now you have a one-to-one relationship between each key you press and query that you send to your SSA. However, as you will probably notice, the whole thing feels a little bit slow and not so smooth. This is because you are hammering your SSA and re-rendering your template each time you press a key – even if it’s not a real character – not so funny right? Let’s fix it.
  3. In order to fix this we need to add a character-filter and a timeout to our function. We will get the character from the keyCode and try to match the character using a regular expression. In this example we will operate with a RegEx matching all alphanumeric-characters including special norwegian characters like «æ ø å». If the character matches it we will reset the timeout function and start over with a new 300 ms delay. When we hit a non-alphanumeric character or the delay times out we will execute the search request.

This is what we end up with:

And now you have an instant search with a 300 ms delay for each legal character that the user enters in the search box.

Try it yourself :)

]]> http://blog.comperiosearch.com/blog/2014/05/26/instant-search-in-sharepoint-2013/feed/ 0