SlideShare a Scribd company logo

Spsnyc 2016 JSLink Primer

•Download as PPTX, PDF•
•
Michael Oryszak
Michael Oryszak

The document provides an overview of using JSLink to customize SharePoint lists, views, and forms with client-side rendering. It discusses how JSLink allows overriding the default client-side rendering with custom scripts to manipulate fields and formatting. Examples are presented along with resources for learning more about JSLink and client-side rendering capabilities in SharePoint.

Related slideshows

What you don’t know CAN hurt you
What you don’t know CAN hurt youWhat you don’t know CAN hurt you
What you don’t know CAN hurt you
 
Keeping up to date
Keeping up to dateKeeping up to date
Keeping up to date
 
SharePoint - Creating Beautiful Yet Powerful Dashboards Using jQuery
SharePoint - Creating Beautiful Yet Powerful Dashboards Using jQuerySharePoint - Creating Beautiful Yet Powerful Dashboards Using jQuery
SharePoint - Creating Beautiful Yet Powerful Dashboards Using jQuery
 
1 of 11
JSLINK PRIMER Use JSLink to Deliver Rich Uis and Customizations Mike Oryszak – B&R Business Solutions SPS NYC – 7/30/2016
ABOUT ME Sr 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 YOU EVENT SPONSORS We 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/

More Related Content

Spsnyc 2016 JSLink Primer

  • 1. JSLINK PRIMER Use JSLink to Deliver Rich Uis and Customizations Mike Oryszak – B&R Business Solutions SPS NYC – 7/30/2016
  • 2. ABOUT ME Sr 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
  • 3. THANK YOU EVENT SPONSORS We 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!
  • 4. 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
  • 5. • 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/
  • 6. OVERVIEW • Rendering in SharePoint • What is JSLink? • Why use JSLink? • Script Registration • Examples • Closing
  • 7. 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
  • 8. 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
  • 9. 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
  • 11. 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/