Create Tailored Search Results with custom display templates for SharePoint 2013.

1. SPSNYC 2014
Create Tailored Search
Results w/ Display Templates
SHAREPOINT SATURDAY NYC– JULY 26, 2014
MIKE ORYSZAK
BLOG: WWW.MIKEORYSZAK.COM
TWITTER: @NEXT_CONNECT
LINKEDIN: HTTP://WWW.LINKEDIN.COM/IN/MICHAELORYSZAK

2. 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

3. THANK YOU EVENT
SPONSORS
• Please visit them and inquire about their
products & services
• To win prizes make sure to get your
bingo card stamped by ALL sponsors

4. Session
Overview
Display Template Basics
How to Work With Display Templates
Examples:
Example 1 – Simple tweak of standard results
Example 2 – Show results in a grid view
Example 3 – Working with People Results
Example 4 – Customize the hover panel
Closeout
Target Audience:
Developers interested in creating
customized result displays or building
search driving applications.
BLOG: WWW.MIKEORYSZAK.COM
TWITTER: @NEXT_CONNECT
LINKEDIN: HTTP://WWW.LINKEDIN.COM/IN/MICHAELORYSZAK
4

5. Display Template Basics
CREATE TAILORED SEARCH RESULTS W/ DISPLAY TEMPLATES
BLOG: WWW.MIKEORYSZAK.COM
TWITTER: @NEXT_CONNECT
LINKEDIN: HTTP://WWW.LINKEDIN.COM/IN/MICHAELORYSZAK
5

6. SPSNYC 2014
Display Template Basics
What are Display Templates?
Display templates are used by the Search related Web Parts to render search results in SharePoint 2013
They leverage client side code to allow for dynamic injection and rendering
Important to note: Part of the Design Manager layer
BLOG: WWW.MIKEORYSZAK.COM
TWITTER: @NEXT_CONNECT
LINKEDIN: HTTP://WWW.LINKEDIN.COM/IN/MICHAELORYSZAK
6

7. SPSNYC 2014
Display Template Basics
Located in the Master Page Gallery at the Site Collection level
Under Display Templates/Search
Considerations
Can map a drive to the gallery or upload the files individually
Pair 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
BLOG: WWW.MIKEORYSZAK.COM
TWITTER: @NEXT_CONNECT
LINKEDIN: HTTP://WWW.LINKEDIN.COM/IN/MICHAELORYSZAK
7

8. SPSNYC 2014
Display Template Basics
Process Flow with Result Type Rules
Dynamically selects which template to use on each item based on the rules
BLOG: WWW.MIKEORYSZAK.COM
TWITTER: @NEXT_CONNECT
LINKEDIN: HTTP://WWW.LINKEDIN.COM/IN/MICHAELORYSZAK
8

9. SPSNYC 2014
Display Template Basics
Process Flow with Result Type Rules
Central Control File
Specified item template shows all items formatted the same way
BLOG: WWW.MIKEORYSZAK.COM
TWITTER: @NEXT_CONNECT
LINKEDIN: HTTP://WWW.LINKEDIN.COM/IN/MICHAELORYSZAK
9

10. Examples
CREATE TAILORED SEARCH RESULTS W/ DISPLAY TEMPLATES
BLOG: WWW.MIKEORYSZAK.COM
TWITTER: @NEXT_CONNECT
LINKEDIN: HTTP://WWW.LINKEDIN.COM/IN/MICHAELORYSZAK
10

11. SPSNYC 2014
Tweak Standard Results
Simple example to get us started, minor format changes to existing display
BLOG: WWW.MIKEORYSZAK.COM
TWITTER: @NEXT_CONNECT
LINKEDIN: HTTP://WWW.LINKEDIN.COM/IN/MICHAELORYSZAK
11

12. SPSNYC 2014
Grid View Results
Modify the results to show them in a grid/table view
BLOG: WWW.MIKEORYSZAK.COM
TWITTER: @NEXT_CONNECT
LINKEDIN: HTTP://WWW.LINKEDIN.COM/IN/MICHAELORYSZAK
12

13. SPSNYC 2014
Working With People Results
Working with People results and presence
BLOG: WWW.MIKEORYSZAK.COM
TWITTER: @NEXT_CONNECT
LINKEDIN: HTTP://WWW.LINKEDIN.COM/IN/MICHAELORYSZAK
13

14. SPSNYC 2014
Customizing the Hover Panel
Provide layout changes to the hover panel
BLOG: WWW.MIKEORYSZAK.COM
TWITTER: @NEXT_CONNECT
LINKEDIN: HTTP://WWW.LINKEDIN.COM/IN/MICHAELORYSZAK
14

15. Closeout
CREATE TAILORED SEARCH RESULTS W/ DISPLAY TEMPLATES
BLOG: WWW.MIKEORYSZAK.COM
TWITTER: @NEXT_CONNECT
LINKEDIN: HTTP://WWW.LINKEDIN.COM/IN/MICHAELORYSZAK
16

16. Questions?
BLOG: WWW.MIKEORYSZAK.COM
TWITTER: @NEXT_CONNECT
LINKEDIN: HTTP://WWW.LINKEDIN.COM/IN/MICHAELORYSZAK
17

17. SPSNYC 2014
Resources
Design Manager display templates
http://msdn.microsoft.com/en-us/library/office/jj945138(v=office.15).aspx
Display Template Reference
http://technet.microsoft.com/en-us/library/jj944947(v=office.15).aspx
Add Presence to SharePoint Search Results – Matthew McDermott
http://www.ableblue.com/blog/archive/2013/06/05/add-presence-to-sharepoint-search-results/
Search Results in Grid View
http://mikeoryszak.com/2014/05/search-results-in-grid-view/
My Search Blog Posts
http://mikeoryszak.com/tag/search/
BLOG: WWW.MIKEORYSZAK.COM
TWITTER: @NEXT_CONNECT
LINKEDIN: HTTP://WWW.LINKEDIN.COM/IN/MICHAELORYSZAK
18