Your SlideShare is downloading. ×
0
Customising the SharePoint 2013 UI with              JavaScript                 P&M306           Chris O‟Brien - MVP
About me  IndependentConsultant  Head of Development, Content and Code  Blog: www.sharepointnutsandbolts.com  Twitter:...
Long Ago…SharePoint 2007CAMLSharePoint 2010XSL
…TodaySharePoint 2010XSLSharePoint 2013CSR
Terminology                    JSLink     Client-Side     Rendering       (CSR)        Display                   Templates
Terminology               •   Lists                          •   Fields                          •   Web parts etc..      ...
JSLink Used  to transform:   Lists   Views   Fields   Web Parts   Content types
Registering templates/running code The   RenderContext JS object:   Templates collection    – e.g. header, item, footer ...
USING JSLINK TO FORMAT ALIST VIEW
Demo screenshot:A SharePoint listtransformed withJSLink (jQuery UIaccordion)
Demo screenshot:A SharePoint fieldtransformed withJSLink (simpleconditionalformatting)
Advanced CSR possibilities Modify   list data/schema in OnPreRender   E.g. lookup something dynamically Use   SPClientR...
Customizing the Content Searchweb part
Content Query vs. Content Search               Content Query web       Content Search web part                      part  ...
CSWP - 5 „easy to nail‟ requirements1.   “More like this”       (Items matching a tag)2.   Recently changed items3.   Most...
CSWP options       “Unique          “Reusable      instance”         result set”   • Configure         • Use Result     qu...
The role of Managed Properties      CSWP   has mappings to Managed Props      for data:
CSWP and Display Templates             These items are files in             ~sitecollection/_catalogs/master             p...
Diagnostic item template        Diagnostic template         gives raw (ish) output        Tip: configure many         pr...
CUSTOMISING THE CONTENTSEARCH WEB PART
Demo screenshot:Content Searchweb part withdefault DisplayTemplate
Demo screenshot:Content Searchweb part withcustom DisplayTemplate
Dynamic values in query     Several tokens available:     {User}                    {Page}                {Site}     • Mat...
Script/CSS in display templates Tools:   $includeScript   $includeLanguageScript   $includeCSS Butconsider HTTP paylo...
Search hover panel
SP2013 search recap     Result Source • Search scope on steroids      Query Rule   • Best Bet on steroids                 ...
Search display templates1.   Create the Display Template        Copy/rename then edit 2 files:            Alternative - u...
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 ...
CUSTOMISING THE SEARCHHOVER PANEL
Demo screenshot:Search hoverpanel customizedfor CAD files (i.e.custom behaviourfor a specificcontent type)
2nd demo, screenshot 1:Adding a new action in the search hover panelfooter:
2nd demo, screenshot 2:Clicking action fades in a textbox and button:
2nd demo, screenshot 3:Clicking „Post‟ button posts to user‟s socialfeed:
2nd demo, screenshot 4:Message in user‟s feed:
Hover panel – lessons learnt Can‟t   use document.ready() – DOM is not populated   Specify function in ctx.OnPostRender ...
Summary JavaScriptis key to many SP2013 UI elements Examples shown:     Customising entire list UI     Conditional for...
Thank you for attending!www.sharepointnutsandbolts.com@ChrisO_Brien
Upcoming SlideShare
Loading in...5
×

Customizing the SharePoint 2013 user interface with JavaScript - Chris OBrien

10,487

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
8 Likes
Statistics
Notes
No Downloads
Views
Total Views
10,487
On Slideshare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
129
Comments
2
Likes
8
Embeds 0
No embeds

No notes for slide

Transcript of "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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×