Download Eric Overfield - SearchDrivenContentinSharePoint2013

Integrating Search Driven
Content in SharePoint 2013
Eric Overfield
SharePoint Advocate and Enthusiast
PixelMill
Introduction – Eric Overfield
 Founder and SharePoint Branding/UI Lead, PixelMill
 Speaker, Teacher, Advocate
 Author, SharePoint Community Organizer
 Located in Davis, CA
Co-author: “Pro SharePoint 2013 Branding and Responsive
Web Development” (Apress – June 12th, 2013)
Order Your Copy
http://pxml.ly/zsqykd
Co-author: “Black Magic Solutions for
White Hat SharePoint” (August, 2013)
ericoverfield.com
@EricOverfield
What You Will Learn
 Aggregate Content Across Sites
cross-site publishing feature
 Create Content Rollup Solutions
custom display templates
 Customize Individual Search Results
result types
 Fine-tune Search Queries
query rules
@EricOverfield - pixelmill.com
Aggregate Content
Across Site(s)
@EricOverfield - pixelmill.com
The Old Way
Site Collection A
Site Collection A
Search
Crawl
Search
Content Query
Web Part (CBQ)
Site Collection B
Site Collection B
Search
Crawl
Search
Content Query
Web Part (CBQ)
@EricOverfield - pixelmill.com
The SharePoint 2013 Way
Site Collection A
Site Collection D
Site Collection B
Search
Crawl
Site Collection C
Search
Content Search
Web Part
@EricOverfield - pixelmill.com
Demo Solution: What We Want to Build…
Scenario:
Show dynamic content
Show potential buyers
a rollup of all the
available Specter Group
properties for sale
@EricOverfield - pixelmill.com
Solution
@EricOverfield - pixelmill.com
Hold On… Important Prerequisites
 Enterprise License Required
For Catalog creation and CBS
 Depends on Search Indexer
 Source site collection feature,
Cross-Site Collection Publishing must be activated
 On-prem only – No O365 support yet
@EricOverfield - pixelmill.com
And Limitations
 Consuming site requires restricted read access on authoring site
 Because results can be security trimmed
 Cross site publishing only supports pages and lists
 Content assets (videos, images, etc.) need to be on assets site
 Use Suggested Content Browser Location
 Results based on search index freshness
@EricOverfield - pixelmill.com
What About Content Deployment?
 Very different approach
 Must be across content databases
 Not based on search
 May be used for similar reasons,
but apples to oranges comparison
@EricOverfield - pixelmill.com
My
Content
Push
Let’s
See
Notifications
a Comparison
 Store it anywhere, across site collections,
web applications or farms
@EricOverfield - pixelmill.com
Create a catalog
@EricOverfield - pixelmill.com
Managed Properties
 Required to surface/retrieve new content columns
 Configured in Central Admin or Site Collection
 Search Schema
 Content has to have been crawled
 Another full crawl after a new managed property
@EricOverfield - pixelmill.com
Creating
Managed
Properties
Push See
Let’s
Notifications
a Comparison
@EricOverfield - pixelmill.com
Getting
Content
from a Catalog
Push See
Let’s
Notifications
a Comparison
@EricOverfield - pixelmill.com
Aggregate
Content
Review
Push See
Let’s
Notifications
a Comparison
Prerequisites have been addressed (licenses and features)
We have source content -> catalog, stored anywhere (almost)
Content has been crawled
Managed properties have been created
Content has been crawled - again
Consuming site has been connected to catalog
Ready to display!
@EricOverfield - pixelmill.com
Content Rollup with the
Content Search Web Part
@EricOverfield - pixelmill.com
The Content Search Web Part (CBS)
@EricOverfield - pixelmill.com
Get
Dynamic
with Query Builder
Push
Let’s
See
Notifications
aContent
Comparison
@EricOverfield - pixelmill.com
Show
Content with Display Templates
PushDynamic
Let’s
See
Notifications
a Comparison
@EricOverfield - pixelmill.com
Customize Your
Display Templates!
@EricOverfield - pixelmill.com
What
a Display Template?
PushMakes
Let’s
See
Notifications
aupComparison
 Control template
 Item Template
 HTML and JS
 No more XSLT!
 Retrieves Managed Properties
@EricOverfield - pixelmill.com
Custom
Display
Templates
Push See
Let’s
Notifications
a Comparison
 Add to Master
Page Gallery
 Copy from an
existing display template
 Use any editor
@EricOverfield - pixelmill.com
Implementing Custom Display Templates
 Must specify all managed properties to surface
 May externalize CSS and JS that template needs
 Inline JS must appear after the first <div>
 Add HTML markup to render results
@EricOverfield - pixelmill.com
ALet’s
Look See
at
thea Code:
Item Template
Push
Notifications
Comparison
Obtain Managed Properties
<mso:ManagedPropertyMapping msdt:dt="string">
'LastModifiedTime':'LastModifiedTime',
'Specter Property Type'{Specter Property Type}:'SpecterPropertyType',
'Picture URL'{Picture URL}:'PublishingImage;PictureURL;PictureThumbnailURL',
'Link URL'{Link URL}:'Path',
'Line 1'{Line 1}:'Title',
'Line 2'{Line 2}:'Description',
'SecondaryFileExtension',
'ContentTypeId'
</mso:ManagedPropertyMapping>
@EricOverfield - pixelmill.com
ALet’s
Look See
at
thea Code:
Item Template
Push
Notifications
Comparison
Load Managed Properties into
JavaScript Variables
var specterPropertyType = $getItemValue(ctx, "SpecterPropertyType");
var lastModifiedTime = $getItemValue(ctx, "LastModifiedTime");
@EricOverfield - pixelmill.com
ALet’s
Look See
at
thea Code:
Item Template
Push
Notifications
Comparison
Display JavaScript Variables with
HTML Markup
<span class="_#= specterPropertyType=#_">
<a href="_#= linkURL =#_" class="thumb">
_#= pictureMarkup =#_
<div class="date">
<div class="d">_#= date=#_</div>
<div class="m">_#= month=#_</div>
</div>
</a>
<div class="caption">Property Type: _#=
specterPropertyType=#_</div>
</span>
@EricOverfield - pixelmill.com
Display Components and Their Mappings
Component
Type
File
Style for the
entire result set
block and for
each search
result item
CSS
style.css
Structure for
HTML tag:
the entire block
<ul>
of results
Display content
for each result
item
Pre-process
data for each
result item
HTML tag:
<li>
JavaScript
Control_List_Specter
Item_LargePicture_Specter
Inline JavaScript in
Item_LargePicture_Specter
SharePoint Artifacts
CSS file in the Master Page Gallery:
/Spectergroup/css/style.css
Custom Control display template in
the Master Page Gallery:
/Display Templates/Content Web
Part/Control_List_Specter.html
Custom Item display template in the
Master Page Gallery:
/Display Templates/Content Web
Part/Item_LargePicture_Specter.html
Custom Item display template in the
Master Page Gallery:
/Display Templates/Content Web
Part/Item_LargePicture_Specter.html
@EricOverfield - pixelmill.com
Display
Templates
Review
Push See
Let’s
Notifications
a Comparison
Copy an existing display template
Add managed properties to top of display template
Customize with HTML, JavaScript and CSS
@EricOverfield - pixelmill.com
That is SharePoint 2013
Content
Rollup
OK?
in a Nutshell
@EricOverfield - pixelmill.com
Fine Tune Search Results
and Content Rollups
@EricOverfield - pixelmill.com
Target Individual
Result Items!
@EricOverfield - pixelmill.com
Quick
PushTest
Let’s
See
Notifications
a Comparison
 Wait, what, a Test?
 Find the PDF
 Find Joanna’s Project
@EricOverfield - pixelmill.com
The Problem
 Results all look the same
 But all documents/results are not the same
 Forces us to search our results
@EricOverfield - pixelmill.com
Demo Solution: What We Want to Build…
Scenario:
Customize Search Experience
When user searches for “floor plans”

Customize floor plans result type
as best bets

Promote beachfront properties
in the summer
Result Types
Tailor the look of important types of results
One of these things… is not like the other.
@EricOverfield - pixelmill.com
Result Types
 Conditions match result properties
 Identify a “type” of result
 Display Templates can change the look
 Of a “type” of result
@EricOverfield - pixelmill.com
Your Own Result Type
@EricOverfield - pixelmill.com
And Thus Styled
@EricOverfield - pixelmill.com
Query Rules
 Custom results based on intent
 May be created at various levels
Search Service App or Site Collection and inherited
 May be deactivate at child levels
@EricOverfield - pixelmill.com
Create a Query Rule
 Condition: Set of conditions to match to fire rule

One or more conditions per rule

Six types of conditions available
 Action: What to do when rule fired

One or more actions per rule

Six types of actions available
 Publishing: When should a rule be active

i.e. only during a certain time span
@EricOverfield - pixelmill.com
Your Own Query Rule
Add a Summer Promotion for Beachfront Properties
@EricOverfield - pixelmill.com
@EricOverfield - pixelmill.com
@EricOverfield - pixelmill.com
And Thus Promoted
@EricOverfield - pixelmill.com
Result
Query Rules Review
PushTypes
Let’s
See
Notifications
aand
Comparison
Result Types Match Conditions to Item Display Templates
Query Rules Match Conditions with Actions
@EricOverfield - pixelmill.com
What You Did Learn
 Aggregate Content Across Sites
cross-site publishing feature
 Create Content Rollup Solutions
custom display templates
 Customize Individual Search Results
result types
 Fine-tune Search Queries
query rules
@EricOverfield - pixelmill.com
Resources
Configure cross-site publishing in SharePoint 2013:
http://technet.microsoft.com/en-us/library/jj656774.aspx
Connect a publishing site to a catalog:
http://technet.microsoft.com/en-us/library/jj679901.aspx
Administer search in SharePoint Server 2013:
http://technet.microsoft.com/en-us/library/ee792877.aspx
Display template reference in SharePoint Server 2013:
http://technet.microsoft.com/en-us/library/jj944947.aspx
Understanding the display template structure:
http://msdn.microsoft.com/en-us/library/jj945138.aspx#bk_DTstructure
Make a query rule inactive:
http://technet.microsoft.com/en-us/library/jj871014.aspx#BKMK_MakeInactive
Customize search result types:
http://technet.microsoft.com/en-us/library/dn135239.aspx
Create query rules:
http://technet.microsoft.com/en-us/library/jj871014.aspx
@EricOverfield - pixelmill.com
Integrating Search Driven
Content in SharePoint 2013
Thank You
Eric Overfield
@EricOverfield
ericoverfield.com
eoverfield@pixelmill.com