Create Tailored Search Results through Customized Display Templates
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
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
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
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
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