Customizing the SharePoint
2013 UI with JavaScript
Chris O’Brien - MVP
• Independent Consultant
• Head of Development, Content and Code
• Blog: www.sharepointnutsandbolts.com
• Twitter: @ChrisO...
Long Ago…
SharePoint 2007
CAML
SharePoint 2010
XSL
…Today
SharePoint 2010
XSL
SharePoint 2013
CSR
• Content Search web
part
• Search hover panel
• List callouts
• Lists
• Fields
• Web parts etc..
Client-Side
Rendering (C...
JSLink
• Used to transform:
– Lists
– Views
– Fields
– Web Parts
– Content types
CSR/JSLink – template scope
• Use SPView.JSLink = ‘~site/foo/MyFile.js’, but also
need to register templates
• Register by...
Registering templates/running code
• The RenderContext JS object:
– Templates collection
• e.g. header, item, footer
• Reg...
DEMO:
USING JSLINK WITH SHAREPOINT LISTS
www.sharepointeurope.com
Advanced CSR possibilities
• Modify list data/schema in OnPreRender
– E.g. lookup something dynamically
• Use SPClientRend...
CUSTOMIZING THE CONTENT
SEARCH WEB PART
www.sharepointeurope.com
The role of Managed Properties
• CSWP has mappings to Managed Props for data:
CSWP and Display Templates
These items are files in
~sitecollection/_catalogs/masterpage/
Display Templates/
Content Web P...
Diagnostic item template
• Diagnostic template gives
raw (ish) output
• Further tools:
– Elio Struyf’s “Ultimate
Diagnosti...
DEMO:
CUSTOMIZING THE CSWP
www.sharepointeurope.com
Dynamic values in query
{User}
•Match profile field
e.g. User.Department
{Page}
•Match field value e.g.
Page.MyField
{Site...
Provisioning Display Templates
• Two options in publishing sites:
Provision JS file only Provision HTML file only. “Touch”...
SEARCH HOVER PANEL
www.sharepointeurope.com
SP2013 search recap
• Search scope on steroids
Result
Source
• Best Bet on steroidsQuery Rule
• E.g. Word doc, person,
soc...
Hover Panel components
Hover Panel components
- Item_CommonHoverPanel_Body.js
- Item_[FileType]_HoverPanel.js
Hover Panel actions
• Footer actions can also be
– Common
– Specific
• Gotcha! Some item types do not use Common
actions
–...
DEMO:
CUSTOMIZING THE SEARCH HOVER
PANEL
www.sharepointeurope.com
JS tips for display templates
• jQuery? Can’t use document.ready() – DOM is not populated
– Specify function in ctx.OnPost...
JS tips – useful code
• $includeScript (this.url, ~sitecollection/MyFile.js”)
• $includeCSS (this.url, ~sitecollection/MyF...
Summary
• JavaScript is key to many SP2013 UI elements
• Examples shown:
– Customizing entire list UI
– Conditional format...
Resources
Resource URL
Display template reference (MSDN) http://cob-sp.com/1hoQM6z
Display templates on GitHub (SPCSR) htt...
THANK YOU!
Questions?
www.sharepointnutsandbolts.com
@ChrisO_Brien
Upcoming SlideShare
Loading in …5
×

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

2,342 views
1,951 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
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,342
On SlideShare
0
From Embeds
0
Number of Embeds
98
Actions
Shares
0
Downloads
44
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

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

×