Upload
chris-obrien
View
542
Download
3
Embed Size (px)
DESCRIPTION
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
Citation preview
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