Intro to ClientSide Rendering By Phil Jirsa Tuesday

Intro to Client-Side Rendering By: Phil Jirsa Tuesday, October 26, 2021

About Me • Share. Point Developer/Consultant • MCTS • phil. jirsa@rackspace. com • @pjirsa • http: //www. 36 mph. com 2

Who Are You? • Site Collection Owner • Developer

Client-Side Rendering • What is it? • Why should I use it? • What can I do with it? • When should I NOT use it? • How does it work? • How can I make it AWESOME?

CSR (see-es-ar) noun 1. CSR is Java. Script code used by Share. Point 2013 list views and forms to create the final HTML output of list data to the browser. Example: Watch me use CSR to create a Share. Point list view that will blow your mind.

Boring List Data

Less Boring List Data

Why CSR?

CSR vs. XSL

Why CSR?

What can it do? • Conditional formatting • Field controls • Display Templates • Interactive UI • Present data however you want • ∞

When NOT to use it • Not an App replacement • Complex/Proprietary business logic • Form replacement • Legacy browser support

Server Render

Why XSL? • Backward Compatibility

After the Break • Code Samples

Break

Code Samples • How CSR Works - The Basics • Building on the Basics • Making it AWESOME

The Basics • Creating a JS file • Modifying List View

Building on the Basics • What can I override? • What data is available to me? • Debugging my code

#Awesome. Sauce • Java. Script Template Engines • The “skinny jeans” Team • Separation of Concerns

Demos

Summary • Created a JS file • Modified JS link property • Applied an override to a field, item, view/body • Created a re-usable template • Called Template framework to compile final HTML

References • http: //www. idubbs. com • http: //handlebars. js • http: //mapstraction. com • http: //onewordlouder. com/2013/07/09/indianadream/ • http: //www. 36 mph. com