Minimal Display Template

We want to use our own Display Templates on Non-publishing sites – our team sites. Without the Publishing Feature activated you have to create an own javascript file. Here is short and concise instructions how to install it: Display Templates on Non-publishing Sites.

As described on that blog, you can make copy of an existing Item_Default.js and adjust to your needs.

I also asked Elio Struyf and I got the same tip. I did create my starter template. Here I want to share this very minimal javascript based Display Template. The real Minimal Display Template is in the SPCSR github repository: Item_Minimal.js It has been improved by Elio Stuyf himself

(function () {
  // Config contains variables that are defined in one place
  var config = {
    propertyMappings: { 'Path':null, 'Title':['Title'] }
  };
  var templateUrl;

  var register = function () {
      if ("undefined" !== typeof (Srch) && "undefined" !== typeof (Srch.U) && typeof (Srch.U.registerRenderTemplateByName) === "function") {
              Srch.U.registerRenderTemplateByName(templateUrl, render);
          }
    };
    render = function (ctx) {
      // Display template data
      var cachePreviousTemplateData = ctx.DisplayTemplateData;
        ctx.DisplayTemplateData = {
        'TemplateUrl': templateUrl,
        'TemplateType': 'Item',
        'TargetControlType': ['SearchResults', 'Content Web Parts'],
        'ManagedPropertyMapping': config.propertyMappings
        };
        var cachePreviousItemValuesFunction = ctx.ItemValues;
        ctx.ItemValues = function(slotOrPropName) {
                return Srch.ValueInfo.getCachedCtxItemValue(ctx, slotOrPropName);
        };

      // Retrieve managed property data
      var path = $getItemValue(ctx, 'Path');
      var title = $getItemValue(ctx, 'Title');

      // HTML markup for an item
      var htmlMarkup = String.format( '<div>' +
                        '<a href="{0}" title="{1}">{1}</a>' +
                                        '</div>', path, title);

        // Caching
        ctx.ItemValues = cachePreviousItemValuesFunction;
        ctx.DisplayTemplateData = cachePreviousTemplateData;

        // Return the HTML markup
        return htmlMarkup;
    };

  // Retrieve all the loaded scripts
  var allScripts = document.getElementsByTagName("script");
  // Get the last script file (this is the current DT file)
    var scriptUrl = allScripts[allScripts.length - 1].src;
    if (scriptUrl.indexOf('/_catalogs/') > 0) {
      // Remove the query string
      if (scriptUrl.indexOf('?') > 0) {
        scriptUrl = scriptUrl.split("?")[0];
      }
      // Insert the site collection token
      templateUrl = '~sitecollection' + scriptUrl.substr(scriptUrl.indexOf('/_catalogs/'))
    // Register the template to load
    register();
      if (typeof (RegisterModuleInit) === "function" && typeof(Srch.U.replaceUrlTokens) === "function") {
          RegisterModuleInit(Srch.U.replaceUrlTokens(templateUrl), register);
      }
  }
})();

Benefits of js approach

If you choose to directly upload and mantain a javascript file you’ll get following benefits:

• You can use the same display templates on Non-publishing sites and they work directly in SharePoint Foundation
• You’ll get intellisense
• You can run static code analysis agains your javascript code and you can create unit tests
• It is more readable understandable from developer to developer
• It is easier to follow best practices for javascript
• It encourages reusing javascript components for Display Templates, CSR (JSLink) Templates.
• You like TypeScript? Well, then it is best to skip the “grey” code in html comments.

Findings

• You cannot use ‘use strict’ in your js file.

How to create a Display Template

Rename the Item_Minimal.js file to your name, update some properties.

Upload it to _catalogs/masterpage/Display Templates/Search/<your-folder>

Use ContentType: Display Template Code

Template Level: Item and Managed Property Mappings

Create a new Result Type. Every time you update the Display Template (item properties) you have to update the Result Type.

Moving from Minimal to Better

Of course the minimal display template is not enough. There is a whole lot of things we can do, I prepared some tips (my own “best practices”):

1. Learn the Search Display Template Syntax: Corey Roth – Useful js for Display Templates
2. Follow Elio Struyf’s 10 tips for working with Display Templates (except the first one – javascript is better )
3. Prefer JavaScript Display Templates if you are a developer and you want to  have a better control
4. Never update the built-in Display Templates.
5. Centralize reused parts of Display Templates – utilities, common parts, css. Use a CDN site for that.
6. Check out the SPCSR github repo, there are many Display Templates that you can use or be inspired from.
7. Create your own folder in _catalogs/masterpage/Display Template/Search to have all your Display Templates within a site collection.