Do something after all refiners templates have completed rendering

Elio Struyf is a good friend and did a post today which I have shamelessly copied my post title from. Elio missed an approach on how to run code once all refiners (or other search part) has been rendered, so I figured I’d help him out :-)

Be sure to read Elio’s excellent post before you continue!

My stance on modifying the out of the box display templates

My colleague Petter had a request from a customer to open search results in a new window/tab instead of the same one. So he conferred the braintrust at Puzzlepart on which approach he should go for.

One answers was to modify the control template and loop though all links using JavaScript and add the target=”_blank” attribute. Another to hook in a custom action to which registered a javascript which filtered on click events and did the same modification sort of.

Personally I went against what I always preach which is to never modify the OOB display templates. The customer in this case was using the oob templates, and all the oob item templates through inception reference Item_CommonItem_Body.html/js. We’re talking around 30 result types, referencing some oob template which again reference Item_CommonItem_Body.

To me modifying one line in that file to open the item in a new tab/window had the least complexity. Creating or modifying a custom control template would possibly have required reconfiguration of X pages in the search center. The custom action would have solved it all, but a solution hidden away of sorts.

When is it not ok to modify the OOB templates then?

Most modifications I come across involve adding a new managed property into the template to be displayed. Try this with an OOB template and you fail pure and simple. It just doesn’t work as you won’t be able to Update the result type binding to include your custom managed properties. For this scenario you must create a copy and tie it to your own result type.

And this is where we usually start at Puzzlepart. We have custom templates from the get-go and ready configurations for the 30 result types to be replaced. Petter’s customer already had a search solution up and running when he came in to make it rock, but rolling new display templates were not in scope.

So…. should you or should you not modify the OOB display templates? As a general rule, don’t do it, but if you know what you are doing and know the reasons why, there are scenarios which justify this. Another is to edit the default refiner template and turn on refiner counts.

And as my colleague Tarjei pointed out, if you do change the oob ones, remember that you might miss out on some awesome cool changes coming in a CU near you... or not ;-) - the reason being you have ghosted the files so it won't use possible awesomeness deployed in the 15 hive - or not ;-)

How to run code after all CSWP’s have finished

My colleague Gissur at Puzzlepart asked me if I knew how he could run some piece of JavaScript after all his CSWP’s were done rendering. He has 19 WP’s on the page all collapsed by default with CSS, and wanted the first one with content to be expanded upon page load.

He could have gone the content routing approach which I’ve blogged about previously, but as he has paging per web part, that would not work.
Programmatically the challenge is not too hard as you want to keep count of all the rendered web parts, and when the last one is done you know you are ready to go. A pattern often used and probably a use-case others might have as well.

To help Gissur and anyone else with this challenge I came up with the code below. There might be other approaches, but it's short and not too complicated.

Make sure you add the code as a post-render callback to the control template of all the web parts you want to include in the wait for all behavior.

I’ve tested it on a page a with 20 CSWP’s on it, some also set to work asynchronously, and it seems to work pretty good.

AddPostRenderCallback(ctx, function(){
    // loop over all queries on the page
    var allRendered = true;
    for (var group in Srch.ScriptApplicationManager.get_current().queryGroups) {
        var displays = Srch.ScriptApplicationManager.get_current().queryGroups[group].displays;
        if (displays.length > 0 && !displays[0].get_renderedResult() && displays[0].get_visible()) {
            //check if results are rendered
            allRendered = false;
        }
    }
    if(allRendered) {
        console.log("DONE!!!!");
    } else {
        console.log("WAIT FOR IT!!!!");
    }
});

The research to get this working was finding Srch.ScriptApplicationManager.get_current().queryGroups and then finding which object and function returned what I needed. The clue is that all web parts share the same ScriptApplicationManager which allows you to snoop what the other web parts might be doing.

Improving contextual Search in SharePoint Online / 2013

In April 2014 my Puzzlepart colleague Tarjei “The strongest man in SharePoint” Ormestøyl had a post about how to configure search settings for a site to redirect scope searches over to your search center instead of osssearchresults.aspx. (This would be the “search in this site” search box you find in sites.)

In my recent project we have implemented the same logic as we want scope searches in SharePoint 2010 to be sent over to the new 2013 farm.

I have improved on Tarjei’s solution with the following points:

• Display title of the site instead of just the URL (or list title as we support 2010 redirects to 2013 search)
• Implement as a generic script to be added anywhere on the page – preferably in the control template, but for this post I’ll do it as a script web part.

If you look at the code I’m using a neat trick to get the DataProvider for the page and also hook in my logic after the results are ready the first time to fire off my custom scope hint code.

// Get a reference to the DataProvider for the page
var dp = Srch.ScriptApplicationManager.get_current().queryGroups.Default.dataProvider;
// Add event to be called after results are ready
dp.add_resultReady(showScopeHint);

Managed property mapping retrieval in a Display Template explained

If you read this you have most likely created a custom display template one time or another, and also used a custom managed property in that template.


Understanding the relationship with managed properties and display templates is quite useful when you construct your own template logic. At the end I will also cover the relationship between a display template and the search engine.

Lesson learned: After reading this post you should have learned that when in doubt, use $getItemValue(ctx, "Variable Name") and not ctx.CurrentItem.ManagedPropertyName.

How to enable Content Search Web Part Display Templates for Search Result Web Part

By default the out of the box control and display templates have been marked to work with their respective web parts. You can however re-use the templates across both web parts, as long as you ensure any script dependency is fixed. For example the CSWP has a reference to _layouts/15/search.cbs.js which must be added to the page in order for the Search Result Web Part to use the CSWP display templates.

The good thing is that the CSWP display templates are installed even though you don’t have the CSWP available. Here are the steps you need to perform to use the “Two Lines” CSWP display template with the Search Result Web Part.

• Navigate to site settings
  
• Under “Web Designer Galleries” go to “Master Pages”
  
• Go to the “Display Templates” folder
  
• Go to the “Content Web Parts” and you should see this listing
  
  
  
• Edit properties on “Control_List.js”
  
• Check “Search Results”
  
  
  
• Click “Save”
  
• Apply the same property change to “Item_TwoLines.js”

You have now enabled the display templates for use in the Search Result Web Part, and it’s time to set it up on a page.

Sending in arbitrary extra query parameters to your SharePoint Search Center

I touched on this subject previously in my post Appending query terms in SharePoint 2013/O365 without adding them to the search box, but I did not have a solution at that time. Now I have.
Topics covered

• Extend Search.ClientControls.js to support arbitrary FQL statements
• Add appended search queries to your page without them showing in the search box

As mentioned in Limiting search results by exact time in SharePoint 2013–and how to do FQL you can pass extra query information beside the search text itself by using the refinement filter parameter of a query. This parameter takes FQL by default which is very handy at times. So, the refinement filter property is not just for adding refiners, but can be used to add any FQL statement of your choice, that being an extra query term or XRANK statement.

Let that sink in and think about the possibilities. The good guys at FAST actually handed over the master key to search, probably without knowing it!

Display Templates from my SPC14 and ESPC14 talks

At SPC14 and ESPC14 I used some custom display templates where I slightly changed the default search center UI. Included is:

• counts to the vertical tabs
• icons for file formats
• department refiner for content
• styled the best bets
• context wire-up for User Segments triggering in query rules
• blog post template
• document link template

The templates work equally well for SharePoint Online as for on-premises.

You can find the templates over at the SPCSR community project at github if you navigate to DisplayTemplates / Search Display Templates / mAdcOW Search Center Templates.

For those interested, check out my ESPC14 slides.

And see David Hollembaek’s and my SPC14 presentation and slide deck over at http://channel9.msdn.com/Events/SharePoint-Conference/2014/SPC382

How-to display file format icons for Document Links

You might have a document library which has the ability to add Link to a Document.

This is useful if you link in items from another document or information repository than SharePoint. Often the links will point to Office format files or PDF’s which is all good, and they display just fine in the document library with icons.







You see the PDF icon with a small arrow overlayed. These are actually two images, one for the icon and one for the arrow.

Once you go to the search page the story is different. icons does not show as the links themselves are stored as .aspx files in the library.

The 100% way of getting your custom properties to show in your Display Templates

I’ve been meaning to blog this for some time, so here goes.

The issue is that you create a custom display template, and in that template you add a custom managed property which you want displayed like I have here with LinkOfficeChild.

<mso:HtmlDesignAssociated msdt:dt="string">1</mso:HtmlDesignAssociated>
<mso:ManagedPropertyMapping msdt:dt="string">'Title':'Title','LinkOfficeChild':'LinkOfficeChild'</mso:ManagedPropertyMapping>
<mso:HtmlDesignConversionSucceeded msdt:dt="string">True</mso:HtmlDesignConversionSucceeded>

The next step you do is create a new Result Type, set your trigger conditions and choose to use your custom display template.

Solution to displaying attachments for a list item in a search result

Matthew McDermott has done it again people! He has given me yet another hard problem to solve. This time it’s about getting the number of attachments of a list item in your search results. And as an added bonus, I’m throwing in the attachment links as well (which actually is a side effect).



As it turns out there is no managed property named anything related to attachment or count which will return the number of attachments or the attachment links. That is, if you check the TechNet list or view the search schema via the UI.
Topics covered in this post:

• Debugging using Search Query Tool v2 – with experimental features turn on
• The undocumented managed property LinkOfficeChild
• Custom display templates

Creating a custom display template for a content search web part

In my previous post (Sample on how to use Content Search to display an announcement list) I went over how to set up content search against an announcement list which had some additional fields added to it via a custom content type.
I will build on this sample and create a custom display template, which will add one more line to allow for the Body field of the announcement as well.
Topics covered in this post:

• Create a custom display template
• Render rich text fields properly
• Render dates in a better fashion

Issue with Display Templates not updating once saved

I’m doing Display Template work at the moment and suddenly my changes to the templates were not reflected once I refreshed the page in the test environment.

Turns out blob cache had been turned on on the servers which also caches .js files, but clearing the cache folder did not seem to work. What did work was going to the Object cache settings page (_layouts/15/objectcachesettings.aspx) of the site collection of the Search Center and then flushing the cache.