Build Killer Visuals with SharePoint 2013 Search & Display Templates

7,745
-1

Published on

Solutions can no longer simply be functional, they need to look good and provide an excellent user experience. Thought the Search Results in SharePoint 2013 are already a great improvement over our previous experiences, it is even better when we take advantage of what it offers to change how results are displayed.
In this session, you will learn how to build a reusable, beautiful and dynamic menu built from a search query. See how to build a Display Template in SharePoint 2013, so that any returned Search Results can provide users with a dynamic menu to explore and interact with them.
See the difference between Control Display Templates and Item Display Templates to build your own interactive solutions with your SharePoint Content. The Display Template will be available at the end of the session.

Published in: Technology, Art & Photos

Build Killer Visuals with SharePoint 2013 Search & Display Templates

  1. 1. Build KILLER VISUALS with Search & Display Templates by Benjamin Niaulin, 
 a SharePoint GEEK
  2. 2. Benjamin Niaulin     twitter.com/bniaulin ca.linkedin.com/in/bniaulin benjamin.niaulin@share-gate.com en.share-gate.com/blog
  3. 3. How 
 do we get here?
  4. 4. DON’T GET TOO EXCITED
  5. 5. FIRST… What’s CHANGED in SharePoint 2013?
  6. 6. Search Web Parts Product Catalog Search-Drive Sites Best of FAST Search algorithms Visual Best Bets User Segmentation SEARCH! Query Language (FQL) Metadata Extraction Architecture Document Thumbnails Analytics Display Templates Query Rules Cross-Site Publishing Result Types Continuous Crawl Result Sources
  7. 7. Before we start ANYTHING
 with Search Crawled Property: Content & Metadata extracted (document itself, url, Title, etc…) Managed Property: Includes 1 or multiple mapped Crawled Properties and exists in the Search Index. Managed Properties are what SharePoint uses to Display Content.
  8. 8. POP QUIZ! If I plan to use a Search-related Web Part to show my content ! What kind of Property should I use?
  9. 9. MANAGED PROPERTY
  10. 10. What’s changed?
  11. 11. HTML CSS JS NO XSLT
  12. 12. DISPLAY
 TEMPLATES Looking Good!
  13. 13. The basics of Display Template
  14. 14. They are everywhere
  15. 15. Control The « container »  ! ! Best way to reference custom files (JavaScript, CSS, etc…)
  16. 16. Item Controls what happens to each item rendered through the query ! ! Use Managed Properties to show the content you want where you want using HTML
  17. 17. n o i t a r i Finding i p s n tympanus.net/codrops/ line25.com smashingmagazine.com
  18. 18. THINK about it… a reusable design for Search Results
  19. 19. ARTICLES An Image Slider with Search Results Web Part Responsive Animated Tiles Menu with Search Results
  20. 20. Benjamin Niaulin     twitter.com/bniaulin ca.linkedin.com/in/bniaulin benjamin.niaulin@share-gate.com en.share-gate.com/blog

×