Http://sharepointmn.com Welcome to the Minnesota SharePoint User Group February 13 th, 2013 SharePoint 2013 – Developers Track - Client Side Rendering

http://sharepointmn.com

Welcome to the Minnesota SharePoint

User GroupFebruary 13th, 2013

SharePoint 2013 – Developers Track - Client Side Rendering

Vish Yem & Nate Hadro

Donald Donais


Agenda

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


Presenters


Vish Yem• SharePoint Consultant• Father & Hawkeye fan

Introductions


Nate Hadro• SharePoint Consultant• Father and Snowboarding Enthusiast

Introductions


SharePoint Client Side Object Model (CSOM)


• 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

Client Side Object Model in 2010


• 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

Client Side Object Model in 2013


Demo – SharePoint 2013 RESTful service


Client Side Rendering


List Data+

JavaScript=

HTML

Client Side Rendering (CSR)


Demo – Client Side Rendering using JSLink


Content Search Webpart


• Cross Site Collection• Results from Search Index• Query Builder• Display Templates

Content Search vs. Content Query


Retrieves managed properties

Display Templates

Document Summary

Path

File Extension Title Preview Image

Rendered using HTML and JavaScript instead of XSL



Demo – Content Search Webpart


• 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

Display Templates Summary


Search Center Rendering


Quick test… raise your hand when you’re done


Find the PDF

Now find Joanna’s project


• Results all look the same• Company documents and sites are not the same

What’s the problem?


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


Demo – Result Types


• Refiners• Query Rules

(Demo if time allows)

Additional Rendering


• 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-functio

nal-primer/

• Chris O’Brien: Using the Content Search web part http://www.idubbs.com/blog/2012/js-link-for-sharepoint-2013-web-partsa-quick-functio

nal-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

SharePoint Resources

http://msdn.microsoft.com/en-us/library/jj220061.aspx

http://msdn.microsoft.com/en-us/library/jj220061.aspx

http://blog.aptillon.com/2012/10/12/custom-field-types-in-sharepoint-2013-apps/

http://blog.aptillon.com/2012/10/12/custom-field-types-in-sharepoint-2013-apps/

http://www.idubbs.com/blog/2012/js-link-for-sharepoint-2013-web-partsa-quick-functional-primer/






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




Questions?


Thanks for coming!

Documents

Http://sharepointmn.com Welcome to the Minnesota SharePoint User Group February 13 th, 2013 SharePoint 2013 – Developers Track - Client Side Rendering