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

Auto Convert Snippet Gallery Snippet Gallery SharePoint Dreamweaver / etc. Ribbon Placeholder Main Minimal Master Navigation Web parts Controls Comps CSS HTML Add controls Upload

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… $includeScript(this.url, "~sitecollection/_catalogs/masterpage/Display Templates/Finished/Control_jShowOff_Script.js"); Write code inside the first OnPostRender will fire after both Control and Item templates are done rendering Load jQuery in your master page Web part Control Template (Begins) Item Template Control Template (Ends)

Display templates specify inputs for data

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)

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 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)

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

JavaScript ObjectDescriptionExample use case Ctx.ListDataQuery result dataPassing JSON into custom jQuery plug-in ctx.CurrentItemCurrent item being renderedPassing JSON into custom jQuery plug-in ctx.ClientControlMethods for interacting with presentation of results Paging, sorting, infinite scrolling

Web part Control Template (Begins) Item Template Control Template (Ends)

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

MySPC