Learn how to develop custom SharePoint Display Templates to deliver robust content on your site.

1. SPSATL 2014
Create Tailored Search
Results w/ Display Templates
SHAREPOINT SATURDAY ATLANTA – JUNE 21, 2013
MIKE ORYSZAK
BLOG: WWW.MIKEORYSZAK.COM
TWITTER: @NEXT_CONNECT
LINKEDIN: HTTP://WWW.LINKEDIN.COM/IN/MICHAELORYSZAK

2. SPSATL 2014
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
Scan the QR code for a
chance to win a prize!
BLOG: WWW.MIKEORYSZAK.COM
TWITTER: @NEXT_CONNECT
LINKEDIN: HTTP://WWW.LINKEDIN.COM/IN/MICHAELORYSZAK
2

3. 3 SharePoint Saturday Atlanta3 |SharePoint Saturday Atlanta

4. 4 SharePoint Saturday Atlanta4 |SharePoint Saturday Atlanta

5. 5 SharePoint Saturday Atlanta5 |SharePoint Saturday Atlanta

6. 6 SharePoint Saturday Atlanta6 |SharePoint Saturday Atlanta
Lunch Snack
SharePint
SpeakerShirts AttendeeShirts
AbelSolutions
SpeakerDinner

7. SPSATL 2014
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
7

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

9. SPSATL 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
9

10. SPSATL 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
10

11. SPSATL 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
11

12. SPSATL 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
12

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

14. SPSATL 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
14

15. SPSATL 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
15

16. SPSATL 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
16

17. SPSATL 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
17

18. SPSATL 2014
Closeout
CREATE TAILORED SEARCH RESULTS W/ DISPLAY TEMPLATES
BLOG: WWW.MIKEORYSZAK.COM
TWITTER: @NEXT_CONNECT
LINKEDIN: HTTP://WWW.LINKEDIN.COM/IN/MICHAELORYSZAK
19

19. SPSATL 2014
Questions?
BLOG: WWW.MIKEORYSZAK.COM
TWITTER: @NEXT_CONNECT
LINKEDIN: HTTP://WWW.LINKEDIN.COM/IN/MICHAELORYSZAK
20

20. SPSATL 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
21

21. 22 SharePoint Saturday Atlanta22 |SharePoint Saturday Atlanta
 Max Lager’s – 320 Peachtree Street NE

 The Intersect Group
 Max
Lager’s Baker Peachtree
 See the SPSATL Website for more info and
directions
Join us for SharePint

22. 23 SharePoint Saturday Atlanta23 |SharePoint Saturday Atlanta
SharePint Directions