Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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

9,220 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

×