Deep Dive SharePoint Client Side Rendering

http://business365.azurewebsites.nettwitter: #business365sg

Riwut LibinukoMicrosoft MVP

Connect with Me

http://blog.libinuko.com

@cakriwut

http://www.youtube.com/user/cakriwut/

Riwut Libinuko

I love coding, robotics, financial engineering and foods. I use Lego Mingstorm, Arduino, Raspberry Pi for my projects. My latest project is to create PBX using Raspberry Pi and Sipura3102.

Active contributors to MSDN Forum, Code Sample Gallery, Curah, Nuget, Codeplex and many more.

Agenda Introduction to Client Side Rendering

Client Side Rendering Deep dive

Demo

Story of Elephant and Blind Man

"Hey, the elephant is a pillar," said the first man who touched his leg.

"Oh, no! it is like a rope," said the second man who touched the tail.

"Oh, no! it is like a thick branch of a tree," said the third man who touched the trunk of the elephant.

"It is like a big hand fan" said the fourth man who touched the ear of the elephant.

"It is like a huge wall," said the fifth man who touched the belly of the elephant.

"It is like a solid pipe," Said the sixth man who touched the tusk of the elephant.

Story of SharePoint and…

5

PreSales – “It’s a portal that also serves as service and development platform for all of business application. When installed, it’s provide anything you need easily and quickly.”

Infra Team – “We need 4 environment (dev-staging-preprod-prod) with same configuration. Each environment will need X number of servers and SQL server. ”

Manager – “This is the productivity platform that provide cost reduction and increase productivity. But I have limited budget to spend.”

Business User – “It can replace our old system and I want the same look and feel – and user experience with the old system. SharePoint can do anything easily and quickly.”

Developer – “Too much limitation compared to ASPNET/MVC. I can not do SQL queries. I can not find the file in IIS. Its too difficult!”

..this always happening..

6

Engineer thinks that List view is a good tools (display user list data, user can modify it)

Business wants to retain old apps looks and feel, highlight some important data etc.

SharePoint

Business User

Developer

We create Webpart, Features and Web Solution Package

but, need small customization

Feature Plan New Redevelop

Visual WebPart to display Grid with desired style YES NO

Item context menu NO YES

List item filtering NO YES

List item search NO YES

Link to Excel NO YES

1 simple request =

1 new feature + 4 or more REDEVELOPMENT

What if..?

Developer can modify only on specific area and retain other functions?

twitter: #business365sg http://business365.azurewebsites.net

..the smart developer..

8

Engineer thinks that List view is a good tools (display user list data, user can modify it)

Business wants to retain old apps looks and feel, highlight some important data etc.

SharePoint

Business User

Developer

Ok, we will modify only the specific area. Can be delivered without WSP deployment!

but, need small customization

Feature Plan New Redevelop

Visual WebPart to display Grid with desired style YES NO

Item context menu NO YES

List item filtering NO YES

List item search NO YES

Link to Excel NO YES

1 simple request =

1 new feature + 0 REDEVELOPMENT

Introducing Client-Side Rendering

Client Side Rendering modification

- 4 different area of modification Fields, Item, Header, Footer

- 4 different specific form fields modification (NewForm, EditForm, DisplayForm and View)

- PreRender + PostRender customization

- Use JavaScript and UI rendering

- Modify only specific area and retain functionalities of un-modified area

where developer turn the focus on UI rendering and modify only the specific area using new UI templating in Javascript

ListFields

Footer

Header

Item

OnPostRender

OnPreRender

NewForm

EditForm

DisplayForm

View

Client Side Rendering

10

ListFields

Footer

Header

Item

OnPostRender

OnPreRender

Client Side Rendering

11

List

Fields

OnPostRender

OnPreRender

NewForm

EditForm

DisplayForm

View

NewForm

EditForm

DisplayForm

View

(function () {

})();

CSR PatternRegister Override

Register the overrides to DOM, so it will be part of call sequence

Create Rendering Logic function RenderingTemplate(ctx) {// Logic

}

Function that will override rendering logic.

Apply Rendering Logic

Apply rendering logic to overrides any of 9 possible location

overrideCtx.BaseViewIDoverrideCtx.ListTemplateType

FieldName – is internal fieldname that will be treatedHTML Override – is the actual HTML tag to override. This can be pure HTML string, JavaScript function or both. If you embed JavaScript in HTML, the JavaScript should be enclosed in <#= #>. For example “<p><#= ctx.CurrentItem.Title #></p>”.

var NewTemplateCtx = {}

NewTemplateCtx.Templates = {};NewTemplateCtx.Templates.Header = "HTML Override, including opening html tag";NewTemplateCtx.Templates.Item = RenderingTemplate;NewTemplateCtx.Templates.Fields = {

"FieldName" : { "View|DisplayForm|EditForm|NewForm" : "HTML Override"}}

NewTemplateCtx.Templates.Footer = "HTML Override, including closure html tag";

SPClientTemplates.TemplateManager.RegisterTemplateOverrides(NewTemplateCtx);

1

2

3

Add reference to the script in Webpart’s JSLink property , Note token options1. ~site2. ~sitecollection3. ~layouts4. ~siteLayouts5. ~siteCollectionLayouts

4

Tools and Framework

• JSOM, Javascript SharePoint Object Model – ECMA script to execute SharePoint API

• Javascript framework such as Jquery, Mustache, Accordion etc.

• Debugging tools IE, Chrome developer tools

13

Snippet for today demo

14

Function Override template

The main function that defines new rendering logic.

- ListTemplateType , integer that correspond to List BaseID (for example 100 for custom list)

- fieldInternalName , change according to the field internal name what will be modified

- item, header, footer, postRender, preRender , refers to the function override that will return HTML string

1

https://github.com/cakriwut/Business365.CSR

Snippet for today demo

15

Function fldSetup

Function to prepare rendering, validation and postback during field Edit/New

- formCtx, current field context

- resultCallback, callback function to return the result of HTML element to SharePoint

- valicationCallback, callback function to render any error message back to form

- validators, array of custom validators object for the field. The validator object must define Validate prototype.

2

https://github.com/cakriwut/Business365.CSR

DemoAdd JS reference to SharePoint

ListView, NewForm, EditForm and DisplayForm

• Login to SharePoint Online

• Use bower to download all Javascripts and CSS components

• Add Javascript reference to SharePoint

• Modify JSLink in ListView, NewForm, EditForm and DisplayForm

• Ready for next step..

DemoOverriding Field in View and DisplayForm

In this demo we will go through the steps to modify List View and Display Form. I will modify the percentage field to show percentage bar and percentage value, instead of showing only percentage value.

We will start by using Override snippet, identify field internal name and change rendering logic.

CSR Pattern for NewForm/EditForm• Use callback function to return field value from

target HTML element. (Register callback function during initiation)

• Use callback function to display validation message to target HTML element. (Register callback function during initiation)

• Can contains one or more validators. Each validator is a Javascript object that contains Validate() prototype.

• Error from server side validation will switch form mode from NewForm to EditForm. (Client side validation will not change the form mode)

https://github.com/cakriwut/Business365.CSR

DemoOverriding Field in NewForm and EditForm

In this demo, we will change a simple Country text field into dropdown input. The value will be loaded from REST service.

Then we continue to make a cascading drop-down list, where Country dropdown will filter City dropdown.

You will learn using promise javascript and how to return custom input HTML value to SharePoint during form submit.

DemoApplying Custom validation

Applying custom validation can not be this easy. We can create simple client side validation or even validation that will trigger server side even.

In this demo we will validate NRIC text box according to the algorithm defined for NRIC validation.

twitter: #business365sg http://business365.azurewebsites.net

DemoOverriding DisplayForm using JS Templating

(MustacheJS/Handlebar)Modifying DisplayForm is always become a dilemma, since CSR only provide per field modification. In this demo I will show the secret of DisplayForm and how to modify the rendering.

As a bonus, I will extend the trick by applying JS Templating using Handlebars.

twitter: #business365sg http://business365.azurewebsites.net

IdeasForFree

Blog from Riwut Libinuko, a hands on IT Architect, also Microsoft SharePoint Server.

Shares articles, tips and trick, troubleshooting on SharePoint and other technologies.

Find out more at the http://blog.Libinuko.com