Download to read offline
Uploaded byHaaron Gonzalez
Introduction to Content Search Web Part
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.
More Related Content
Similar to Introduction to Content Search Web Part
More from Haaron Gonzalez
Introduction to Content Search Web Part
- 1. Introduction to Content Search WebPart 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 ContentQuery 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 ContentSearch Web Part Site Collection B Site Collection C Site Collection D
- 6. Content Search 30,000ft. view
- 7. Query Builder: Connectingyou 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 inAction Query Builder
- 10. What a displaytemplate 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 ControlItem 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 DisplayTemplates Review the available display templates
- 14. Create your ownDisplay 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 Changethe size of a slideshow
- 16. Create your ownItem 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 DisplayTemplates Add the modified date to two lines item view
- 18.
- 19. Content Search Web Part HaaronGonzalez 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;