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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
(function() { var config = { templateName: 'Item_Minimal'; } var tolleUrl = ['~sitecollection', '_catalogs', 'masterpage', 'Display Templates', 'Search', 'my-company', 'Item_Minimal.js'].join('u002f'); function getHtml(plainItem) { return [' <div>', title, '</div> '].join(''); } function DisplayTemplate_Minimal(ctx) { var cachePreviousTemplateData = ctx.DisplayTemplateData; ctx.DisplayTemplateData = { 'TemplateUrl': tolleUrl, 'TemplateType': 'Item', 'TargetControlType': 'SearchResults', 'ManagedPropertyMapping': { 'Title':['Title'] } }; var cachePreviousItemValuesFunction = ctx.ItemValues; ctx.ItemValues = function(slotOrPropName) { return Srch.ValueInfo.getCachedCtxItemValue(ctx, slotOrPropName) }; ctx.ItemValues = cachePreviousItemValuesFunction; ctx.DisplayTemplateData = cachePreviousTemplateData; var plainItem = { title: $getItemValue(ctx, "Title") } return getHtml(plainItem); } window.RegisterTemplate_Minimal = function() { var srchLoaded = Srch && Srch.U && Srch.registerRenderTemplateByName; if (srchLoaded) { Srch.U.registerRenderTemplateByName(config.templateName, DisplayTemplate_Minimal); } if ('undefined' != typeof (Srch) && 'undefined' != typeof (Srch.U) && typeof(Srch.U.registerRenderTemplateByName) == 'function') { Srch.U.registerRenderTemplateByName(tolleUrl, DisplayTemplate_Minimal); } }; window.RegisterTemplate_Minimal(); if (typeof(RegisterModuleInit) == "function" && typeof(Srch.U.replaceUrlTokens) == "function") { RegisterModuleInit(Srch.U.replaceUrlTokens(tolleUrl), window.RegisterTemplate_Minimal); } })(); |
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”):
- Learn the Search Display Template Syntax: Corey Roth – Useful js for Display Templates
- Follow Elio Struyf’s 10 tips for working with Display Templates (except the first one – javascript is better
) - Prefer JavaScript Display Templates if you are a developer and you want to have a better control
- Never update the built-in Display Templates.
- Centralize reused parts of Display Templates – utilities, common parts, css. Use a CDN site for that.
- Check out the SPCSR github repo, there are many Display Templates that you can use or be inspired from.
- Create your own folder in _catalogs/masterpage/Display Template/Search to have all your Display Templates within a site collection.
