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.

Chris O'Brien - Customizing the SharePoint/Office 365 UI with JavaScript (ESPC14)

2,839 views

Published on

Covers several approaches for user interface customization in SP2013 - using JSLink to customize a list and/or view, creating custom Display Templates for the Content Search web part, and different approaches for customizing the search hover panel.

Additional information added for the European SharePoint Conference 2014

Published in: Internet, Technology, Business
  • Be the first to comment

Chris O'Brien - Customizing the SharePoint/Office 365 UI with JavaScript (ESPC14)

  1. 1. Customizing the SharePoint 2013 UI with JavaScript Chris O’Brien - MVP
  2. 2. • Independent Consultant • Head of Development, Content and Code • Blog: www.sharepointnutsandbolts.com • Twitter: @ChrisO_Brien • LinkedIn: http://uk.linkedin.com/in/ chrisobrienmvp About me
  3. 3. Long Ago… SharePoint 2007 CAML SharePoint 2010 XSL
  4. 4. …Today SharePoint 2010 XSL SharePoint 2013 CSR
  5. 5. • Content Search web part • Search hover panel • List callouts • Lists • Fields • Web parts etc.. Client-Side Rendering (CSR) JSLink Display Templates Terminology
  6. 6. JSLink • Used to transform: – Lists – Views – Fields – Web Parts – Content types
  7. 7. 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’)
  8. 8. Registering templates/running code • The RenderContext JS object: – Templates collection • e.g. header, item, footer • Register with BaseViewID, ListTemplateType, ControlMode – OnPreRender – OnPostRender – ListData – ListSchema
  9. 9. DEMO: USING JSLINK WITH SHAREPOINT LISTS www.sharepointeurope.com
  10. 10. 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
  11. 11. CUSTOMIZING THE CONTENT SEARCH WEB PART www.sharepointeurope.com
  12. 12. The role of Managed Properties • CSWP has mappings to Managed Props for data:
  13. 13. CSWP and Display Templates These items are files in ~sitecollection/_catalogs/masterpage/ Display Templates/ Content Web Parts
  14. 14. Diagnostic item template • Diagnostic template gives raw (ish) output • Further tools: – Elio Struyf’s “Ultimate Diagnostic template” – SharePoint 2013 Search Query Tool (Codeplex)
  15. 15. DEMO: CUSTOMIZING THE CSWP www.sharepointeurope.com
  16. 16. 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 {SiteCollection} •Match current site collection e.g. SiteCollection.Url {Today} •Date filtering e.g. Today-7 {Term} •Match current managed nav term Several tokens available:
  17. 17. Provisioning Display Templates • Two options in publishing sites: Provision JS file only Provision HTML file only. “Touch” it to generate JS file + No code required, just XML (Module tag) - Also need Feature receiver or remote code to “touch” HTML file (for event receiver to generate JS file) - Updates can be difficult (edit JS, or generate JS elsewhere) + Updates are easy (edit HTML) = Recommended for Office 365 = Recommended for on-premises
  18. 18. SEARCH HOVER PANEL www.sharepointeurope.com
  19. 19. SP2013 search recap • Search scope on steroids Result Source • Best Bet on steroidsQuery Rule • E.g. Word doc, person, social post etc. Result Type • Visual rendering of an itemDisplay Template
  20. 20. Hover Panel components
  21. 21. Hover Panel components - Item_CommonHoverPanel_Body.js - Item_[FileType]_HoverPanel.js
  22. 22. 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
  23. 23. DEMO: CUSTOMIZING THE SEARCH HOVER PANEL www.sharepointeurope.com
  24. 24. JS tips for display templates • jQuery? 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)
  25. 25. JS tips – useful code • $includeScript (this.url, ~sitecollection/MyFile.js”) • $includeCSS (this.url, ~sitecollection/MyFile.css”) Load external files • $getItemValue Get Managed Property passed to template • Srch.U.getIconUrlByFileExtension • Srch.U.getTrimmedString • Srch.ScriptApplicationManager.get_clientRuntimeContext Srch.U helper functions (Search.ClientControls.js) • displayTruncatedString() • renderThumbnail() • parseLookupValue() Generic helper functions (ClientTemplates.js)
  26. 26. 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!
  27. 27. Resources Resource URL Display template reference (MSDN) http://cob-sp.com/1hoQM6z Display templates on GitHub (SPCSR) https://github.com/spcsr Ultimate Diagnostic display template (Elio Struyf) http://cob-sp.com/Rdd3Ox SharePoint Search Query tool http://sp2013searchtool.codeplex.com Useful JS for display templates (Corey Roth) http://cob-sp.com/1kB351Y
  28. 28. THANK YOU! Questions? www.sharepointnutsandbolts.com @ChrisO_Brien

×