SPSNYC 2014
Create Tailored Search
Results w/ Display Templates
SHAREPOINT SATURDAY NYC– JULY 26, 2014
MIKE ORYSZAK
BLOG: ...
About Me
Senior SharePoint Solution Architect w/ B&R Solutions
Microsoft SharePoint Server MVP (5-time)
Leader for Tria...
THANK YOU EVENT
SPONSORS
• Please visit them and inquire about their
products & services
• To win prizes make sure to get ...
Session
Overview
Display Template Basics
How to Work With Display Templates
Examples:
Example 1 – Simple tweak of stan...
Display Template Basics
CREATE TAILORED SEARCH RESULTS W/ DISPLAY TEMPLATES
BLOG: WWW.MIKEORYSZAK.COM
TWITTER: @NEXT_CONNE...
SPSNYC 2014
Display Template Basics
What are Display Templates?
Display templates are used by the Search related Web Par...
SPSNYC 2014
Display Template Basics
Located in the Master Page Gallery at the Site Collection level
Under Display Templa...
SPSNYC 2014
Display Template Basics
Process Flow with Result Type Rules
Dynamically selects which template to use on eac...
SPSNYC 2014
Display Template Basics
Process Flow with Result Type Rules
Central Control File
Specified item template sh...
Examples
CREATE TAILORED SEARCH RESULTS W/ DISPLAY TEMPLATES
BLOG: WWW.MIKEORYSZAK.COM
TWITTER: @NEXT_CONNECT
LINKEDIN: HT...
SPSNYC 2014
Tweak Standard Results
Simple example to get us started, minor format changes to existing display
BLOG: WWW.M...
SPSNYC 2014
Grid View Results
Modify the results to show them in a grid/table view
BLOG: WWW.MIKEORYSZAK.COM
TWITTER: @NE...
SPSNYC 2014
Working With People Results
Working with People results and presence
BLOG: WWW.MIKEORYSZAK.COM
TWITTER: @NEXT...
SPSNYC 2014
Customizing the Hover Panel
Provide layout changes to the hover panel
BLOG: WWW.MIKEORYSZAK.COM
TWITTER: @NEX...
Closeout
CREATE TAILORED SEARCH RESULTS W/ DISPLAY TEMPLATES
BLOG: WWW.MIKEORYSZAK.COM
TWITTER: @NEXT_CONNECT
LINKEDIN: HT...
Questions?
BLOG: WWW.MIKEORYSZAK.COM
TWITTER: @NEXT_CONNECT
LINKEDIN: HTTP://WWW.LINKEDIN.COM/IN/MICHAELORYSZAK
17
SPSNYC 2014
Resources
Design Manager display templates
http://msdn.microsoft.com/en-us/library/office/jj945138(v=office....
Upcoming SlideShare
Loading in …5
×

Create Tailored Search Results through Customized Display Templates

8,393 views

Published on

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

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Create Tailored Search Results through Customized Display Templates

  1. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 16. Questions? BLOG: WWW.MIKEORYSZAK.COM TWITTER: @NEXT_CONNECT LINKEDIN: HTTP://WWW.LINKEDIN.COM/IN/MICHAELORYSZAK 17
  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

×