Introduction to Content Search Web Part
-
Upload
haaron-gonzalez -
Category
Presentations & Public Speaking
-
view
336 -
download
3
description
Transcript of Introduction to Content Search Web Part
![Page 1: Introduction to Content Search Web Part](https://reader033.fdocuments.us/reader033/viewer/2022052822/554bebbcb4c9056b348b5013/html5/thumbnails/1.jpg)
Introduction toContent Search
Web PartHaaron Gonzalez
Lead Solution Architect
Hershey Technologies
![Page 2: Introduction to Content Search Web Part](https://reader033.fdocuments.us/reader033/viewer/2022052822/554bebbcb4c9056b348b5013/html5/thumbnails/2.jpg)
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.aspx
![Page 3: Introduction to Content Search Web Part](https://reader033.fdocuments.us/reader033/viewer/2022052822/554bebbcb4c9056b348b5013/html5/thumbnails/3.jpg)
Site Collection A
Content Query Web Part
Site Collection B
Site Collection C
Site Collection
List of articles/documents
![Page 4: Introduction to Content Search Web Part](https://reader033.fdocuments.us/reader033/viewer/2022052822/554bebbcb4c9056b348b5013/html5/thumbnails/4.jpg)
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
![Page 5: Introduction to Content Search Web Part](https://reader033.fdocuments.us/reader033/viewer/2022052822/554bebbcb4c9056b348b5013/html5/thumbnails/5.jpg)
Site Collection A
SearchSearch Crawl
Content Search Web
Part
Site Collection B
Site Collection C
Site Collection D
List of articles/documentsRecommendationsPopular items
![Page 6: Introduction to Content Search Web Part](https://reader033.fdocuments.us/reader033/viewer/2022052822/554bebbcb4c9056b348b5013/html5/thumbnails/6.jpg)
Content Search 30,000 ft. view
Get the results: Query Builder
Show the results: Display Templates
![Page 7: Introduction to Content Search Web Part](https://reader033.fdocuments.us/reader033/viewer/2022052822/554bebbcb4c9056b348b5013/html5/thumbnails/7.jpg)
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
![Page 8: Introduction to Content Search Web Part](https://reader033.fdocuments.us/reader033/viewer/2022052822/554bebbcb4c9056b348b5013/html5/thumbnails/8.jpg)
Content Search in ActionQuery Builder
![Page 9: Introduction to Content Search Web Part](https://reader033.fdocuments.us/reader033/viewer/2022052822/554bebbcb4c9056b348b5013/html5/thumbnails/9.jpg)
Hello, Display Templates
Craft the perfect look in HTML & JavaScript
![Page 10: Introduction to Content Search Web Part](https://reader033.fdocuments.us/reader033/viewer/2022052822/554bebbcb4c9056b348b5013/html5/thumbnails/10.jpg)
What a display template does
Displays them using HTML and JavaScript instead of XSL
Retrieves managed properties
File Extension Title Preview Image
Document SummaryPath
![Page 11: Introduction to Content Search Web Part](https://reader033.fdocuments.us/reader033/viewer/2022052822/554bebbcb4c9056b348b5013/html5/thumbnails/11.jpg)
Layers for display templates
Control Item
Also:Filter, Group and Hover Panel
![Page 12: Introduction to Content Search Web Part](https://reader033.fdocuments.us/reader033/viewer/2022052822/554bebbcb4c9056b348b5013/html5/thumbnails/12.jpg)
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
![Page 13: Introduction to Content Search Web Part](https://reader033.fdocuments.us/reader033/viewer/2022052822/554bebbcb4c9056b348b5013/html5/thumbnails/13.jpg)
Using OOO Display TemplatesReview the available display templates
![Page 14: Introduction to Content Search Web Part](https://reader033.fdocuments.us/reader033/viewer/2022052822/554bebbcb4c9056b348b5013/html5/thumbnails/14.jpg)
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);
![Page 15: Introduction to Content Search Web Part](https://reader033.fdocuments.us/reader033/viewer/2022052822/554bebbcb4c9056b348b5013/html5/thumbnails/15.jpg)
Customizing Display TemplatesChange the size of a slideshow
![Page 16: Introduction to Content Search Web Part](https://reader033.fdocuments.us/reader033/viewer/2022052822/554bebbcb4c9056b348b5013/html5/thumbnails/16.jpg)
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);
![Page 17: Introduction to Content Search Web Part](https://reader033.fdocuments.us/reader033/viewer/2022052822/554bebbcb4c9056b348b5013/html5/thumbnails/17.jpg)
Customizing Item Display TemplatesAdd the modified date to two lines item view
![Page 18: Introduction to Content Search Web Part](https://reader033.fdocuments.us/reader033/viewer/2022052822/554bebbcb4c9056b348b5013/html5/thumbnails/18.jpg)
Questions
![Page 19: Introduction to Content Search Web Part](https://reader033.fdocuments.us/reader033/viewer/2022052822/554bebbcb4c9056b348b5013/html5/thumbnails/19.jpg)
Content Search Web Part
Haaron Gonzalez
Lead Solution Architect
Hershey Technologies