build killer visuals with sharepoint 2013 search & display templates
DESCRIPTION
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.TRANSCRIPT
![Page 1: Build Killer Visuals with SharePoint 2013 Search & Display Templates](https://reader034.vdocument.in/reader034/viewer/2022051312/54635d9eaf795949398b5f86/html5/thumbnails/1.jpg)
Build
KILLER VISUALSwith Search & Display Templates
by Benjamin Niaulin, a SharePoint GEEK
![Page 2: Build Killer Visuals with SharePoint 2013 Search & Display Templates](https://reader034.vdocument.in/reader034/viewer/2022051312/54635d9eaf795949398b5f86/html5/thumbnails/2.jpg)
twitter.com/bniaulin
ca.linkedin.com/in/bniaulin
en.share-gate.com/blog
Benjamin Niaulin
![Page 3: Build Killer Visuals with SharePoint 2013 Search & Display Templates](https://reader034.vdocument.in/reader034/viewer/2022051312/54635d9eaf795949398b5f86/html5/thumbnails/3.jpg)
How do we get here?
![Page 4: Build Killer Visuals with SharePoint 2013 Search & Display Templates](https://reader034.vdocument.in/reader034/viewer/2022051312/54635d9eaf795949398b5f86/html5/thumbnails/4.jpg)
DON’T GET TOO
EXCITED
![Page 5: Build Killer Visuals with SharePoint 2013 Search & Display Templates](https://reader034.vdocument.in/reader034/viewer/2022051312/54635d9eaf795949398b5f86/html5/thumbnails/5.jpg)
FIRST…
What’s CHANGED
in SharePoint
2013?
![Page 6: Build Killer Visuals with SharePoint 2013 Search & Display Templates](https://reader034.vdocument.in/reader034/viewer/2022051312/54635d9eaf795949398b5f86/html5/thumbnails/6.jpg)
SEARCH!Best of FAST Search algorithms
Document ThumbnailsQuery Language (FQL)
Architecture
Visual Best Bets User Segmentation
Metadata Extraction
Continuous Crawl
Analytics
Result SourcesResult Types
Query RulesDisplay Templates
Search Web Parts
Cross-Site Publishing
Product Catalog Search-Drive Sites
![Page 7: Build Killer Visuals with SharePoint 2013 Search & Display Templates](https://reader034.vdocument.in/reader034/viewer/2022051312/54635d9eaf795949398b5f86/html5/thumbnails/7.jpg)
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.
![Page 8: Build Killer Visuals with SharePoint 2013 Search & Display Templates](https://reader034.vdocument.in/reader034/viewer/2022051312/54635d9eaf795949398b5f86/html5/thumbnails/8.jpg)
POP QUIZ!
If I plan to use a Search-related Web Part
to show my content !
What kind of Property should I use?
![Page 9: Build Killer Visuals with SharePoint 2013 Search & Display Templates](https://reader034.vdocument.in/reader034/viewer/2022051312/54635d9eaf795949398b5f86/html5/thumbnails/9.jpg)
MANAGED PROPERTY
![Page 10: Build Killer Visuals with SharePoint 2013 Search & Display Templates](https://reader034.vdocument.in/reader034/viewer/2022051312/54635d9eaf795949398b5f86/html5/thumbnails/10.jpg)
![Page 11: Build Killer Visuals with SharePoint 2013 Search & Display Templates](https://reader034.vdocument.in/reader034/viewer/2022051312/54635d9eaf795949398b5f86/html5/thumbnails/11.jpg)
What’s changed?
![Page 12: Build Killer Visuals with SharePoint 2013 Search & Display Templates](https://reader034.vdocument.in/reader034/viewer/2022051312/54635d9eaf795949398b5f86/html5/thumbnails/12.jpg)
HTML CSS JS
NO XSLT
![Page 13: Build Killer Visuals with SharePoint 2013 Search & Display Templates](https://reader034.vdocument.in/reader034/viewer/2022051312/54635d9eaf795949398b5f86/html5/thumbnails/13.jpg)
DISPLAY TEMPLATES
Looking Good!
![Page 14: Build Killer Visuals with SharePoint 2013 Search & Display Templates](https://reader034.vdocument.in/reader034/viewer/2022051312/54635d9eaf795949398b5f86/html5/thumbnails/14.jpg)
The basics of Display Template
![Page 15: Build Killer Visuals with SharePoint 2013 Search & Display Templates](https://reader034.vdocument.in/reader034/viewer/2022051312/54635d9eaf795949398b5f86/html5/thumbnails/15.jpg)
They are everywhere
![Page 16: Build Killer Visuals with SharePoint 2013 Search & Display Templates](https://reader034.vdocument.in/reader034/viewer/2022051312/54635d9eaf795949398b5f86/html5/thumbnails/16.jpg)
The « container » !!Best way to reference custom files (JavaScript, CSS, etc…)
Control
![Page 17: Build Killer Visuals with SharePoint 2013 Search & Display Templates](https://reader034.vdocument.in/reader034/viewer/2022051312/54635d9eaf795949398b5f86/html5/thumbnails/17.jpg)
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
![Page 18: Build Killer Visuals with SharePoint 2013 Search & Display Templates](https://reader034.vdocument.in/reader034/viewer/2022051312/54635d9eaf795949398b5f86/html5/thumbnails/18.jpg)
Finding
inspiration
line25.com
smashingmagazine.com
tympanus.net/codrops/
![Page 19: Build Killer Visuals with SharePoint 2013 Search & Display Templates](https://reader034.vdocument.in/reader034/viewer/2022051312/54635d9eaf795949398b5f86/html5/thumbnails/19.jpg)
![Page 20: Build Killer Visuals with SharePoint 2013 Search & Display Templates](https://reader034.vdocument.in/reader034/viewer/2022051312/54635d9eaf795949398b5f86/html5/thumbnails/20.jpg)
![Page 21: Build Killer Visuals with SharePoint 2013 Search & Display Templates](https://reader034.vdocument.in/reader034/viewer/2022051312/54635d9eaf795949398b5f86/html5/thumbnails/21.jpg)
![Page 22: Build Killer Visuals with SharePoint 2013 Search & Display Templates](https://reader034.vdocument.in/reader034/viewer/2022051312/54635d9eaf795949398b5f86/html5/thumbnails/22.jpg)
THINK
a reusable design
for Search Results
about it…
![Page 23: Build Killer Visuals with SharePoint 2013 Search & Display Templates](https://reader034.vdocument.in/reader034/viewer/2022051312/54635d9eaf795949398b5f86/html5/thumbnails/23.jpg)
ARTICLES
An Image Slider with Search Results Web Part
Responsive Animated Tiles Menu with Search Results
![Page 24: Build Killer Visuals with SharePoint 2013 Search & Display Templates](https://reader034.vdocument.in/reader034/viewer/2022051312/54635d9eaf795949398b5f86/html5/thumbnails/24.jpg)
twitter.com/bniaulin
ca.linkedin.com/in/bniaulin
en.share-gate.com/blog
Benjamin Niaulin