Customizing the SharePoint 2013 user interface with JavaScript - Chris OBrien

12,559 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.

Published in: Technology, Business
2 Comments
10 Likes
Statistics
Notes
No Downloads
Views
Total views
12,559
On SlideShare
0
From Embeds
0
Number of Embeds
465
Actions
Shares
0
Downloads
150
Comments
2
Likes
10
Embeds 0
No embeds

No notes for slide

Customizing the SharePoint 2013 user interface with JavaScript - Chris OBrien

  1. 1. Customising the SharePoint 2013 UI with JavaScript P&M306 Chris O‟Brien - MVP
  2. 2. About me  IndependentConsultant  Head of Development, Content and Code  Blog: www.sharepointnutsandbolts.com  Twitter: @ChrisO_Brien  LinkedIn: http://uk.linkedin.com/in/ chrisobrienmvp
  3. 3. Long Ago…SharePoint 2007CAMLSharePoint 2010XSL
  4. 4. …TodaySharePoint 2010XSLSharePoint 2013CSR
  5. 5. Terminology JSLink Client-Side Rendering (CSR) Display Templates
  6. 6. Terminology • Lists • Fields • Web parts etc.. JSLink Client- SideRendering (CSR) Display Templates • Content Search web part • Search hover panel • List callouts
  7. 7. JSLink Used to transform:  Lists  Views  Fields  Web Parts  Content types
  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. USING JSLINK TO FORMAT ALIST VIEW
  10. 10. Demo screenshot:A SharePoint listtransformed withJSLink (jQuery UIaccordion)
  11. 11. Demo screenshot:A SharePoint fieldtransformed withJSLink (simpleconditionalformatting)
  12. 12. 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
  13. 13. Customizing the Content Searchweb part
  14. 14. Content Query vs. Content Search Content Query web Content Search web part part Latency 100% up-to-date Depends on crawl frequency/speed Scope Current site collection Entire farm/tenancy Styling XSLT JavaScript Bonuses Parameterisation Support for slideshow, paging
  15. 15. CSWP - 5 „easy to nail‟ requirements1. “More like this” (Items matching a tag)2. Recently changed items3. Most popular items4. “(Recent) items you may be interested in” (Matching current user‟s profile)5. “Items related to you” (Contributor to document)
  16. 16. CSWP options “Unique “Reusable instance” result set” • Configure • Use Result query in web Source (OOTB part properties or custom)
  17. 17. The role of Managed Properties  CSWP has mappings to Managed Props for data:
  18. 18. CSWP and Display Templates These items are files in ~sitecollection/_catalogs/master page/Display Templates/ Content Web Parts
  19. 19. Diagnostic item template  Diagnostic template gives raw (ish) output  Tip: configure many props temporarily
  20. 20. CUSTOMISING THE CONTENTSEARCH WEB PART
  21. 21. Demo screenshot:Content Searchweb part withdefault DisplayTemplate
  22. 22. Demo screenshot:Content Searchweb part withcustom DisplayTemplate
  23. 23. Dynamic values in query Several tokens available: {User} {Page} {Site} • Match profile field • Match field value • Match current site e.g. e.g. Page.MyField e.g. Site.Url User.Department {Today} {Term} • Date filtering e.g. • Match current Today-7 managed nav term
  24. 24. Script/CSS in display templates Tools:  $includeScript  $includeLanguageScript  $includeCSS Butconsider HTTP payload – may be better combining with other CSS/JS
  25. 25. Search hover panel
  26. 26. SP2013 search recap Result Source • Search scope on steroids Query Rule • Best Bet on steroids • E.g. Word doc, person, social Result Type post etc. Display • Visual rendering of an item Template
  27. 27. Search display templates1. Create the Display Template  Copy/rename then edit 2 files: Alternative - use – Item_Something.js [HTML] search results – Item_Something_HoverPanel.js [HTML] WP properties to2. Create any core search config map to Display  E.g. Managed Properties, Result Source Template3. Create the Result Type
  28. 28. Hover Panel components
  29. 29. Hover Panel components - Item_CommonHoverPanel_Body.js - Item_[FileType]_HoverPanel.js
  30. 30. 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
  31. 31. CUSTOMISING THE SEARCHHOVER PANEL
  32. 32. Demo screenshot:Search hoverpanel customizedfor CAD files (i.e.custom behaviourfor a specificcontent type)
  33. 33. 2nd demo, screenshot 1:Adding a new action in the search hover panelfooter:
  34. 34. 2nd demo, screenshot 2:Clicking action fades in a textbox and button:
  35. 35. 2nd demo, screenshot 3:Clicking „Post‟ button posts to user‟s socialfeed:
  36. 36. 2nd demo, screenshot 4:Message in user‟s feed:
  37. 37. 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)
  38. 38. Summary JavaScriptis key to many SP2013 UI elements Examples shown:  Customising entire list UI  Conditional formatting of a field  Rendering of Content Search web part  Customising search hover panel (inc. AJAX) Lots of other possibilities too!
  39. 39. Thank you for attending!www.sharepointnutsandbolts.com@ChrisO_Brien

×