Build killer visuals to interact with your content using Search and Display Template
-
Upload
sharegate -
Category
Technology
-
view
163 -
download
0
Transcript of Build killer visuals to interact with your content using Search and Display Template
![Page 1: Build killer visuals to interact with your content using Search and Display Template](https://reader031.fdocuments.in/reader031/viewer/2022030316/587258ac1a28ab31498b478b/html5/thumbnails/1.jpg)
CONTENT SEARCH
with Search & Display Templates
by Benjamin Niaulin, a SharePoint GEEK
![Page 3: Build killer visuals to interact with your content using Search and Display Template](https://reader031.fdocuments.in/reader031/viewer/2022030316/587258ac1a28ab31498b478b/html5/thumbnails/3.jpg)
IS THIS GOING TO BE A DEV SESSION?
![Page 4: Build killer visuals to interact with your content using Search and Display Template](https://reader031.fdocuments.in/reader031/viewer/2022030316/587258ac1a28ab31498b478b/html5/thumbnails/4.jpg)
BECAUSE I DON’T KNOW HOW TO CODE EITHER!
BUT I HAVE TO DELIVER SOLUTIONS IN SHAREPOINT AND THEY HAVE TO LOOK
GOOD TOO
NO
![Page 5: Build killer visuals to interact with your content using Search and Display Template](https://reader031.fdocuments.in/reader031/viewer/2022030316/587258ac1a28ab31498b478b/html5/thumbnails/5.jpg)
SO WHAT ARE YOU GOING TO
SHOW US IN SHAREPOINT?
![Page 6: Build killer visuals to interact with your content using Search and Display Template](https://reader031.fdocuments.in/reader031/viewer/2022030316/587258ac1a28ab31498b478b/html5/thumbnails/6.jpg)
TO FIND AND DISPLAY!
![Page 7: Build killer visuals to interact with your content using Search and Display Template](https://reader031.fdocuments.in/reader031/viewer/2022030316/587258ac1a28ab31498b478b/html5/thumbnails/7.jpg)
GOOD, BECAUSE I AM HAVING SOME
ISSUES IN SHAREPOINT
2010
![Page 8: Build killer visuals to interact with your content using Search and Display Template](https://reader031.fdocuments.in/reader031/viewer/2022030316/587258ac1a28ab31498b478b/html5/thumbnails/8.jpg)
Showing data from multiple lists/libraries at the same time
Change the date format in a list/library
Contextual Results
Changing the look of what we are seeing
Accessing information from other Site Collections
![Page 10: Build killer visuals to interact with your content using Search and Display Template](https://reader031.fdocuments.in/reader031/viewer/2022030316/587258ac1a28ab31498b478b/html5/thumbnails/10.jpg)
@bniaulin
Wonderful XSLT <xsl:template name="dvt_1.noKeyword"> <span class="srch-description2"> <xsl:choose> <xsl:when test="$IsFixedQuery"> <xsl:value-of select="$NoFixedQuery" /> </xsl:when> <xsl:otherwise> <xsl:value-of select="$NoKeyword" /> </xsl:otherwise> </xsl:choose> </span> </xsl:template> <!-- When empty result set is returned from search --> <xsl:template name="dvt_1.empty"> <div class="srch-results"> <xsl:if test="string-length($SrchRSSLink) > 0 and $ShowActionLinks"> <a type="application/rss+xml" href ="{$SrchRSSLink}" title="{$SrchRSSText}" id="SRCHRSSL" class="srch-ext-action-margin"> <img style="vertical-align: middle;" border="0" src="/_layouts/images/rss.gif" alt=""/> <xsl:text disable-output-escaping="yes">&nbsp;</xsl:text> <xsl:value-of select="$SrchRSSText"/>
![Page 12: Build killer visuals to interact with your content using Search and Display Template](https://reader031.fdocuments.in/reader031/viewer/2022030316/587258ac1a28ab31498b478b/html5/thumbnails/12.jpg)
YES! I AM SAYING
THERE IS SOMETHING BETTER OUT
THERE
![Page 13: Build killer visuals to interact with your content using Search and Display Template](https://reader031.fdocuments.in/reader031/viewer/2022030316/587258ac1a28ab31498b478b/html5/thumbnails/13.jpg)
DON’T GET TOO
EXCITED
![Page 14: Build killer visuals to interact with your content using Search and Display Template](https://reader031.fdocuments.in/reader031/viewer/2022030316/587258ac1a28ab31498b478b/html5/thumbnails/14.jpg)
FIRST…
What’s CHANGED
in SharePoint
2013?
![Page 15: Build killer visuals to interact with your content using Search and Display Template](https://reader031.fdocuments.in/reader031/viewer/2022030316/587258ac1a28ab31498b478b/html5/thumbnails/15.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 16: Build killer visuals to interact with your content using Search and Display Template](https://reader031.fdocuments.in/reader031/viewer/2022030316/587258ac1a28ab31498b478b/html5/thumbnails/16.jpg)
Continuous Crawl
![Page 17: Build killer visuals to interact with your content using Search and Display Template](https://reader031.fdocuments.in/reader031/viewer/2022030316/587258ac1a28ab31498b478b/html5/thumbnails/17.jpg)
The Real Continuous Crawl
•Only works on SharePoint Content Sources
•By default every 15min
Set-SPEnterpriseSearchCrawlContentSource
•Once indexed, content appears almost right away...like magic
•Lots of added pressure on the Server
![Page 18: Build killer visuals to interact with your content using Search and Display Template](https://reader031.fdocuments.in/reader031/viewer/2022030316/587258ac1a28ab31498b478b/html5/thumbnails/18.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 19: Build killer visuals to interact with your content using Search and Display Template](https://reader031.fdocuments.in/reader031/viewer/2022030316/587258ac1a28ab31498b478b/html5/thumbnails/19.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 20: Build killer visuals to interact with your content using Search and Display Template](https://reader031.fdocuments.in/reader031/viewer/2022030316/587258ac1a28ab31498b478b/html5/thumbnails/20.jpg)
MANAGED PROPERTY
![Page 21: Build killer visuals to interact with your content using Search and Display Template](https://reader031.fdocuments.in/reader031/viewer/2022030316/587258ac1a28ab31498b478b/html5/thumbnails/21.jpg)
![Page 22: Build killer visuals to interact with your content using Search and Display Template](https://reader031.fdocuments.in/reader031/viewer/2022030316/587258ac1a28ab31498b478b/html5/thumbnails/22.jpg)
SearchSearch Crawl
Content Search Web Part
Site Collection A
Site Collection B
CONTENT SEARCH
![Page 23: Build killer visuals to interact with your content using Search and Display Template](https://reader031.fdocuments.in/reader031/viewer/2022030316/587258ac1a28ab31498b478b/html5/thumbnails/23.jpg)
Query Builder
![Page 24: Build killer visuals to interact with your content using Search and Display Template](https://reader031.fdocuments.in/reader031/viewer/2022030316/587258ac1a28ab31498b478b/html5/thumbnails/24.jpg)
What’s changed?
![Page 25: Build killer visuals to interact with your content using Search and Display Template](https://reader031.fdocuments.in/reader031/viewer/2022030316/587258ac1a28ab31498b478b/html5/thumbnails/25.jpg)
HTML CSS JS
NO XSLT
![Page 26: Build killer visuals to interact with your content using Search and Display Template](https://reader031.fdocuments.in/reader031/viewer/2022030316/587258ac1a28ab31498b478b/html5/thumbnails/26.jpg)
DISPLAYTEMPLATES
Looking Good!
![Page 27: Build killer visuals to interact with your content using Search and Display Template](https://reader031.fdocuments.in/reader031/viewer/2022030316/587258ac1a28ab31498b478b/html5/thumbnails/27.jpg)
The basics of Display Template
![Page 28: Build killer visuals to interact with your content using Search and Display Template](https://reader031.fdocuments.in/reader031/viewer/2022030316/587258ac1a28ab31498b478b/html5/thumbnails/28.jpg)
They are everywhere
![Page 29: Build killer visuals to interact with your content using Search and Display Template](https://reader031.fdocuments.in/reader031/viewer/2022030316/587258ac1a28ab31498b478b/html5/thumbnails/29.jpg)
The « container »
Best way to reference custom files (JavaScript, CSS, etc…)
Control
![Page 30: Build killer visuals to interact with your content using Search and Display Template](https://reader031.fdocuments.in/reader031/viewer/2022030316/587258ac1a28ab31498b478b/html5/thumbnails/30.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 31: Build killer visuals to interact with your content using Search and Display Template](https://reader031.fdocuments.in/reader031/viewer/2022030316/587258ac1a28ab31498b478b/html5/thumbnails/31.jpg)
Result Types
1 - One or more characteristics or conditions to compare each search result against, such as the result source or content type of the search result
Identify different types of results
2 - A display template to use for search results that meet the conditions.
![Page 32: Build killer visuals to interact with your content using Search and Display Template](https://reader031.fdocuments.in/reader031/viewer/2022030316/587258ac1a28ab31498b478b/html5/thumbnails/32.jpg)
Finding
inspiration
line25.com
smashingmagazine.com
tympanus.net/codrops/
![Page 33: Build killer visuals to interact with your content using Search and Display Template](https://reader031.fdocuments.in/reader031/viewer/2022030316/587258ac1a28ab31498b478b/html5/thumbnails/33.jpg)
![Page 34: Build killer visuals to interact with your content using Search and Display Template](https://reader031.fdocuments.in/reader031/viewer/2022030316/587258ac1a28ab31498b478b/html5/thumbnails/34.jpg)
![Page 35: Build killer visuals to interact with your content using Search and Display Template](https://reader031.fdocuments.in/reader031/viewer/2022030316/587258ac1a28ab31498b478b/html5/thumbnails/35.jpg)
![Page 36: Build killer visuals to interact with your content using Search and Display Template](https://reader031.fdocuments.in/reader031/viewer/2022030316/587258ac1a28ab31498b478b/html5/thumbnails/36.jpg)
THINK
a reusable design
for Search Results
about it…
![Page 37: Build killer visuals to interact with your content using Search and Display Template](https://reader031.fdocuments.in/reader031/viewer/2022030316/587258ac1a28ab31498b478b/html5/thumbnails/37.jpg)
ARTICLES
An Image Slider with Search Results Web Part
Responsive Animated Tiles Menu with Search Results
Learn more about different SharePoint topics
![Page 38: Build killer visuals to interact with your content using Search and Display Template](https://reader031.fdocuments.in/reader031/viewer/2022030316/587258ac1a28ab31498b478b/html5/thumbnails/38.jpg)
�
�
@bniaulin
share-gate.com/blog
by Benjamin Niaulin, a SharePoint GEEKTHANK YOU!