Customizing the SharePoint 2013 UI with JavaScript

1. Chris O’Brien - MVP Customizing the SharePoint 2013 UI with JavaScript

3. About me • Independent Consultant • Head of Development, Content and Code (UK) • Blog: www.sharepointnutsandbolts.com • Twitter: @ChrisO_Brien • LinkedIn: http://uk.linkedin.com/in/chrisobrienmvp

4. Long Ago… SharePoint 2007 CAML SharePoint 2010 XSL

5. …Today SharePoint 2010 XSL SharePoint 2013 CSR

6. Terminology • Lists • Fields • Web parts etc.. • Content Search web part • Search hover panel • List callouts

7. JSLink • Used to transform: • Lists • Views • Fields • Web Parts • Content types

8. CSR/JSLink – template scope • Use SPView.JSLink = ‘~site/foo/MyFile.js’, but also need to register templates • Register by: • BaseViewID (e.g. 1) • ListTemplateType (e.g. 10001) • ControlMode (e.g. ‘Display’)

9. Registering templates/running code • The RenderContext JS object: • Templates collection • e.g. header, item, footer • Register with BaseViewID, ListTemplateType, ControlMode • OnPreRender • OnPostRender • ListData • ListSchema

10. Using JSLink with SharePoint lists

11. Advanced CSR possibilities • Modify list data/schema in OnPreRender • E.g. lookup something dynamically • Use SPClientRenderer.Render() to obtain HTML: • From arbitrary data • Outside of page context • In AJAX methods

12. Customizing the Content Search web part

13. Content Query vs. Content Search

14. CSWP - 5 ‘easy’ requirements • “More like this” (Items matching a tag) • Recently changed items • Most popular items • “(Recent) items you may be interested in” (Matching current user’s profile) • “Items related to you” (Contributor to document)

15. The role of Managed Properties • CSWP has mappings to Managed Props for data:

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

17. Diagnostic item template • Diagnostic template gives raw (ish) output • Tip: configure many props temporarily

18. Customizing the CSWP

19. Dynamic values in query • Several tokens available:

20. Search hover panel

21. SP2013 search recap

22. Hover Panel components

23. Hover Panel components - Item_CommonHoverPanel_Body.js - Item_[FileType]_HoverPanel.js

24. Hover Panel actions • Footer actions can also be • Common • Specific • Gotcha! Some item types do not use Common actions • E.g. Discussion - Item_CommonHoverPanel_Actions.js - Item_[FileType]_HoverPanel.js

25. Customizing the search hover panel

26. Hover panel – lessons learnt • Can’t use document.ready() – DOM is not populated • Specify function in ctx.OnPostRender instead • These functions are called ONCE (on first render [mouseover]) • N.B. Array of functions is accessible in all files e.g. header, body, actions etc. • DON’T delete _#= ctx.RenderBody(ctx) =#_ • This executes Item_CommonHoverPanel_Body.js (inheritance model)

27. Summary • JavaScript is key to many SP2013 UI elements • Examples shown: • Customizing entire list UI • Conditional formatting of a field • Rendering of Content Search web part • Customizing search hover panel (inc. AJAX) • Lots of other possibilities too!

30. CSWP/search Query Builder

31. Script/CSS in display templates • Tools: • $includeScript • $includeLanguageScript • $includeCSS • But consider HTTP payload – may be better combining with other CSS/JS

32. CSWP options

33. Search display templates • Create the Display Template • Copy/rename then edit 2 files: • Item_Something.js [HTML] • Item_Something_HoverPanel.js [HTML] • Create any core search config • E.g. Managed Properties, Result Source • Create the Result Type Alternative - use search results WP properties to map to Display Template