Create Tailored Search Results w/ Display Templates

1. 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. 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

3. Please thank our sponsors! Platinum Sponsors

4. Please thank our sponsors! Gold Sponsors

5. Please thank our sponsors! Silver Sponsors

6. Please thank our sponsors! Item & Event Sponsors Snack Lunch Attendee Shirts Abel Solutions Speaker Shirts Speaker Dinner SharePint

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

8. Display Template Basics Create Tailored Search Results w/ Display Templates Blog: www.mikeoryszak.com Twitter: @NEXT_CONNECT Linkedin: http://www.linkedin.com/in/michaeloryszak

9. Display Template Basics Blog: www.mikeoryszak.com Twitter: @NEXT_CONNECT Linkedin: http://www.linkedin.com/in/michaeloryszak • 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

10. Display Template Basics Blog: www.mikeoryszak.com Twitter: @NEXT_CONNECT Linkedin: http://www.linkedin.com/in/michaeloryszak • 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

11. Display Template Basics Blog: www.mikeoryszak.com Twitter: @NEXT_CONNECT Linkedin: http://www.linkedin.com/in/michaeloryszak • Process Flow with Result Type Rules • Dynamically selects which template to use on each item based on the rules

12. Display Template Basics Blog: www.mikeoryszak.com Twitter: @NEXT_CONNECT Linkedin: http://www.linkedin.com/in/michaeloryszak • Process Flow with Result Type Rules • Central Control File • Specified item template shows all items formatted the same way

13. Examples Create Tailored Search Results w/ Display Templates Blog: www.mikeoryszak.com Twitter: @NEXT_CONNECT Linkedin: http://www.linkedin.com/in/michaeloryszak

14. Tweak Standard Results Blog: www.mikeoryszak.com Twitter: @NEXT_CONNECT Linkedin: http://www.linkedin.com/in/michaeloryszak • Simple example to get us started, minor format changes to existing display

15. Grid View Results Blog: www.mikeoryszak.com Twitter: @NEXT_CONNECT Linkedin: http://www.linkedin.com/in/michaeloryszak • Modify the results to show them in a grid/table view

16. Working With People Results Blog: www.mikeoryszak.com Twitter: @NEXT_CONNECT Linkedin: http://www.linkedin.com/in/michaeloryszak • Working with People results and presence

17. Customizing the Hover Panel Blog: www.mikeoryszak.com Twitter: @NEXT_CONNECT Linkedin: http://www.linkedin.com/in/michaeloryszak • Provide layout changes to the hover panel

18. Closeout Create Tailored Search Results w/ Display Templates Blog: www.mikeoryszak.com Twitter: @NEXT_CONNECT Linkedin: http://www.linkedin.com/in/michaeloryszak

19. Questions? Blog: www.mikeoryszak.com Twitter: @NEXT_CONNECT Linkedin: http://www.linkedin.com/in/michaeloryszak

20. Resources Blog: www.mikeoryszak.com Twitter: @NEXT_CONNECT Linkedin: http://www.linkedin.com/in/michaeloryszak • 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/

21. Join us for SharePint • Max Lager’s – 320 Peachtree Street NE • Right after the event ends • First drink is on The Intersect Group • The valet is located one block south of Max Lager’s on Baker and Peachtree at White Oak Kitchen & Cocktails (WOKC). Bring in your ticket for validation • See the SPSATL Website for more info and directions

22. SharePint Directions