Posted on:
Categories: SharePoint

Creating custom search display templates in SharePoint sites differs quite a bit depending on whether the publishing feature is enabled or not. In a non-publishing site, the master page gallery's Display Templates folder will contain only .js files. There seems to be very little guidance on how to copy and customize these pure javascript files.

If you simply copy a display template to a new item and try to make use of it, you will encounter an error such as the following:

Template '~sitecollection/_catalogs/masterpage/Display Templates/Search/Custom_Item_Picture.js' not found or has syntax errors. (LoadTemplate: ~sitecollection/_catalogs/masterpage/Display Templates/Search/Group_Default.js)

Here are some tips on how to work with these files. You can use the tool of your choice. I decided to use nothing but Notepad and a browser.

  1. Work with the UNC path to the site collection's master page gallery. Map a drive to it if you prefer. E.g. \\\sites\abc\_catalogs\masterpage.
  2. In Windows Explorer, copy the relevant existing display template (such as Item_Default.js) to an item of your own name. Alternatively work via the browser to download and then upload a copy.
  3. Navigate to the master page gallery in the browser and set the new item's properties to be precisely the same as the item you copied from.
  4. Open the new display template, from the UNC path or mapped drive, in an editor such as Notepad.
  5. Within the file content you will find several references to the file's own name (such as Item_Default). Replace these with references to your new file name. You can do a find-replace but be careful because at least one of the references excludes the '.js' extension - make sure you catch all of these occurrences.
  6. At this point you should save and test that everything is working by referencing your new template from an appropriate search artifact, such as a result type. If all is well, you can then start altering the details to display things differently.