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_Brien • LinkedIn: http://uk.linkedin.com/in/

chrisobrienmvp

About me

Long Ago…

SharePoint 2007CAML

SharePoint 2010XSL

…Today

SharePoint 2010XSL

SharePoint 2013CSR

• Content Search web part

• Search hover panel• List callouts

• Lists• Fields• Web parts etc..Client-Side Rendering (CSR)

JSLink

Display Templates

Terminology

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:– BaseViewID (e.g. 1)– ListTemplateType (e.g. 10001)– ControlMode (e.g. ‘Display’)

Registering templates/running code• The RenderContext JS object:– Templates collection

• e.g. header, item, footer• Register with BaseViewID, ListTemplateType, ControlMode

– OnPreRender– OnPostRender

– ListData– ListSchema

DEMO:

USING JSLINK WITH SHAREPOINT LISTS

www.sharepointeurope.com

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

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 Parts

Diagnostic item template

• Diagnostic template gives raw (ish) output

• Further tools:– Elio Struyf’s “Ultimate

Diagnostic template”– SharePoint 2013 Search

Query Tool (Codeplex)

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}•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:

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

SEARCH HOVER PANEL

www.sharepointeurope.com

SP2013 search recap• Search scope on steroidsResult

Source

• Best Bet on steroidsQuery Rule

• E.g. Word doc, person, social post etc.Result Type

• Visual rendering of an itemDisplay Template

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– E.g. Discussion

- Item_CommonHoverPanel_Actions.js- Item_[FileType]_HoverPanel.js

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.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)

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)

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!

ResourcesResource 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

THANK YOU!Questions?

www.sharepointnutsandbolts.com@ChrisO_Brien