1. Customizing the SharePoint 2013 UI with JavaScript

3. About me

4. Long Ago…

5. …Today

6. Content Search web part Search hover panel List callouts Lists Fields Web parts etc.. Client-Side Rendering (CSR) JSLink Display Templates Terminology

7. JSLink

8. CSR/JSLink – template scope

9. Registering templates/running code

10. Using JSLink with SharePoint lists

11. Advanced CSR possibilities

12. Customizing the Content Search web part

13. Content Query vs. Content Search Content Query web part Content Search web part Latency Scope Styling Bonuses 100% up-to-dateDepends on crawl frequency/speed Current site collectionEntire farm/tenancy XSLTJavaScript Parameterisation Support for slideshow, paging

14. CSWP - 5 ‘easy’ requirements

15. The role of Managed Properties

16. CSWP and Display Templates These items are files in ~sitecollection/_catalogs/master page/Display Templates/ Content Web Parts

17. Diagnostic item template

18. Customizing the CSWP

19. Dynamic values in query {User} Match profile field e.g. User.Department {Page} Match field value e.g. Page.MyField {Site} Match current site e.g. Site.Url {Today} Date filtering e.g. Today-7 {Term} Match current managed nav term Several tokens available:

20. Search hover panel

21. SP2013 search recap Search scope on steroids Result Source Best Bet on steroids Query Rule E.g. Word doc, person, social post etc. Result Type Visual rendering of an item Display Template

22. Hover Panel components

23. - Item_CommonHoverPanel_Body.js - Item_[FileType]_HoverPanel.js

24. Hover Panel actions - Item_CommonHoverPanel_Actions.js - Item_[FileType]_HoverPanel.js

25. Customizing the search hover panel

26. Hover panel – lessons learnt

27. Summary

28. THANK YOU

30. CSWP/search Query Builder

31. Script/CSS in display templates

32. CSWP options “Unique instance” Configure query in web part properties “Reusable result set” Use Result Source (OOTB or custom)

33. Search display templates Alternative - use search results WP properties to map to Display Template

39. THANK YOU