Developing SP 2013 Display Templates

TriSPUG

Create Tailored Search Results w/ Display TemplatesTRIANGLE SHAREPOINT USER GROUP – JULY 1, 2014

MIKE ORYSZAK

BLOG: WWW.MIKEORYSZAK.COMTWITTER: @NEXT_CONNECT LINKEDIN: HTTP://WWW.LINKEDIN.COM/IN/MICHAELORYSZAK

TriSPUG

About Me

Senior SharePoint Solution Architect w/ B&R Solutions

Microsoft SharePoint Server MVP (5-time)

Leader for Triangle SharePoint User Group (TriSPUG)

Dev and Architect with MS stack since 1996

Working with SharePoint since 2002

Raleigh-Durham, NC

BLOG: WWW.MIKEORYSZAK.COM TWITTER: @NEXT_CONNECT LINKEDIN: HTTP://WWW.LINKEDIN.COM/IN/MICHAELORYSZAK

2

TriSPUG

Session Overview

Display Template Basics

How to Work With Display Templates

Examples:Example 1 – Simple tweak of standard resultsExample 2 – Show results in a grid viewExample 3 – Working with People ResultsExample 4 – Customize the hover panel

Closeout

Target Audience:

Developers interested in creating customized result displays or building search driving applications.


3

4TriSPUG

Display Template BasicsCREATE TAILORED SEARCH RESULTS W/ DISPLAY TEMPLATES


TriSPUG 5

Display Template BasicsWhat are Display Templates?

Display templates are used by the Search related Web Parts to render search results in SharePoint 2013They leverage client side code to allow for dynamic injection and rendering Important to note: Part of the Design Manager layer


TriSPUG 6

Display Template BasicsLocated in the Master Page Gallery at the Site Collection level

Under Display Templates/Search

ConsiderationsCan map a drive to the gallery or upload the files individuallyPair of files for each template; html and javascript

You work with html, the javascript file is generated when the html file is saved to the gallery

Display Template Reference:http://technet.microsoft.com/en-us/library/jj944947(v=office.15).aspx


http://technet.microsoft.com/en-us/library/jj944947(v=office.15).aspx



TriSPUG 7

Display Template BasicsProcess Flow with Result Type Rules

Dynamically selects which template to use on each item based on the rules


TriSPUG 8

Display Template BasicsProcess Flow with Result Type Rules

Central Control FileSpecified item template shows all items formatted the same way


9TriSPUG

ExamplesCREATE TAILORED SEARCH RESULTS W/ DISPLAY TEMPLATES


TriSPUG 10

Tweak Standard ResultsSimple example to get us started, minor format changes to existing display


TriSPUG 11

Grid View ResultsModify the results to show them in a grid/table view


TriSPUG 12

Working With People ResultsWorking with People results and presence


TriSPUG 13

Customizing the Hover PanelProvide layout changes to the hover panel


15TriSPUG

CloseoutCREATE TAILORED SEARCH RESULTS W/ DISPLAY TEMPLATES


16TriSPUG

Questions?


TriSPUG 17

ResourcesDesign Manager display templates

http://msdn.microsoft.com/en-us/library/office/jj945138(v=office.15).aspx

Display Template Referencehttp://technet.microsoft.com/en-us/library/jj944947(v=office.15).aspx

Add Presence to SharePoint Search Results – Matthew McDermotthttp://www.ableblue.com/blog/archive/2013/06/05/add-presence-to-sharepoint-search-results/

Search Results in Grid Viewhttp://mikeoryszak.com/2014/05/search-results-in-grid-view/

My Search Blog Postshttp://mikeoryszak.com/tag/search/






http://www.ableblue.com/blog/archive/2013/06/05/add-presence-to-sharepoint-search-results/

http://www.ableblue.com/blog/archive/2013/06/05/add-presence-to-sharepoint-search-results/

http://mikeoryszak.com/2014/05/search-results-in-grid-view/

http://mikeoryszak.com/2014/05/search-results-in-grid-view/

http://mikeoryszak.com/tag/search/

http://mikeoryszak.com/tag/search/

Technology

Developing SP 2013 Display Templates