Transcript DEMO - diwug

Customizing the SharePoint 2013 UI with
JavaScript
About me
www.sharepointnutsandbolts.com
@ChrisO_Brien
http://uk.linkedin.com/in/
chrisobrienmvp
Long Ago…
…Today
Terminology
•
•
•
Lists
Fields
Web parts etc..
JSLink
Client-Side
Rendering (CSR)
Display
• Content Search web
Templates
•
•
part
Search hover panel
List callouts
JSLink
CSR/JSLink – template scope
Registering templates/running code
Using JSLink with SharePoint lists
Advanced CSR possibilities
Customizing the Content
Search web part
Content Query vs. Content Search
Content Query web
part
Latency
Scope
Current site collection
Depends on crawl
frequency/speed
Entire farm/tenancy
Styling
XSLT
JavaScript
Bonuses
100% up-to-date
Content Search web part
Parameterisation
Support for slideshow, paging
CSWP - 5 ‘easy’ requirements
The role of Managed Properties
CSWP and Display Templates
These items are files in
~sitecollection/_catalogs/master
page/Display Templates/
Content Web Parts
Diagnostic item template
Customizing the CSWP
Dynamic values in query
Several tokens available:
{User}
{Page}
{Site}
• Match profile field
e.g. User.Department
• Match field value e.g.
Page.MyField
• Match current site
e.g. Site.Url
{Today}
{Term}
• Date filtering e.g.
Today-7
• Match current
managed nav term
Search hover panel
SP2013 search recap
Result Source • Search scope on steroids
Query Rule
• Best Bet on steroids
Result Type
• E.g. Word doc, person, social post
etc.
Display
Template
• Visual rendering of an item
Hover Panel components
Hover Panel components
- Item_CommonHoverPanel_Body.js
- Item_[FileType]_HoverPanel.js
Hover Panel actions
- Item_CommonHoverPanel_Actions.js
- Item_[FileType]_HoverPanel.js
Customizing the search hover panel
Hover panel – lessons learnt
Summary
THANK YOU
CSWP/search Query Builder
Script/CSS in display templates
CSWP options
“Unique
instance”
• Configure
query in web
part
properties
“Reusable
result set”
• Use Result
Source (OOTB
or custom)
Search display templates
Alternative - use
search results
WP properties to
map to Display
Template
THANK YOU