Customizing the SharePoint 2013 UI with JavaScript

About me

Long Ago…

…Today

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

JSLink

CSR/JSLink – template scope

Registering templates/running code

Using JSLink with SharePoint lists

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-dateDepends on crawl frequency/speed Current site collectionEntire farm/tenancy XSLTJavaScript Parameterisation Support for slideshow, paging

CSWP - 5 ‘easy’ requirements

The role of Managed Properties

CSWP and Display Templates These items are files in ~sitecollection/_catalogs/master page/Display Templates/ Content Web Parts

Diagnostic item template

Customizing 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 steroids Result Source Best Bet on steroids Query Rule E.g. Word doc, person, social post etc. Result Type Visual rendering of an item Display Template

Hover Panel components

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

Hover Panel actions - Item_CommonHoverPanel_Actions.js - Item_[FileType]_HoverPanel.js

Customizing the search hover panel

Hover panel – lessons learnt

Summary

THANK YOU

CSWP/search Query Builder

Script/CSS in display templates

CSWP options “Unique instance” Configure query in web part properties “Reusable result set” Use Result Source (OOTB or custom)

Search display templates Alternative - use search results WP properties to map to Display Template

THANK YOU