Customizing the SharePoint 2013 user interface with JavaScript - Chris OBrien

Uploaded 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 …

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.

More in: Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • Great presentation
    Are you sure you want to
    Your message goes here
  • any body help me, from where i can see recording of this presentaiton
    Are you sure you want to
    Your message goes here
No Downloads


Total Views
On Slideshare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. Customising the SharePoint 2013 UI with JavaScript P&M306 Chris O‟Brien - MVP
  • 2. About me  IndependentConsultant  Head of Development, Content and Code  Blog:  Twitter: @ChrisO_Brien  LinkedIn: chrisobrienmvp
  • 3. Long Ago…SharePoint 2007CAMLSharePoint 2010XSL
  • 4. …TodaySharePoint 2010XSLSharePoint 2013CSR
  • 5. Terminology JSLink Client-Side Rendering (CSR) Display Templates
  • 6. Terminology • Lists • Fields • Web parts etc.. JSLink Client- SideRendering (CSR) Display Templates • Content Search web part • Search hover panel • List callouts
  • 7. JSLink Used to transform:  Lists  Views  Fields  Web Parts  Content types
  • 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
  • 10. Demo screenshot:A SharePoint listtransformed withJSLink (jQuery UIaccordion)
  • 11. Demo screenshot:A SharePoint fieldtransformed withJSLink (simpleconditionalformatting)
  • 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. Customizing the Content Searchweb part
  • 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. 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. CSWP options “Unique “Reusable instance” result set” • Configure • Use Result query in web Source (OOTB part properties or custom)
  • 17. The role of Managed Properties  CSWP has mappings to Managed Props for data:
  • 18. CSWP and Display Templates These items are files in ~sitecollection/_catalogs/master page/Display Templates/ Content Web Parts
  • 19. Diagnostic item template  Diagnostic template gives raw (ish) output  Tip: configure many props temporarily
  • 21. Demo screenshot:Content Searchweb part withdefault DisplayTemplate
  • 22. Demo screenshot:Content Searchweb part withcustom DisplayTemplate
  • 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. Script/CSS in display templates Tools:  $includeScript  $includeLanguageScript  $includeCSS Butconsider HTTP payload – may be better combining with other CSS/JS
  • 25. Search hover panel
  • 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. 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. Hover Panel components
  • 29. Hover Panel components - Item_CommonHoverPanel_Body.js - Item_[FileType]_HoverPanel.js
  • 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
  • 32. Demo screenshot:Search hoverpanel customizedfor CAD files (i.e.custom behaviourfor a specificcontent type)
  • 33. 2nd demo, screenshot 1:Adding a new action in the search hover panelfooter:
  • 34. 2nd demo, screenshot 2:Clicking action fades in a textbox and button:
  • 35. 2nd demo, screenshot 3:Clicking „Post‟ button posts to user‟s socialfeed:
  • 36. 2nd demo, screenshot 4:Message in user‟s feed:
  • 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. 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. Thank you for attending!