O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

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

2.928 visualizações

Publicada em

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

Publicada em: Internet, Tecnologia, Negócios
  • ♣♣ 10 Easy Ways to Improve Your Performance in Bed... ♥♥♥ http://ishbv.com/rockhardx/pdf
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui
  • ➤➤ 3 Reasons Why You Shouldn't take Pills for ED (important) ■■■ http://ishbv.com/rockhardx/pdf
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui

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