Transcript Using jQuery and Display Templates to create modern Web Sites

Using jQuery and Display Templates to
create modern Web Sites
• Display Templates let you use skills and tools you
already know
• … so Pairing CSS / jQuery with Display Templates is easy
• Adding refiners allows for easy end user control of a
search driven experience
SharePoint
HTML
Upload
Comps
CSS
Auto
Convert
Add controls
Dreamweaver / etc.
Snippet
Gallery
Web part
Specifies the query and templates to use
Triggers templates when search results are available
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
rendering
To load custom JavaScript…
Web part
$includeScript(this.url,
"~sitecollection/_catalogs/masterpage/Display
Templates/Finished/Control_jShowOff_Script.js");
Item Template
Write code inside the first <div>
OnPostRender will fire after both Control
and Item templates are done rendering
Load jQuery in your master page
Control Template (Begins)
Control Template (Ends)
Display templates specify
inputs for data
Inputs are filled in with search managed properties
specified by:
<mso:ManagedPropertyMapping msdt:dt="string">
'Link URL'{Link URL}:'Path'
</mso:ManagedPropertyMapping>
To load custom CSS…
Web part
$includeCSS(this.url,
"~sitecollection/_catalogs/masterpage/Display
Templates/Finished/Item_SlidingDetails_Styles.css");
Item Template
Control Template (Begins)
Control Template (Ends)
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
You can use any (Control, Item) Template combination
However, you may want to think about your designs
as tightly-coupled
Use OnPostRender to initialize
information that is not dependent on
individual result data
Web part
Control Template (Begins)
Item Template
Control Template (Ends)
Save data for your event handlers using
JavaScript
Inputs are all treated as strings so validate
data before using it
This 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 Provider
• You can manipulate search query context via
JavaScript, creating dynamic experiences.
JavaScript Object
Description
Example use case
Ctx.ListData
Query result data
Passing JSON into custom jQuery plug-in
ctx.CurrentItem
Current item being rendered
Passing JSON into custom jQuery plug-in
ctx.ClientControl Methods for interacting with
presentation of results
Paging, sorting, infinite scrolling
How it works:
• Query results rendered into a
“hidden” UL
• Event handler is registered for scroll
detection.
Web part
Control Template (Begins)
Item Template
Control Template (Ends)
How refiners work:
To make a property show up in a refiner…
Refiners are just display templates!
Refinement data is only returned for values that are
present in the result set
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
SharePoint blog
http://sharepoint.microsoft.com/blog
MySPC
http://myspc.sharepointconference.com