Azure / Office 365 / SharePoint Development / Search

Automatically update / refresh results in display templates

April 11, 2014

During the creation process of a demo for my SharePoint Saturday Belgium session this year, I suddenly came up with the idea to automatically update or refresh results of a Content Search Web Part. This could be useful when you have dashboard pages and you want to keep showing the latest items retrieved from search. Eventually it doesn't seem to be that difficult to achieve this. The following steps show you which actions you need to perform to have an automatically refreshing template.

What you'll need to do is creating or modifying a Control Display Template for the CSWP. In this control template you'll only need to add the following lines of code:

It can even be simpler, you could also use the following code:

This piece of code will be executed every minute and will update the set of results. If you want to increase or decrease this, you'll need to change the number at the end of the setTimeout method.

Result

Images don't say much in this scenario, but what you can see is that the first result is replaced with a newer task.

First set of results

First set of results

Results after a new crawl

Results after a new crawl

Download

This is the default list control display template with the piece of code added to it. Feel free to test this on your environment.

Control_Refresh.html (Right click - save as).

Comments

  • Louie

    Thanks for the great post! I’d mention though, that if one wanted to auto-refresh the web part periodically, replace setTimeout() with setInterval(). To learn more:http://www.w3schools.com/js/js_timing.asp

    • Louie,

      You are indeed correct, but in this case it doesn’t matter. Let me explain myself, every time the update gets executed, the template will load again. That means that the time-out starts again. So a interval isn’t needed in this scenario, and that is the reason why I used the setTimeout() function instead of the setInterval() function.

      Regards,
      Elio

      • Louie

        Hi Elio!

        Now I understand what you meant by using either setTimeout() or setInterval() would not make a difference.

        I have updated my code to execute setTimeout() just so the code doesn’t look redundant.

        One other thing I noticed and it’s not big deal, every time the control reloads, the url gets appended with what appears to be junk. Is this normal?

        Again, this post saved me a lot of headache. Thank you so much for sharing!

        Kind regards,
        Louie

        • Louie,

          I think you mean this “#k=”. That is how the search web parts in SharePoint work, you cannot do anything about it.

          If you go to a search center, you will see that the same thing gets added to the URL.

          Regards,
          Elio

  • ken

    Great post. Have you tried applying sort when a certain refiner is selected (say Company)?

    • Ken,

      Yes I tried that, do you have any problems with it?

      Regards,
      Elio

      • ken

        Yes, I’m having problems on how to make it work.. possible to share how you do it. if its ok. thanks!

        • Ken,

          Sorry for the late response.

          • First of all you will need to be sure that the property which you want to use is sortable
          • Register the sorting you want to achieve. This could be done on the Search Results web part > settings > Available sort orders (JSON)
          • The value to add should be like this: {“name”:”SortName”,”sorts”:[{“p”:”property-name”,”d”:0}]} – 0 = ascending – 1 = descending
          • If you want to trigger the sort via JavaScript, you could then use the following code: $getClientControl(this).sortOrRank(‘SortName’)

          Another way would be to register the sorting via JavaScript. This can be done on the DataProvider object.

          Regards,
          Elio

  • ken

    Hi Elio,

    I was trying to picture out how it should be done. What I had in mind is when a refiner is selected, I the results gets drilled down/refined then also sorted based on a sortable managed property.

    This is what I did currently but could not get it to work 100%.

    1. Create new query state.
    2. Assign appropriate refiner property and value (“r” QueryState field).
    3. Assign sort property and value (“o” QueryState field).
    3. Then trigger query state event.

    Let me know your thoughts. Thanks!

    • Ken,

      If you want to combine these actions (refinement and sorting), that would be the best way to approach it.
      The only downside is, that you couldn’t know which property is sortable with JavaScript.

      What doesn’t work with this approach?

      Regards,
      Elio

  • Pingback: Search Navigation Without Creating New Pages (JavaScript) – SharePoint 2013 | Developing Title...()

  • Lance Gosby

    Hi Elio,

    Would something like this work as a way to perform an empty search and clear all refiners?

    I’ve tried something similar to your first snippet above but before creating the new QueryEventArgs, I clear out queryState.k and queryState.r. When raiseQueryReadyEvent runs, the results refresh but the query doesn’t change.

    I did manage to get something working by customising a SearchBox display template. From there I can call the search function with an empty query. I was hoping to achieve the same result from the Search Results control display template because I am already customising that.

    For some background, the page displays all employees when first loaded. After the user performs a query or refinement, I want a way to go back to showing all employees without a full page refresh.

    Thanks,
    Lance

    • Hi Lance,

      If you want to do it via the search results web part, you will have to work with the QueryEventArgs. What you have to do is set the query to null and the refiners to an empty array. This can be done like this:

      Hope this helps you.

      Regards,
      Elio

      • Lance Gosby

        That worked! Thanks.

        I was setting queryState.k = “” instead of null.