Customising the SharePoint 2013 UI with JavaScript

P&M306

Chris O’Brien - MVP

About me Independent Consultant Head of Development, Content and Code

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

chrisobrienmvp

Long Ago…

SharePoint 2007

CAML

SharePoint 2010

XSL

SharePoint 2010

XSL

…Today

SharePoint 2013

CSR

Client-Side Rendering

(CSR)

JSLink

Display Templates

Terminology

• 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

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 TO FORMAT A LIST VIEW

Demo screenshot:

A SharePoint list transformed with JSLink (jQuery UI accordion)

Demo screenshot:

A SharePoint field transformed with JSLink (simple conditional formatting)

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

Content Query vs. Content SearchContent Query web

partContent 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

CSWP - 5 ‘easy to nail’ requirements

1. “More like this” (Items matching a tag)

2. Recently changed items

3. Most popular items

4. “(Recent) items you may be interested in”(Matching current user’s profile)

5. “Items related to you”(Contributor to document)

CSWP options

“Unique instance”

•Configure query in web

part properties

“Reusable result set”

•Use Result Source

(OOTB or custom)

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

Tip: configure many props temporarily

Demo

CUSTOMISING THE CONTENT SEARCH WEB PART

Demo screenshot:

Content Search web part with default Display Template

Demo screenshot:

Content Search web part with custom Display Template

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:

Script/CSS in display templates

Tools: $includeScript $includeLanguageScript $includeCSS

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

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

Search display templates

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

Alternative - use search

results WP properties to map

to Display 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

CUSTOMISING THE SEARCH HOVER PANEL

Demo screenshot:

Search hover panel customized for CAD files (i.e. custom behaviour for a specific content type)

2nd demo, screenshot 1:

Adding a new action in the search hover panel footer:

2nd demo, screenshot 2:

Clicking action fades in a textbox and button:

2nd demo, screenshot 3:

Clicking ‘Post’ button posts to user’s social feed:

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

Summary

JavaScript is 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!

Thank you for attending!

www.sharepointnutsandbolts.com

@ChrisO_Brien