Introduction to Content Search Web Part
Download as PPTX, PDF2 likes1,109 views
The document provides an overview of the Content Search Web Part introduced in SharePoint, detailing its evolution from the Content Query Web Part in SharePoint 2007 to more advanced features in SharePoint 2013. It highlights key functionalities such as no coding requirement, customizable display templates, and cross-site collection queries. Additionally, the document outlines how to create and modify display templates using SharePoint Designer, emphasizing their flexibility for presenting dynamic content.
Introduction to Content Search Web Part
- 1. Introduction to Content Search Web Part Haaron Gonzalez Lead Solution Architect Hershey Technologies
- 2. Show dynamic content Content Query Web Part Introduced in MOSS 2007 as part of the ECM functionality Aggregates and displays list items within a site hierarchy Features Provide caching and query optimizations No coding Cross Web query Security trimming Customizable Include style templates for display the data Enhance in SharePoint 2010 with more features like: Filtering support Query String Metadata Property Mapping • XSLT • CSS • HTML • JQuery http://msdn.microsoft.com/en-us/library/ff650512.
- 3. Site Collection A Content Query Web Part Site Collection B Site Collection C Site Collection
- 4. Show dynamic content Content Search Web Part Introduced in SharePoint 2013 Enterprise Leverages search infrastructure to present information Already available in Office 365 Features No coding Cross Web and Site Collection query Security trimming Customizable Include Display Template for display the results (easy to use) Property Mapping • HTML • JavaScript • JQuery • Build in functions
- 5. Site Collection A SearchSearch Crawl Content Search Web Part Site Collection B Site Collection C Site Collection D
- 6. Content Search 30,000 ft. view
- 7. Query Builder: Connecting you to results Create queries Preview Results Full screen query builder to create/test queries Fully integrated with result sources and query rules Query variables are substituted at query time
- 8. Content Search in Action Query Builder
- 10. What a display template does Displays them using HTML and JavaScript instead of XSL Retrieves managed properties File Extension Title Preview Image Document Summary Path
- 11. Layers for display templates Control Item Also: Filter, Group and Hover Panel
- 12. Display Templates available Display Templates List List with Paging Slideshow Item Templates Large Picture Picture on left 3 lines on right Picture on top 3 lines on bottom To lines Video
- 13. Using OOO Display Templates Review the available display templates
- 14. Create your own Display Template Use SharePoint Designer 2013 Publishing Feature needs to be activated Copy and paste a display template “.html”; Change the title Edit existing HTML or create new from scratch Use functions to load Scripts, CSS, etc. $includeScript(this.url, "~sitecollection/_catalogs/masterpage/Display Templates/Finished/Control_jShowOff_Script.js"); $includeCSS(this.url, "~sitecollection/_catalogs/masterpage/Display Templates/Finished/Item_SlidingDetails_Styles.css"); <mso:ManagedPropertyMapping msdt:dt="string">'Link URL'{Link URL}:'Path'</mso:ManagedPropertyMapping> var pictureMarkup = Srch.ContentBySearch.getPictureMarkup(pictureURL, 135, 135, ctx.CurrentItem, "cbs-sliding-details-thumbnail", line1, pictureId);
- 15. Customizing Display Templates Change the size of a slideshow
- 16. Create your own Item Display Template Use SharePoint Designer 2013 Publishing Feature needs to be activated Copy and paste a item display template Change the title Edit existing HTML or create new from scratch Use functions to load Scripts, CSS, etc. $includeScript(this.url, "~sitecollection/_catalogs/masterpage/Display Templates/Finished/Control_jShowOff_Script.js"); $includeCSS(this.url, "~sitecollection/_catalogs/masterpage/Display Templates/Finished/Item_SlidingDetails_Styles.css"); <mso:ManagedPropertyMapping msdt:dt="string">'Link URL'{Link URL}:'Path'</mso:ManagedPropertyMapping> var pictureMarkup = Srch.ContentBySearch.getPictureMarkup(pictureURL, 135, 135, ctx.CurrentItem, "cbs-sliding-details-thumbnail", line1, pictureId);
- 17. Customizing Item Display Templates Add the modified date to two lines item view
- 18. Questions
- 19. Content Search Web Part Haaron Gonzalez Lead Solution Architect Hershey Technologies
Editor's Notes
- #17: Change the title <title>PEIWC Slideshow</title> Locate cbs-SlideShow and change the style <div class="cbs-Slideshow" id="_#= encodedId =#_" data-displaytemplate="ControlSlideshow" style="max-height:400px; display:inline-block;position:relative;background-color:#000000;color:#FFFFFF; width:800px !important;">
- #19: Change the title <title>My Pre Demo Display</title>Add the mapping <mso:ManagedPropertyMappingmsdt:dt="string">'ModifiedDate':'LastModifiedTime;Created',&#39;Link URL&#39;{Link URL}:&#39;Path&#39;,&#39;Line 1&#39;{Line 1}:&#39;Title&#39;,&#39;Line 2&#39;{Line 2}:&#39;&#39;,&#39;FileExtension&#39;,&#39;SecondaryFileExtension&#39;</mso:ManagedPropertyMapping>Add javascrpit code varmodifieddate = $getItemValue(ctx,"ModifiedDate");Add HTML code<div class="cbs-Line2 ms-noWrap">_#= modifieddate =#_ </div>Add more javascriptif(new Date(modifieddate) > new Date(“11/1/2012”)) { modifieddate = “<b>NEW! </b>” + modifieddate;