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

1. Customizing the SharePoint
2013 UI with JavaScript
Chris O’Brien - MVP

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. Long Ago…
SharePoint 2007
CAML
SharePoint 2010
XSL

4. …Today
SharePoint 2010
XSL
SharePoint 2013
CSR

5. • Content Search web
part
• Search hover panel
• List callouts
• Lists
• Fields
• Web parts etc..
Client-Side
Rendering (CSR)
JSLink
Display
Templates
Terminology

6. JSLink
• Used to transform:
– Lists
– Views
– Fields
– Web Parts
– Content types

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. 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. DEMO:
USING JSLINK WITH SHAREPOINT LISTS
www.sharepointeurope.com

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. CUSTOMIZING THE CONTENT
SEARCH WEB PART
www.sharepointeurope.com

12. The role of Managed Properties
• CSWP has mappings to Managed Props for data:

13. CSWP and Display Templates
These items are files in
~sitecollection/_catalogs/masterpage/
Display Templates/
Content Web Parts

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. DEMO:
CUSTOMIZING THE CSWP
www.sharepointeurope.com

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. 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. SEARCH HOVER PANEL
www.sharepointeurope.com

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. Hover Panel components

21. Hover Panel components
- Item_CommonHoverPanel_Body.js
- Item_[FileType]_HoverPanel.js

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. DEMO:
CUSTOMIZING THE SEARCH HOVER
PANEL
www.sharepointeurope.com

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. 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. 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. 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. THANK YOU!
Questions?
www.sharepointnutsandbolts.com
@ChrisO_Brien