Customizing the SharePoint 2013 UI with JavaScript

Chris O’Brien - MVP

About me

• Independent Consultant• Head of Development, Content and Code (UK)

• Blog: www.sharepointnutsandbolts.com• Twitter: @ChrisO_Brien • LinkedIn: http://uk.linkedin.com/in/ chrisobrienmvp

Long Ago…

SharePoint 2007CAML

SharePoint 2010XSL

SharePoint 2010XSL

…Today

SharePoint 2013CSR

• Content Search web part

• Search hover panel• List callouts

• Lists• Fields• Web parts etc..

Client-Side Rendering

(CSR)

JSLink

Display Templates

Terminology

• Used to transform:−Lists−Views−Fields−Web Parts−Content types

JSLink

• 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’)

CSR/JSLink – template scope

• The RenderContext JS object:−Templates collection• e.g. header, item, footer• Register with BaseViewID, ListTemplateType, ControlMode

−OnPreRender−OnPostRender

−ListData−ListSchema

Registering templates/running code

DEMOUsing JSLink with SharePoint lists

• 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

Advanced CSR possibilities

Customizing the Content Search web part

Content Query vs. Content Search

Content Query web part

Content Search web part

Latency

Scope

Styling

Bonuses

100% up-to-date Depends on crawl frequency/speed

Current site collection Entire farm/tenancy

XSLT JavaScript

Parameterisation

Support for slideshow, paging

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

CSWP - 5 ‘easy’ requirements

• CSWP has mappings to Managed Props for data:

The role of Managed Properties

CSWP and Display Templates

These items are files in ~sitecollection/_catalogs/masterpage/Display Templates/Content Web Parts

• Diagnostic template gives raw (ish) output• Tip: configure many

props temporarily

Diagnostic item template

DEMOCustomizing the CSWP

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

{Today}• Date filtering e.g.

Today-7

{Term}• Match current

managed nav term

Several tokens available:

Search hover panel

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

DEMOCustomizing the search hover panel

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

Hover panel – lessons learnt

• 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!

Summary

THANK YOU

CSWP/search Query Builder

• Tools:−$includeScript−$includeLanguageScript−$includeCSS

• But consider HTTP payload – may be better combining with other CSS/JS

Script/CSS in display templates

CSWP options“Unique

instance”• Configure query in web part properties

“Reusable result set”

• Use Result Source (OOTB or custom)

1. Create the Display Template− Copy/rename then edit 2 files:

• Item_Something.js [HTML]• Item_Something_HoverPanel.js [HTML]

2. Create any core search config− E.g. Managed Properties, Result Source

3. Create the Result Type

Search display templates

Alternative - use search results WP properties to map to Display Template

DEMO

THANK YOU