Spsnyc 2016 JSLink Primer

JSLINK PRIMERUse JSLink to Deliver Rich Uis and Customizations

Mike Oryszak – B&R Business SolutionsSPS NYC – 7/30/2016

ABOUT MESr Solution Architect w/ B&R Business Solutions

5x Microsoft SharePoint MVP (2010-2014)Dev and Architect on MS Stack since 1996

Working with SharePoint since 2002

@next_connect – http://mikeoryszak.com

THANK YOUEVENT

SPONSORSWe appreciated you supporting the New York SharePoint Community!

• Diamond, Platinum, Gold, & Silver have tables scattered throughout

• Please visit them and inquire about their products & services

• To be eligible for prizes make sure to get your bingo card stamped by ALL sponsors

• Raffle at the end of the day and you must be present to win!

CONFERENCE MATERIALS

• Slides / Demo will be posted on Lanyrd.com• http://lanyrd.com/2016/spsnyc

• Photos posted to our Facebook page• https://www.facebook.com/sharepointsaturdaynyc

• Tweet Us - @SPSNYC or #SPSNYC• Sign Up for our NO SPAM mailing list for all conference

news & announcements• http://goo.gl/7WzmPW

• Problems / Questions / Complaints / Suggestions• Info@SPSNYMetro.com

• Visit ExtaCloud’s booth for wrist bands!

Scallywag's Irish Pub

508 9th Ave, between 38th & 39th. [6 minutes walk]

Scallywags also serves food.http://www.scallywagsnyc.com/

OVERVIEW

• Rendering in SharePoint• What is JSLink?• Why use JSLink?• Script Registration• Examples• Closing

RENDERING IN SHAREPOINT

• Traditionally SharePoint relied on server side processing (2001->2010)• XSLT based search results• List views• List forms• Dataview web part

• For efficiency (optimized downloads, faster rendering) MS moved to Client Side Rendering with SharePoint 2013• Scripts on Demand (SOD)• Processing/rendering with client side javascript code• Display templates for roll-up rendering

WHAT IS JSLINK?

• JSLink supports binding a custom client side script to a list view, form, or app in order to override the default client side rendering

• With the injected script, you have control over when it fires (pre or post rendering)

• You can manipulate specific fields or the entire item

WHY USE JSLINK?

• Supported method for tapping into the CSR flow• Can generate robust content displays• Can enhance forms for dependent dropdowns or data lookups• Can load other content, use conditional formatting, or add actions

EXAMPLES

RESOURCES

• List Template Type Reference• https://msdn.microsoft.com/en-us/library/microsoft.sharepoint.client.listtemplatetype(v=office.15).aspx

• OfficeDev PnP: Samples• https://github.com/OfficeDev/PnP/tree/master/Samples/Branding.ClientSideRendering

• Using JSLink to Change the UI of SharePoint List/View• http://www.sharepointnutsandbolts.com/2013/01/using-jslink-to-change-ui-of-sharepoint_20.html

• Wes Preston – JSLink and CSR Examples• http://www.idubbs.com/blog/js-link-and-csr/