1.
Farewell XSL,Welcome DisplayTemplates#spsbe33Elio Struyf

2.
#SPSBE33Thanks to ourSponsorsPlatinumGoldSilver

3.
#SPSBE33About meElio StruyfSharePoint Consultant @ XylosBrander / Developereliostruyfhttp://estruyf.be/blog

4.
#SPSBE33Agenda• The Past & Present• What are Display Templates?• Where are they used?• What to do before you can start• Creating Display Templates

5.
The Past & Present

6.
#SPSBE33The PastSP2007SP2010LibrariesCQWPShow the latest documents

7.
#SPSBE33

8.
#SPSBE33The PastSP2007SP2010CQWPShow the latest documents of various site collectionSite CollectionsSearch Core Results

9.
The Present

10.
#SPSBE33The PresentSP2013• CSWP / Search Results WP• No site collection limitation• HTML & JavaScript• Query Builder

11.
#SPSBE33

12.
#SPSBE33The PresentSP2013Show the latest documents of various site collectionSite CollectionsCrawlSearch CSWP

13.
WelcomeDisplay Templates

14.
#SPSBE33What areDisplayTemplates?• Defines the visual layout of yoursearch results• Written in HTML & JS• HTML File  JavaScript File• Client side rendering

15.
#SPSBE33What it does• Retrieves managed metadata• Displays via HTML andJavaScriptFile extension Title + PathPathDocument summary

16.
#SPSBE33Control TemplateProvides the overall layout howyou want to present the results.Ex: list, list with paging, slideshow.Item TemplateDefines how the item itselfneeds to be rendered.Web PartSpecifies which query andtemplates will be used.Logical Structure – Content Search WP

17.
#SPSBE33Where are they used?

18.
Can I Start?

19.
#SPSBE33What to dobefore youcan start1. Create content2. Crawl content3. Define managed properties / oruse the auto-created ones4. Crawl content again

20.
#SPSBE33SupportedFields• All fields that can be indexed• Includes:http://bit.ly/ZXsxSUo Lookup fields (manual)o Choice fieldso Managed Metadata

21.
Let the creation begin

22.
#SPSBE33Creating adisplaytemplate• Map the master page gallery• /_catalogs/masterpage/DisplayTemplates/• Use one of the existing templates• Use an editor of your choice4/29/2013 22

23.
Control Display TemplateLet the fun begin

24.
#SPSBE33ControlTemplate –RecapLoad custom JavaScript filesLoad custom CSS filesWrite your HTML markup inside the first <div>$includeScript(this.url, "/_layouts/15/images/Nivo/jquery.nivo.slid");$includeCSS(this.url, "/_layouts/15/images/Nivo/Themes/Default/ss");$includeCSS(this.url, "/_layouts/15/images/Nivo/nivo-slider.css");

25.
Item Display templateDemo

26.
#SPSBE33ItemTemplate –RecapProperty Mapping:Get property valueUse the variable<mso:ManagedPropertyMapping msdt:dt="string">‘Property Name JS {Property Display Name}:Managed PropertyPicture URL{Picture URL}:PublishingImage</mso:ManagedPropertyMapping>var pictureURL = $getItemValue(ctx, Picture URL);_#= pictureURL =#_

27.
Event HandlingDemo

28.
#SPSBE33EventHandling –RecapUse OnPostRender to ensure thatcontrol and item HTML content isloadedctx.OnPostRender = [];ctx.OnPostRender.push(function () {// Write here your JavaScript code});

29.
#SPSBE33Debugging• Display templates showsproblems• Firefox Firebug / IE DeveloperTools4/29/2013 29

30.
Q&AFeedback via Twitter: #SPSBE33

31.
#SPSBE33THANK YOUElio StruyfElio.Struyf@Xylos.comeliostruyfhttp://estruyf.be/blog