1 SharePoint Saturday Charlotte @caspug #spsclt CSR:CLT – Investigating Client-Side Rendering.

1 SharePoint Saturday Charlotte

@caspug #spsclt@caspug #spsclt

CSR:CLT – Investigating Client-Side RenderingJohn Birgerson - Managing Consultant, Cardinal Solutions - [email protected]

SharePoint Saturday Charlotte


@caspug #spsclt

Thanks for helping make SPSCLT happen!

Platinum Sponsors

Gold Sponsors


@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


@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.


@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


@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


@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


@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

http://www.martinhatch.com/2013/08/jslink-and-display-templates-part-1.html




@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


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


@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


@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


@caspug #spsclt

Taxonomy Fields Related Items field Task outcome field

All these have read-only JSLink properties

JS Link cannot apply to


@caspug #spsclt

Wait for it… JavaScript SharePoint JavaScript object model HTML, CSS

Skills needed:


@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


@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


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


@caspug #spsclt

A Nice one – a custom new/edit field that uses multiple controls, choices, lookups

Dynamic, visual validation indicator during data entry


@caspug #spsclt

Control All Headers:

~sitecollection/Style Library/JSLinkFiles/HeaderWarning.js


@caspug #spsclt

Demo


@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


@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


@caspug #spsclt


@caspug #spsclt


@caspug #spsclt


@caspug #spsclt


@caspug #spsclt

What is a Rendering Context ?


@caspug #spsclt

Rendering Context


@caspug #spsclt

Current Item


@caspug #spsclt


@caspug #spsclt

TaskCompletionAnimation:

~sitecollection/Style Library/JQuery/jquery-2.1.1.js|~sitecollection/Style Library/JSLinkFiles/AnimatedTasks.js


@caspug #spsclt

Demo


@caspug #spsclt


@caspug #spsclt


@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


@caspug #spsclt

Demo


@caspug #spsclt


@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


@caspug #spsclt

Demo


@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


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


@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

1 SharePoint Saturday Charlotte @caspug #spsclt CSR:CLT – Investigating Client-Side Rendering.

Documents

spsclt slide

rendering slide

spsclt js link slide

spsclt rendering context

spsclt client

spsclt skills

sharepoint objects

new slide