Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Biwug presenation-spsbe33

1,137 views

Published on

  • Be the first to comment

  • Be the first to like this

Biwug presenation-spsbe33

  1. 1. Farewell XSL,Welcome DisplayTemplates#spsbe33Elio Struyf
  2. 2. #SPSBE33Thanks to ourSponsorsPlatinumGoldSilver
  3. 3. #SPSBE33About meElio StruyfSharePoint Consultant @ XylosBrander / Developereliostruyfhttp://estruyf.be/blog
  4. 4. #SPSBE33Agenda• The Past & Present• What are Display Templates?• Where are they used?• What to do before you can start• Creating Display Templates
  5. 5. The Past & Present
  6. 6. #SPSBE33The PastSP2007SP2010LibrariesCQWPShow the latest documents
  7. 7. #SPSBE33
  8. 8. #SPSBE33The PastSP2007SP2010CQWPShow the latest documents of various site collectionSite CollectionsSearch Core Results
  9. 9. The Present
  10. 10. #SPSBE33The PresentSP2013• CSWP / Search Results WP• No site collection limitation• HTML & JavaScript• Query Builder
  11. 11. #SPSBE33
  12. 12. #SPSBE33The PresentSP2013Show the latest documents of various site collectionSite CollectionsCrawlSearch CSWP
  13. 13. WelcomeDisplay Templates
  14. 14. #SPSBE33What areDisplayTemplates?• Defines the visual layout of yoursearch results• Written in HTML & JS• HTML File  JavaScript File• Client side rendering
  15. 15. #SPSBE33What it does• Retrieves managed metadata• Displays via HTML andJavaScriptFile extension Title + PathPathDocument summary
  16. 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. 17. #SPSBE33Where are they used?
  18. 18. Can I Start?
  19. 19. #SPSBE33What to dobefore youcan start1. Create content2. Crawl content3. Define managed properties / oruse the auto-created ones4. Crawl content again
  20. 20. #SPSBE33SupportedFields• All fields that can be indexed• Includes:http://bit.ly/ZXsxSUo Lookup fields (manual)o Choice fieldso Managed Metadata
  21. 21. Let the creation begin
  22. 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. 23. Control Display TemplateLet the fun begin
  24. 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. 25. Item Display templateDemo
  26. 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. 27. Event HandlingDemo
  28. 28. #SPSBE33EventHandling –RecapUse OnPostRender to ensure thatcontrol and item HTML content isloadedctx.OnPostRender = [];ctx.OnPostRender.push(function () {// Write here your JavaScript code});
  29. 29. #SPSBE33Debugging• Display templates showsproblems• Firefox Firebug / IE DeveloperTools4/29/2013 29
  30. 30. Q&AFeedback via Twitter: #SPSBE33
  31. 31. #SPSBE33THANK YOUElio StruyfElio.Struyf@Xylos.comeliostruyfhttp://estruyf.be/blog

×