How to use Query rules and display templates to detect the intent of your users

Hi,

I'm pretty sure you have tried to search in Google or Bing the answer to a math operation, and you got an instant result that matches exactly that.

When you read about this scenario,talking about SharePoint 2013, "A search result, suggestion, or recommendation is more relevant when it better satisfies the intent of the person who issues the query", you can see how powerful can be, to "understand" what your users are trying to find, and as a result give them that specific answer.

I will show you how to include that behavior in SharePoint 2013 using the new features. Specifically Query Rules and Custom Display Templates. I will not cover here what are those features, you have great info in Steve Peschka blog (well may be next year I will talk about just a little bit ;)).

I will start with the result and then go through the steps:

Here the user has asked for the result of 12*5, this was a match for the condition configured (Query Rule) and a specific "relevant" result was presented (Result Block) with a custom visualization (Display Template). You can just start imagine how you can add Instant answers to your users in your organization:

1. Translate content with action words, "Translate product X to spanish"
2. Integrate Line of Business applications, "Create a new support case" "Projects with Customer X"
3. Get specific information, "Last report for Customer Y"

 to mention some examples.

So to set up the scenario with the math operation, we will create and deploy the following elements,

Item_Calculator.html (and a file associated with it named Item_Calculator.js)

This will display the calculator and will manage the math operations. The most relevant parts of it are (Item_Calculator.html):

head tag

this will have the name of the display template and the necessary properties from the search service. In our scenario we won't need any specific managed property as we are presenting a result based on just the query.

body tag

Before the container for the calculator we will reference the styles and JavaScript that will manage its functionality and visualization.

<script>
 $includeCSS(this.url, "~sitecollection/Style Library/calc/style.css");
 $includeLanguageScript(this.url, "~sitecollection/Style Library/calc/script.js");
</script> 

then all the specific HTML code that will be rendered is contained inside the <div id="Item_Calculator"> here we will include the calculator and we will include the call to the calculation, after final render; and we will get and add the token for the query made from the user.

<!--#_
 AddPostRenderCallback(ctx, function()
 { 
 calculate(document.getElementById('box').value);
 });

 if(!$isNull(ctx.DataProvider)){
 var calValue = ctx.DataProvider.get_currentQueryState().k;
 _#-->

this code will run the calculation function once the calculator is rendered, and will get the query from the user to be replaced within the calculator HTML

<input id="box" type="text" value="_#= $htmlEncode(calValue) =#_">

Item_Calculator.html and Item_Calculator.js should be placed in "/_catalogs/masterpage/display templates" OOB folder

script.js and style.css should be placed in "/Style Library/calc/" custom folder

Query Rule

On the other hand, we will need to configure a rule that will match this query and then display the result.

You need to go to Site Settings->Query Rules and create a new Rule based on a source (in my case Local SharePoint Results). We will need to described its name, the condition (Advanced Query Match as we want to include a regular expression that matches the operations: [^d]*[/*/+][^d]*) and the result block; with defaults, one result and our Calculator Item Display Template.

This will allow the system to detect when a math operation is requested and display the result block that we have configured.

You can download the source code from codeplex.

 There were some things that came out doing this, that I will talk about in next posts: eval is evil, browser support of JSON, debugging display templates, display templates pipeline and circular references

Ciao!