1 sharepoint saturday charlotte @caspug #spsclt csr:clt – investigating client-side rendering
TRANSCRIPT
1 SharePoint Saturday Charlotte
@caspug #spsclt@caspug #spsclt
CSR:CLT – Investigating Client-Side RenderingJohn Birgerson - Managing Consultant, Cardinal Solutions - [email protected]
SharePoint Saturday Charlotte
2 SharePoint Saturday Charlotte
@caspug #spsclt
Thanks for helping make SPSCLT happen!
Platinum Sponsors
Gold Sponsors
3 SharePoint Saturday Charlotte
@caspug #spsclt
What we’ll learn:
What is thing? How does it compare to other development techniques and tools? What capabilities does this have? What skills or expertise is needed to use it?
This might be possible for some ‘Power Users’ maybe, but really, this is for developers.
1
4 SharePoint Saturday Charlotte
@caspug #spsclt
What we’ll learn:
What SharePoint objects can this technique modify/customize.How to write and apply the scripts.Simple Developer How-To.
Obviously, there’s no server-side managed code here – it’s all about JavaScript.
1
2 Yes, we can do fun things with 3rd party JavaScript libraries.
5 SharePoint Saturday Charlotte
@caspug #spsclt
What we’ll learn:
What is this technique useful for? What is the ‘best fit’ situation for when to use it? What are other people doing? What else can we do with it?
We’ll look at a few tried-and-true popular uses
1 2 But let’s all think of a few more uses too. This isn’t a fearsome thing, it won’t hurt your
farm
3
6 SharePoint Saturday Charlotte
@caspug #spsclt
Old versions of SharePoint – servers get http/s request, return fully-formed html to the browser Data is gathered, display template applied –
xslt transformations. HTML is the result. SharePoint 2013 and SPOL are different
than that. Client browser requests may get data – JSON – and apply the display template on the client. Rendering ‘instructions’ are JavaScript
Client-Side Rendering
7 SharePoint Saturday Charlotte
@caspug #spsclt
Two ‘flavors’ of CSR – Display Templates – related to Search, Search-
based web parts. Commonly used to format search results pages,
Commonly used to create nice presentation of Content By Search Web Part
JSLink – this is our topic. ‘override’ the out-of-the-box rendering
instructions (JavaScript) with custom script Link the custom scripts to the desired SP
objects
Client-Side Rendering
8 SharePoint Saturday Charlotte
@caspug #spsclt
Oh, there’s something new – in the list view web part edit/config dialog
Sparse documentation from MS. Getting a little better now, but nothing at first
Here’s the starting point – http://www.martinhatch.com/2013/0
8/jslink-and-display-templates-part-1.html
JS Link is new
9 SharePoint Saturday Charlotte
@caspug #spsclt
That web part dialog tells us –
JS Link is a property of some SharePoint objects (obviously, LVWP is one of those)
The data which is available for presenting is still controlled by the list, list view, schema
JS Link
10 SharePoint Saturday Charlotte
@caspug #spsclt
Out-of-the-box renderingJavaScript that is ‘tied’ to SharePoint objects using the JSLink property; the script referred to in that property controls presentation or display of data. Not CRUD.
We’re replacing the OOB js file that defines the object’s rendering with our own.
Usually, replacing it with more than one of our own (more on this point later)
11 SharePoint Saturday Charlotte
@caspug #spsclt
A way to define or change data presentation or user interaction with data That’s its intended purpose, but it’s not exactly
confined to doing just presentation…
Think of it as
Not data storage/structures – like lists or libraries, groups, property bags
Not process-oriented things like event receivers, workflows, custom actions
It Applies to ‘Visual’ things
12 SharePoint Saturday Charlotte
@caspug #spsclt
Fields (site columns and list columns) Content Types (site collection and list
level) List Views List Forms (New item, Edit item,
Display) Unless customized in SPD
List View and List Form web parts So, this can affect many more things
than XSLT did (it’s still around if you really like it - )
JS Link can apply to
13 SharePoint Saturday Charlotte
@caspug #spsclt
Taxonomy Fields Related Items field Task outcome field
All these have read-only JSLink properties
JS Link cannot apply to
14 SharePoint Saturday Charlotte
@caspug #spsclt
Wait for it… JavaScript SharePoint JavaScript object model HTML, CSS
Skills needed:
15 SharePoint Saturday Charlotte
@caspug #spsclt
PowerShell, or Ability to package SP Solutions Knowledge of third-party JavaScript
libraries and how to implement those in SharePoint
Nice thing about it - Totally easy to back out, retract. Just edit the object’s JS Link property back to original value. That’s all. (No hanging/lingering artifacts, no IIS restarts, etc.)
Skills that help
16 SharePoint Saturday Charlotte
@caspug #spsclt
In general , getting the user interface to do ‘special’ things that it doesn’t OOB.
What to do with it
Indicator Icons – ‘restricted access’
Non-standard data entry/edit controls
Visual status, kpi’s
17 SharePoint Saturday Charlotte
@caspug #spsclt
What to do with it Data Entry validation, even complex
validation like references to other fields, regexes
Row or field highlighting, conditional formatting
Calculated fields. Complex calculations.
Let’s think of some- Remember we can ‘hook in’ more
than one js file. That includes third-party js libraries -
18 SharePoint Saturday Charlotte
@caspug #spsclt
A Nice one – a custom new/edit field that uses multiple controls, choices, lookups
Dynamic, visual validation indicator during data entry
19 SharePoint Saturday Charlotte
@caspug #spsclt
Control All Headers:
~sitecollection/Style Library/JSLinkFiles/HeaderWarning.js
21 SharePoint Saturday Charlotte
@caspug #spsclt
Just because our JS file is linked to one object (web part, list view, form) DOES NOT mean that that object is all our script can modify
You have access to the entire DOM You have access to the object’s data
(and metadata) before it’s presented You can do pretty much whatever
other things you want in JSOM – get remote data, get ‘relational’ data
Important thing to remember
22 SharePoint Saturday Charlotte
@caspug #spsclt
PreRender Event – Modify client-side data before it is rendered
Overrides – Prescribing how the object will be displayed, ‘overriding’ the OOB rendering
PostRender Event – DOM manipulation
How it’s done
31 SharePoint Saturday Charlotte
@caspug #spsclt
TaskCompletionAnimation:
~sitecollection/Style Library/JQuery/jquery-2.1.1.js|~sitecollection/Style Library/JSLinkFiles/AnimatedTasks.js
35 SharePoint Saturday Charlotte
@caspug #spsclt
AWShowcaseCarousel:
~sitecollection/Style Library/JQuery/jquery-2.1.1.js|~sitecollection/Style Library/Awkward/jquery.aw-showcase-edits.js|~sitecollection/Style Library/JSLinkFiles/AwShowcaseCarousel.js
38 SharePoint Saturday Charlotte
@caspug #spsclt
DataTableTasks:
~sitecollection/Style Library/JQuery/jquery-2.1.1.js|~sitecollection/Style Library/DataTables/js/jquery.dataTables.js|~sitecollection/Style Library/JSLinkFiles/DataTableTasks.js
40 SharePoint Saturday Charlotte
@caspug #spsclt
CSS needed for JS libraries, plug-ins does not always get along with SharePoint CSS
Minimal Download Strategy – scripts are a static page element, only load once. Well known work-around
With elaborate scripts, watch performance
Ensure it works in all targeted browsers
What to watch out for
41 SharePoint Saturday Charlotte
@caspug #spsclt
Join us at SharePint. Come to the Charlotte
SharePoint User Group meetings – listen and learn, contribute with presentations, conversations in the Yammer group, volunteering.
If you found this interesting or useful, please mention on Twitter using the hashtag #SPSCLT
Please scan the QR code and fill out the session survey
That’s All!
SCAN QR CODES
Please comment, it helps make future presentations better!
42 SharePoint Saturday Charlotte
@caspug #spsclt
SharePint DirectionsKristophers250 North Trade Street Matthews, NC 28105
1. Turn right onto Ann St. : 1.1 mi2. Turn right onto Old Monroe Rd. : 0.1
mi3. Road changes to E John St. : 359ft4. Turn right onto N Trade St. : 2.3 mi
1st drink on us, bring your ticket