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.

1. Build
KILLER VISUALS
with
Search & Display Templates
by Benjamin Niaulin,
a SharePoint GEEK

2. Benjamin Niaulin




twitter.com/bniaulin
ca.linkedin.com/in/bniaulin
benjamin.niaulin@share-gate.com
en.share-gate.com/blog

3. How
do we get here?

4. DON’T GET
TOO
EXCITED

5. FIRST…
What’s
CHANGED
in
SharePoint
2013?

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. 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. POP QUIZ!
If I plan to use a
Search-related Web Part
to show my content
!
What kind of Property
should I use?

9. MANAGED
PROPERTY

11. What’s changed?

12. HTML
CSS
JS
NO XSLT

13. DISPLAY
TEMPLATES
Looking Good!

14. The basics of
Display Template

15. They are
everywhere

16. Control
The « container »
!
!
Best way to
reference custom
files (JavaScript,
CSS, etc…)

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

18. n
o
i
t
a
r
i
Finding
i
p
s
n
tympanus.net/codrops/
line25.com
smashingmagazine.com

22. THINK
about it…
a reusable
design
for
Search Results

23. ARTICLES
An Image Slider with Search Results Web Part
Responsive Animated Tiles Menu with Search Results

24. Benjamin Niaulin




twitter.com/bniaulin
ca.linkedin.com/in/bniaulin
benjamin.niaulin@share-gate.com
en.share-gate.com/blog