Content By Search and Display templates

A new feature in the ‘Content Rollup’ category of SharePoint 2013 is Content By Search. This web part give us much more power to search for and aggregate content from anywhere in our farm. I recently had a requirement to present relevant help documents from one site collection in another site collection. Additionally, they wanted the user experience to give them the ability to identify the documents by presenting the necessary metadata in the search result. This required a custom display template. Let’s walk through how we can accomplish this.
First we need to add the content by search web part to our page and configure our query:


Above query displayed no results as my crawl had not yet completed.
As you can see below we are telling the CBS web part that we want to find all items matching the content type “Help Document” in the designated site collection. This is done using the quick mode to build our query. We can switch to advanced to add any other search parameters we would like as shown below.

After we configure the query we click ok and move on the Display template web part settings.

As you can see we have several options to choose from. First we define how we would like to render our results. List, list with paging or slideshow. The slideshow control is very useful when creating visual rotating banners or scrolling news articles. For this scenario we will chose list as we will only be showing 5-10 documents. Next we have to chose an item display template. The display templates that are available are Content Web Part display templates. By default you are only given 7 display templates. These can be found in /_catalogs/masterpage/Display Template/Content Web Parts.

For this scenario, none of the OOTB display templates fulfill our needs so we have to created a new display template, similar to XSL style when using the CQWP in SP 2010. To do this we crack open SPD and navigate to the above location. Next we take the template that we want to copy and modify. We can simply copy and paste. SharePoint will then create a copy of the template and the corresponding javascript (.js) file. Give this a few seconds to complete. After the copy is complete you can verify the conversion by going to the Site Actions (Gear) > Design Manager > Edit Display Templates and find the copy of your template (It will be the same name as the one you copied). Ensure that the conversion I successful.

As you can see above, we copied to the Two lines template and the conversion was successful.
Now we can crack open the template and start making our changes.
For this scenario the client wanted the following layout for their items:

Title	Team	Category	Location
			Modified by Modified By on ModifiedDate

First we should change the title of our template

Next, we need to add the additional fields to our template in the Managed Property Mapping section.

I needed to add 4 additional fields. I just copied an existing field and incremented the field number to keep it easy. Each field looks something like this:
'Title','Line 2'{Line 2}
And each field is separated with a ‘:’ As you see above we added Lines 2-6 giving us 4 additional fields to display when configuring our web part.
Ok, lets change our DIV ID and unique ID as shown below.

Next we need to add these fields to the corresponding JavaScript variables as well as create line IDs for each of these fields. If you scroll through the template you will see areas where each field is called out. Copy these lines and adjust them to match your new lines.

Next we can use HTML to build our documents layout table. Because we needed a table layout I created a table and moved the fields into each row. I did this by copying the existing Line 2 DIV and A tags and adjusting them to match my new lines. If you are simply looking to display a field you can grab the:

Snippet and place it wherever you would like. I have done this for my ModifiedBy and ModifiedDate fields as shown below.
Note: #_ .. _# are wrapper for JavaScript logic

Now we can save and publish our template. Barring any errors, this will now be an available option within our web part properties.
Note: IF you make an error SharePoint 'Gracefully fails' and actually gives you some good debug information regarding line/char numbers and reason for failure. Unlike 2010 where every CQWP blows up.

When we select this template we are now presented with additional fields to configure under property mappings.

To change these field we need to check the Change the mapping of the managed properties….. checkbox.

The best part is that SharePoint allows us to pick crawled properties when selecting our fields!!
Now as a sanity check I have placed a border on my table so I can validate the layout as shown below.

Looks good to me! I removed the border on the table and published to get my final result.