1 / 28

Enhancing SharePoint 2013 Development with Client-Side Rendering Techniques

Join Vish Yem and Nate Hadro in this interactive session on SharePoint 2013's Client-Side Rendering (CSR) capabilities. Discover the evolution of the Client-Side Object Model (CSOM) from 2010 to 2013, and learn how RESTful services and OData enable advanced data access. Delve into practical demos showcasing how to use JavaScript to customize content search and create dynamic display templates and result types. This session is designed for developers looking to leverage client-side techniques to enhance user experiences in SharePoint 2013.

daniel-dotson
Download Presentation

Enhancing SharePoint 2013 Development with Client-Side Rendering Techniques

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Donald Donais February 13th, 2013 SharePoint 2013 – Developers Track - Client Side Rendering Vish Yem & Nate Hadro

  2. Agenda • Introductions • Client Side Object Model (CSOM) • Client Side Rendering • Content Search Webpart • Search Center Rendering

  3. Presenters

  4. Introductions Vish Yem • SharePoint Consultant • Father & Hawkeye fan

  5. Introductions Nate Hadro • SharePoint Consultant • Father and Snowboarding Enthusiast

  6. SharePoint Client Side Object Model (CSOM)

  7. Client Side Object Model in 2010 • Client APIs that allowed you to program against SharePoint objects without deploying code to the server • Three APIs • Silverlight • .NET • JavaScript • Subset of the server object model • /_vti_bin/client.svc

  8. Client Side Object Model in 2013 • Expanded access to SharePoint objects • client.svc extended to support REST using _api • What is a RESTful web service? • Web based data access • Query by URL • What is OData? • Standard protocol for implementing REST services • Standardize HTTP verb mapping, URIs and syntax

  9. Demo – SharePoint 2013 RESTful service

  10. Client Side Rendering

  11. Client Side Rendering (CSR) List Data + JavaScript = HTML

  12. Demo – Client Side Rendering using JSLink

  13. Content Search Webpart

  14. Content Search vs. Content Query • Cross Site Collection • Results from Search Index • Query Builder • Display Templates

  15. Display Templates Retrieves managed properties Preview Image File Extension Title Document Summary Path Rendered using HTML and JavaScript instead of XSL

  16. Demo – Content Search Webpart

  17. Display Templates Summary • Place them in the Master Page Gallery • Copied an existing display template • Added a new managed property • Customized the information based on a JavaScript condition • Use the editor of your choice

  18. Search Center Rendering

  19. Quick test… raise your hand when you’re done

  20. Find the PDF Now find Joanna’s project

  21. What’s the problem? • Results all look the same • Company documents and sites are not the same

  22. Hello, Result Types!Tailor the look or important types of results.

  23. Demo – Result Types

  24. Additional Rendering • Refiners • Query Rules (Demo if time allows)

  25. SharePoint Resources • Customizing field types using client-side rendering • http://msdn.microsoft.com/en-us/library/jj220061.aspx • David Mann: Custom field types in SharePoint 2013 • http://blog.aptillon.com/2012/10/12/custom-field-types-in-sharepoint-2013-apps/ • Wes Preston: JS Link for Web Parts • http://www.idubbs.com/blog/2012/js-link-for-sharepoint-2013-web-partsa-quick-functional-primer/ • Chris O’Brien: Using the Content Search web part • http://www.idubbs.com/blog/2012/js-link-for-sharepoint-2013-web-partsa-quick-functional-primer/ • Using Query Rules, Result Types, and Display Templates • http://blogs.technet.com/b/speschka/archive/2012/07/23/using-query-rules-result-types-and-display-templates-for-a-custom-search-sales-report-in-sharepoint-2013.aspx

  26. Questions?

  27. Thanks for coming!

More Related