Developing SP 2013 Display Templates

7,879 views

Published on

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

Published in: Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
7,879
On SlideShare
0
From Embeds
0
Number of Embeds
6,800
Actions
Shares
0
Downloads
6
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Developing SP 2013 Display Templates

  1. 1. TriSPUG Create Tailored Search Results w/ Display Templates TRIANGLE SHAREPOINT USER GROUP – JULY 1, 2014 MIKE ORYSZAK BLOG: WWW.MIKEORYSZAK.COM TWITTER: @NEXT_CONNECT LINKEDIN: HTTP://WWW.LINKEDIN.COM/IN/MICHAELORYSZAK
  2. 2. TriSPUG 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. TriSPUG 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 3
  4. 4. TriSPUG Display Template Basics CREATE TAILORED SEARCH RESULTS W/ DISPLAY TEMPLATES BLOG: WWW.MIKEORYSZAK.COM TWITTER: @NEXT_CONNECT LINKEDIN: HTTP://WWW.LINKEDIN.COM/IN/MICHAELORYSZAK 4
  5. 5. TriSPUG 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 5
  6. 6. TriSPUG 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 6
  7. 7. TriSPUG 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 7
  8. 8. TriSPUG 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 8
  9. 9. TriSPUG Examples CREATE TAILORED SEARCH RESULTS W/ DISPLAY TEMPLATES BLOG: WWW.MIKEORYSZAK.COM TWITTER: @NEXT_CONNECT LINKEDIN: HTTP://WWW.LINKEDIN.COM/IN/MICHAELORYSZAK 9
  10. 10. TriSPUG 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 10
  11. 11. TriSPUG 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 11
  12. 12. TriSPUG Working With People Results Working with People results and presence BLOG: WWW.MIKEORYSZAK.COM TWITTER: @NEXT_CONNECT LINKEDIN: HTTP://WWW.LINKEDIN.COM/IN/MICHAELORYSZAK 12
  13. 13. TriSPUG 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 13
  14. 14. TriSPUG Closeout CREATE TAILORED SEARCH RESULTS W/ DISPLAY TEMPLATES BLOG: WWW.MIKEORYSZAK.COM TWITTER: @NEXT_CONNECT LINKEDIN: HTTP://WWW.LINKEDIN.COM/IN/MICHAELORYSZAK 15
  15. 15. TriSPUG Questions? BLOG: WWW.MIKEORYSZAK.COM TWITTER: @NEXT_CONNECT LINKEDIN: HTTP://WWW.LINKEDIN.COM/IN/MICHAELORYSZAK 16
  16. 16. TriSPUG 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 17

×