jQuery and Display Templates to create modern Web Sites Ethan Guresh Jeremy Kelley Lead Program Manager Program Manager SPC246 Display Templates let you use skills and tools you already know ID: 383856
Download Presentation The PPT/PDF document "Using" is the property of its rightful owner. Permission is granted to download and print the materials on this web site for personal, non-commercial use only, and to display it on your personal computer provided you do not modify the materials and that you retain all copyright notices contained in the materials. By downloading content from our website, you accept the terms of this agreement.
Slide1Slide2
Using jQuery and Display Templates to create modern Web Sites
Ethan Gur-esh Jeremy KelleyLead Program Manager Program Manager
SPC246Slide3
Display Templates let you use skills and tools you already know… so Pairing CSS /
jQuery with Display Templates is easyAdding refiners allows for easy end user control of a search driven experience
What we’re going to learn…Slide4
Designing your web site in SharePoint 2013
Auto Convert
Snippet
Gallery
SharePoint
Dreamweaver / etc.
Ribbon
Placeholder Main
Minimal Master
Navigation
Web parts
Controls
Comps
CSS
HTML
Add controls
UploadSlide5
Contoso ElectronicsEthan Gur-eshSlide6
Web part
Specifies the query and templates to
use
Triggers
templates when search results are available
Logical Model of Display Templates
Control Template (Begins)
Determines how to lay the items out on the page
Rendered once per web part on the page
Item Template
Determines how each item should look
Rendered sequentially, once per search result item
Control Template (Ends)
After all items rendered, control template finishes renderingSlide7
Hello (Cool) WorldJeremy KelleySlide8
Hello
(Cool)
World - Recap
To
load custom
JavaScript…
$
includeScript
(this.url,
"~
sitecollection
/_catalogs/masterpage
/Display Templates/Finished/Control_jShowOff_Script.js");Write code inside the first <div>
OnPostRender will fire after both Control and Item templates are done renderingLoad jQuery in your master page
Web part
Control Template (Begins)
Item Template
Control Template (Ends)
Lines of custom code:
4Slide9
Getting data into CS display templates
Display templates specify inputs for data
1
2
3
4
Inputs are filled in with
search managed properties
specified by:
Defaults in the display template
<
mso:ManagedPropertyMapping
msdt:dt
="string">
'Link URL'{Link URL}:'Path
'
</
mso:ManagedPropertyMapping
>
Overrides by users per web-partSlide10
Sliding DetailsJeremy KelleySlide11
Sliding Details - Recap
GetPictureMarkup
returns an image rendition based on dimensions
var
pictureMarkup
=
Srch.ContentBySearch.getPictureMarkup
(
pictureURL
, 135, 135,
ctx.CurrentItem
, "
cbs-sliding-details-thumbnail", line1,
pictureId);Connect event handlers using OnPostRender
to ensure all HTML elements are created
To load custom CSS…
$
includeCSS
(this.url, "~
sitecollection
/_catalogs/
masterpage
/Display Templates/Finished/Item_SlidingDetails_Styles.css");
Web part
Control Template (Begins)
Item Template
Control Template (Ends)
40Slide12
Tying item and control templates together
You can use any (Control, Item) Template combination
However, you may want to think about your designs as tightly-coupledSlide13
Preview PaneJeremy KelleySlide14
Preview Pane - Recap
Use OnPostRender to initialize information that is not dependent on individual result data
Save
data
for
your event handlers using
JavaScript
Inputs are all treated as strings so validate data before using it
Web part
Control Template (Begins)
Item Template
Control Template (Ends)
Lines of custom code:
50Slide15
Search Data ProviderThis provider can
be shared between multiple web parts, or local to a single web part… so
you
can easily create inter-connected search
experiences
Search Data
ProviderSlide16
You can manipulate search query context
via JavaScript, creating dynamic experiences.
Interacting with Search Query Context
JavaScript Object
Description
Example use
case
Ctx.ListData
Query result data
Passing JSON into custom jQuery plug-in
ctx.CurrentItemCurrent item being rendered
Passing
JSON into custom jQuery plug-inctx.ClientControlMethods for interacting with presentation of resultsPaging, sorting,
infinite scrolling Slide17
Infinite ScrollingEthan Gur-eshSlide18
How it works:Query results rendered into a “hidden” UL
copied into a “visible” UL during OnPostRender.
Event handler is registered for scroll detection
.
Uses
ctx.ClientContext
to update query to get next ‘page’ of results
… which triggers OnPostRender again.
RECAP: Infinite Scrolling Demo
Web part
Control Template (Begins)
Item Template
Control Template (Ends)
Lines of custom code:
18
Slide19
RefinersSlide20
Allowing users some control: Refiners
How refiners work:They modify the search context
… so Content Search display templates “just work” with refiners.
To make a property show up in a refiner…
It must be marked as a “
refinable
” search managed property
Add the refinement panel web part to your page or layout
Configure the web part to use a specific property OR configure “faceted navigation” to pre-set refinersSlide21
Refining by ColorJeremy KelleySlide22
Refining by Color - Recap
Refiners are just display templates!Refinement data is
only returned for values that are present in the result
setSlide23
Related WCM Sessions @ SPC
Mon 2:00pm - SPC255 - What's New for WCM and Internet Sites in SharePoint 2013
Speakers:
Sven Arne Gylterud, Daniel Kogan
Tue 9:00am - SPC080 - Demo Extravaganza: Internet sites with SharePoint 2013
Speaker:
Fredrik Holm
Tue 10:30am - SPC019 - Best Practices for Designing Websites with SharePoint 2013
Speakers: Alyssa Levitz, Ethan
Gur-esh
Tue 1:45pm - SPC180 - Overview of Search Driven Web Sites and Cross Site Publishing in
Depth - Speaker:
Daniel Kogan
Tue 5:00pm - SPC270 - Zero to Live in 60mins using SharePoint 2013 Publishing
Speakers: Andrew Connell, Daniel Kogan
Thu 9:00am - SPC190 - Overview of Website Architecture in SharePoint 2013
Speaker: Ethan Gur-esh Slide24
WCM HOLs and events @ SPC
HOL038
–
Intro
to Web Content Management in SharePoint 2013
HOL040
–
Building
a Product Centric Site in SharePoint 2013HOL039
–
Designing a SharePoint 2013 SiteHOL041
– Hands
on with the Content Search web part in SharePoint 2013
Meet a Search SME
Ask questions, meet the community and share knowledge!
Mon-Thu @ Exhibit Hall
Hands on Labs
Daily 10:30am-6:30pm @ HOL Lab Lounge
Ask the Experts
Discuss WCM!
Wed 6:15PM @ Ask the Experts LoungeSlide25
Further resources
SharePoint bloghttp://sharepoint.microsoft.com/blogSlide26
Evaluate this session now on
MySPC
using your laptop or mobile device:
http://myspc.sharepointconference.com
MySPCSlide27
© 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.