1. Meeting #127http://sharepointmn.com Welcome to the Minnesota SharePoint User Group July 8 th, 2015 SharePoint Search and Display Templates Kameron Berget Donald Donais

2. Meeting #127http://sharepointmn.com Agenda MNSPUG Information Search and Display Templates BREAK Search and Display Templates Giveaways

3. Meeting #127http://sharepointmn.com User Group Goal / Objectives Develop and support a local community focused on Microsoft SharePoint Technologies Educate user group members about SharePoint Technologies Transfer knowledge within the community Communicate best practices Introduce new products / solutions

4. Meeting #127http://sharepointmn.com MNSPUG Sponsors Wrox Press (www.wrox.com)www.wrox.com O’Reilly (www.oreilly.com)www.oreilly.com Dedicated Sponsors Avtex (www.avtex.com)www.avtex.com Microsoft (www.microsoft.com)www.microsoft.com Annual Sponsor Sponsorships Levels: Gold Sponsorship - $500 Silver Sponsorship - $250 Sponsorships Levels: Gold Sponsorship - $500 Silver Sponsorship - $250 SharePoint User Group Support Atomic Data (http://www.atomicdata.com)http://www.atomicdata.com

5. Meeting #127http://sharepointmn.com MN SharePoint Users Group Website SharePoint Resource Documents SharePoint Resource links RSS Feeds Meeting Schedule Past User Group Presentations Past User Group Recordings Sponsorship Information http://sharepointmn.com Email: sharepoint@sharepointmn.comsharepoint@sharepointmn.com

6. Meeting #127http://sharepointmn.com Social Networking Linked In group – The most interactive… includes job postings…  Post Job Posting on the Jobs Discussion page  http://www.linkedin.com/groups?gid=1878792 http://www.linkedin.com/groups?gid=1878792 Twitter tags - @MNSPUG and #MNSPUG Yammer – Minnesota SharePoint Users Group  https://www.yammer.com/mnspug/ https://www.yammer.com/mnspug/

7. Meeting #127http://sharepointmn.com Upcoming Schedule Next Meeting  August 12 th, 2015 – Wendy Neal - SharePoint Usability and Design Tips for Non Designers  Microsoft Technology Center, Edina, MN  Check www.SharePointMN.com for updates!www.SharePointMN.com Ongoing Schedule  2 nd Wednesday of every month  9:00 to 11:30 am  Microsoft Technical Center – Edina

8. Meeting #127http://sharepointmn.com Local and Online Events

9. Meeting #127http://sharepointmn.com Evaluations & Giveaways!

10. Meeting #127http://sharepointmn.com Presenters

11. Meeting #127http://sharepointmn.com Kameron Berget Expecting child #3 New Years Eve! Foster/Rescue dogs. @KameronBerget Kameron.berget@theitfactorconsulting.com https://spphile.wordpress.com/

12. Meeting #127http://sharepointmn.com SharePoint 2013 - Search Display Templates

13. Meeting #127http://sharepointmn.com What to Expect

14. Meeting #127http://sharepointmn.com What are we used to when customizing results? Content Query Web Part  Limited to site collection  Had to write XSLT  Slots (Similar to Content Search Display Templates) Search 2007/2010  XSLT Transformation/Templates to alter results

15. Meeting #127http://sharepointmn.com Challenge/Problem We want to get content from anywhere in our farm. Display the results the way we want. Create a reusable solution.

16. Meeting #127http://sharepointmn.com Solution? Display Templates! What are display templates?  A single HTML file.  Display templates control which managed properties are shown in the search results and how they appear in the Web Part.  Search results are controlled via a combination of: HTML5: Markup CSS: Style JavaScript: Logic –Wait, I need to learn JavaScript?? Advantages  No boundaries  Display Templates independent of one another  Reusable  Easier to debug

17. Meeting #127http://sharepointmn.com Types of Display Templates Control Templates  Determine the overall structure of how the results are presented. Includes lists, lists with paging, and slide shows. Item Templates (Result and Content Search)  Determine how each result in the set is displayed. Includes images, text, video, and other items. Filter (Refinement) Templates  Determine how each filter option is displayed.

18. Meeting #127http://sharepointmn.com Display Template Structure (Item) Template Title  Managed Property Mappings  External Resources(Optional)  JavaScript  HTML Markup

19. Meeting #127http://sharepointmn.com Where do we use these web parts? Display templates can only be used with Search web parts.  Search Results  Content Search  Cross-Site Publishing  Supported in both SPO and On Premises  Both will work with refinement web parts too.

20. Meeting #127http://sharepointmn.com Search Results Content Search Query Builder Display specific content Template Structure Template Location Web part configuration Reusable/Dynamic Web part configuration Template Location Result Types

21. Meeting #127http://sharepointmn.com Managed Properties Display templates rely on Managed Properties to display data within the template. Site Columns vs. List Columns  Site Columns get Managed properties mapped automatically. [Predictable]  List columns do not. You must create your own Managed Property after the content has been picked up by the crawl. Managed Property schema defines how each value can be used.  Text, Date, Number, Refiner, Sorting, Etc.  Changes to schema requires full crawl to take effect. SPO provides pre-configured managed properties for Refinement and Sorting. On Premises deployments require that you setup each property.

22. Meeting #127http://sharepointmn.com Today’s Scenario Today we are working with Contoso Thrills, an Amusement park company. They have a list of their rides, upcoming events and primary contacts. They would like to display this information in a more user friendly manner for their consumers. Some data has already been created along with content types and site columns. SPO Contoso Thrills Search Contoso News

23. Meeting #127http://sharepointmn.com Introduction to Rides, Events and People Lists Browse and locate display templates to get familiar with the pieces

24. Meeting #127http://sharepointmn.com /_catalogs/masterpage/Display Templates contains all of our display templates Display templates are local to the site collection but can be copied across sites as needed. All webs (aka Sub-sites) within the Site collection share the same display templates. Search Server Web Parts and Templates site collection feature needs to be activated to gain full functionality. Publishing Infrastructure needs to activated in order to see and add display templates. Design manager gives use a shortcut to our display templates

25. Meeting #127http://sharepointmn.com Modify our search center to show our custom refiners – Review properties in Schema Create new item result display template – Add rating and Height managed properties Create custom hover display template – Add publishing image managed property Create custom result type View our results

26. Meeting #127http://sharepointmn.com SPO gives us preconfigured managed properties for Refinement and Sorting. We cannot create our own. On Premises we create our own. The best way to build a new display template = Copy/Paste Search Results web parts rely on Result types to know how to render each result. Based on priority. Hover display templates add nice fly-out capability and the template structure is much the same.

27. Meeting #127http://sharepointmn.com Create new content search display template – Add rating and Height managed property mappings/slots Modify the homepage of Contoso Thrills to add a content search web part for Thrill rides and Family Rides. View our results

28. Meeting #127http://sharepointmn.com Content Search display templates differ slightly in their authoring Content Search display templates promote reusability for popular item layouts. The Content Search web part is configured differently than the search results web part.

29. Meeting #127http://sharepointmn.com Build display template for Events Review our new search driven home page.

30. Meeting #127http://sharepointmn.com Display templates are new and take some getting used to. Results hinge on crawl freshness. – Cannot control in SPO (See tips) – Certain requirements may require continuous crawl We have several different kind of display templates. Although similar in structure, they each provide a different unique purpose. Result type property sync is required when property mappings change. Haven’t seen this for SPO.

31. Meeting #127http://sharepointmn.com COPY/PASTE Use your favorite web designer to mockup your HTML. JavaScript alert function. – alert(“message”) Console.log(“message”) Bad syntax/errors give more friendly messages. You might be cached! Due to the way display templates are structured, you get very little intellisense. Try breaking out chunks of your code into your favorite IDE when writing JS to avoid typos. Reindex Site/List

32. Meeting #127http://sharepointmn.com Resources Slide Microsoft intro to display templates  https://msdn.microsoft.com/en- us/library/office/jj945138.aspx#bk_introduction https://msdn.microsoft.com/en- us/library/office/jj945138.aspx#bk_introduction SharePoint 2013 Search Display Template and Query Rules – Matthew McDermott  https://channel9.msdn.com/Events/SharePoint-Conference/2014/SPC322 https://channel9.msdn.com/Events/SharePoint-Conference/2014/SPC322 Changing the look of Search using Display Templates and CSR  https://channel9.msdn.com/Events/SharePoint- Conference/2014/SPC3000 - https://channel9.msdn.com/Events/SharePoint- Conference/2014/SPC3000

33. Meeting #127http://sharepointmn.com Last But Not Least Please Fill Out Evaluations Drawings for Giveaways Online Participants Eval  http://1drv.ms/1ctXdcB http://1drv.ms/1ctXdcB Today’s Presenters: Kameron Berget