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.