image slider with sharepoint 2013 search results web part
DESCRIPTION
Don’t have access to the enterprise version of SharePoint 2013? Stuck on Office 365? Unable to use the Content Search Web Part? No Problem! Lets build an image slider webpart with the Search Results Web Part using the out of box functionality. A presentation by Yohan Belval and Edouard ShaarTRANSCRIPT
Image Slider with SharePoint 2013 Search Results Web Part
November 23rd, 2013
Thank you to all of our Sponsors!!
SPS OTTAWA
Yohan Belval
SharePoint specialist at GSoft (Montreal)http://www.gsoft.com/en/blogWeb site (http://gsoft.com)[email protected]@yohanbelval
| 3
WHO
ARE WE?
SharePoint Dynamite TeamFramework on GitHub
SPS OTTAWA
Edouard Shaar
SharePoint specialist at GSoft (Montreal)http://www.gsoft.com/en/blogWeb site (http://gsoft.com)[email protected]
| 4
WHO
ARE WE?
SharePoint Dynamite TeamFramework on GitHub
SPS OTTAWA
Don’t have access to the enterprise version of SharePoint 2013? Stuck on Office 365*? Unable to use the Content Search Web Part? No Problem! Let’s build an image slider with the Search Results Web Part using the out of box functionality.
Based on blog posts by Yohan BelvalSharePoint 2013SharePoint 2010
*Note: Content Search Web Part is now available in Office 365 E3 and E4 enterprise plans.
| 5
SESSION
ABSTRACT
SPS OTTAWA
IntroductionSearch Results Web Part vs. Content Search Web PartConfiguring your image source and returning resultsUsing display templates
What’s a display templateDifferent typesExample
Putting together the sliderUsing a slider pluginDemo: Building the display templatesDemo: Configuring the Search Results Web Part
Conclusion
| 6
SESSION
OUTLINE
SPS OTTAWA
INTRODUCTION
| 7
SPS OTTAWA
A slider component is a common requirement for web sitesEnterprise only solution offered by OOTB SharePointNot available in all of the Office 365 plansNot willing to spend much effort into a custom developed Web Part
| 8
PROBLEMS…
SPS OTTAWA
Content Query Web PartXSLT
Search core results Web PartMore XSLT
Code
| 9
WHAT ABOUT SHAREPOINT 2010?
SPS OTTAWA | 10
NO MORE XSLT PLEASE…
- <xsl:if test="string-length($SafeImageUrl) = 0 and string-length($SafeImageHtml) != 0"> - <div class="image-area-right"> <xsl:value-of disable-output-escaping="yes" select="$SafeImageHtml" /> </div> </xsl:if> - <xsl:if test="string-length($SafeImageUrl) != 0"> - <div class="image-area-right"> - <a href="{$SafeLinkUrl}" target="{$LinkTarget}">
SPS OTTAWA
Display templates (knowledge of HTML rather that XSLT, etc.)Use the search engineNo need to open up Visual StudiosSolution available for use in all versions of SharePoint 2013
| 11
THANK YOU SHAREPOINT 2013!
SEARCH RESULTS WEB PART VS. CONTENT SEARCH WEB PART
SPS OTTAWA | 12
SPS OTTAWA
Different slideshow stylesNo need to configure a display template
| 13
CONTENT SEARCH WEB PART:Built-in display templates
SPS OTTAWA | 14
CONTENT SEARCH WEB PART:Built-in slider
SPS OTTAWA
Remember the CQWP slots in SharePoint 2010?Replaces the field names with variables – allows you to easily redefine what data to showYou can add multiple properties
| 15
CONTENT SEARCH WEB PART:Property mappings
SPS OTTAWA
Specify the number of items to show in the resultsOdd behavior
| 16
CONTENT SEARCH WEB PART:Honorable mention… “number of items”
SPS OTTAWA
If you have access to it and it meets your requirements, why notIf not, the Search Results Web Part is a worthy alternativeMost of the functionalities in the CSWP are found in the SRWPIf you think the built-in slideshow is ugly, you still have to create your own display template
| 17
SO, IS THE CONTENT SEARCH WEB PART WORTH IT?
SPS OTTAWA
CONFIGURING YOUR IMAGE SOURCE
| 18
SPS OTTAWA
Preconfigured content typesThumbnail view
| 19
USE A PICTURE / ASSET LIBRARY
SPS OTTAWA | 20
CRAWL THE CONTENT…
SPS OTTAWA
DEMO: CONFIGURE YOUR SEARCH RESULTS WEB PART
| 21
SPS OTTAWA
DISPLAY TEMPLATES
| 22
SPS OTTAWA
No more XSLT; replaced with HTML and JavaScriptUses managed properties to show informationStored in “~sitecollection/_catalogs/masterpage/Display Templates”
| 23
WHAT’S A DISPLAY TEMPLATE?
SPS OTTAWA
ControlSimilar to ContentQueryMain.xsl for the Content Query Web PartActs as a container for the itemsCalls Render Items
| 24
TYPES OF DISPLAY TEMPLATES:Control Template
SPS OTTAWA | 25
OVERVIEW
SPS OTTAWA
ItemSimilar to the itemstyle.xslRenders a single itemContains the Managed Metadata property bindings
| 26
TYPES OF DISPLAY TEMPLATES:Item Template
SPS OTTAWA | 27
OVERVIEW
SPS OTTAWA
GroupUsed for result blocks like Promoted results (Best Bets)Difficult to configure.On one available OOB
FilterUsed in the refinements web partExample: Range Slider
| 28
TYPES OF DISPLAY TEMPLATES:Group and Filter Templates
SPS OTTAWA | 29
OVERVIEW
SPS OTTAWA | 30
EXAMPLE OF AN ITEM TEMPLATE
SPS OTTAWA
PUTTING TOGETHER THE SLIDER
| 31
SPS OTTAWA
Leverage existing plugin instead of coding your ownFreedom to select the plugin that best suites your needsIntegrate the plugin structure into your Display Templates
HTML, JavaScript, and JavaScript framework (JQuery)
We chose SlidesJS (http://slidesjs.com/)Previous experienceKnowledge of JQueryReliable – Author keeps it up to date
| 32
USING A SLIDER PLUGIN
SPS OTTAWA
DEMO: BUILDING THE DISPLAY TEMPLATES
| 33
SPS OTTAWA
DEMO: CONFIGURING THE SEARCH RESULTS WEB PART
| 34
SPS OTTAWA
CONCLUSION
| 35
SPS OTTAWA
Use the Search Results Web Part when:You don’t have access to SharePoint 2013 EnterpriseThe OOTB slider packaged with the Content Search Web Part just doesn’t cut it
No more XSLTSome HTML and JavaScript knowledge needed
| 36
WHAT TO REMEMBER
Join us for SharePint today!
Date & Time: Nov 23rd, 2013 @6:00 pmLocation: The Observatory Pub,
Algonquin Student’s Association
Address: A-170 on Algonquin CampusParking: No need to move your car!*
Site: http://www.algonquinsa.com/ob.aspx
*Please drive responsibly! We are happy to call you a cab
Remember to fill out your evaluation forms to win some great prizes!
&