Date post: | 17-Jan-2016 |
Category: |
Documents |
Upload: | marybeth-ray |
View: | 213 times |
Download: | 0 times |
Using jQuery and Display Templates to create modern Web Sites Ethan Gur-esh Jeremy KelleyLead Program Manager Program Manager
SPC246
• 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
What we’re going to learn…
Designing your web site in SharePoint 2013
Auto Convert
SnippetGallery
SharePoint
Dreamweaver / etc.
• Ribbon
• Placeholder Main
• Minimal Master
• Navigation
• Web parts
• Controls
Comps
CSS
HTMLAdd
controlsUpload
Contoso Electronics
Ethan Gur-esh
Web partSpecifies the query and templates to useTriggers templates when search results are available
Logical Model of Display Templates
Control Template (Begins)Determines how to lay the items out on the pageRendered once per web part on the pageItem TemplateDetermines how each item should lookRendered sequentially, once per search result item
Control Template (Ends)After all items rendered, control template finishes rendering
Hello (Cool) World
Jeremy Kelley
Hello (Cool) World - RecapTo 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 rendering
Load jQuery in your master page
Web partControl Template (Begins)Item TemplateControl Template (Ends)
Lines of custom code: 4
Getting data into CS display templatesDisplay templates specify inputs for data 1 2
34
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-part
Sliding Details
Jeremy Kelley
Sliding Details - Recap
GetPictureMarkup returns an image rendition based on dimensionsvar 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 partControl Template (Begins)Item TemplateControl Template (Ends)
40
Tying item and control templates togetherYou can use any (Control, Item) Template combination
However, you may want to think about your designs as tightly-coupled
Preview Pane
Jeremy Kelley
Preview Pane - RecapUse 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 partControl Template (Begins)Item TemplateControl Template (Ends)
Lines of custom code: 50
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 Provider
• 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.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
Infinite Scrolling
Ethan Gur-esh
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 DemoWeb partControl Template (Begins)Item TemplateControl Template (Ends)
Lines of custom code: 18
Refiners
Allowing users some control: RefinersHow 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…1. It must be marked as a “refinable” search managed property2. Add the refinement panel web part to your page or layout3. Configure the web part to use a specific property OR configure “faceted navigation” to
pre-set refiners
Refining by Color
Jeremy Kelley
Refining by Color - RecapRefiners are just display templates!
Refinement data is only returned for values that are present in the result set
Related WCM Sessions @ SPCMon 2:00pm - SPC255 - What's New for WCM and Internet Sites in SharePoint 2013Speakers: Sven Arne Gylterud, Daniel Kogan
Tue 9:00am - SPC080 - Demo Extravaganza: Internet sites with SharePoint 2013Speaker: Fredrik Holm
Tue 10:30am - SPC019 - Best Practices for Designing Websites with SharePoint 2013Speakers: 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 PublishingSpeakers: Andrew Connell, Daniel Kogan
Thu 9:00am - SPC190 - Overview of Website Architecture in SharePoint 2013 Speaker: Ethan Gur-esh
WCM HOLs and events @ SPCHOL038 – Intro to Web Content Management in SharePoint 2013HOL040 – 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 Lounge
Further resourcesSharePoint bloghttp://sharepoint.microsoft.com/blog
Evaluate this session now on MySPC using your laptop or mobile device: http://myspc.sharepointconference.com
MySPC
© 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.