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

http://sharepointmn.com

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

http://sharepointmn.com

Presenters

http://sharepointmn.com

Vish Yem• SharePoint Consultant• Father & Hawkeye fan

Introductions

http://sharepointmn.com

Nate Hadro• SharePoint Consultant• Father and Snowboarding Enthusiast

Introductions

http://sharepointmn.com

SharePoint Client Side Object Model (CSOM)

http://sharepointmn.com

• 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

http://sharepointmn.com

• 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

http://sharepointmn.com

Demo – SharePoint 2013 RESTful service

http://sharepointmn.com

Client Side Rendering

http://sharepointmn.com

List Data+

JavaScript=

HTML

Client Side Rendering (CSR)

http://sharepointmn.com

Demo – Client Side Rendering using JSLink

http://sharepointmn.com

Content Search Webpart

http://sharepointmn.com

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

Content Search vs. Content Query

http://sharepointmn.com

Retrieves managed properties

Display Templates

Document Summary

Path

File Extension Title Preview Image

Rendered using HTML and JavaScript instead of XSL

http://sharepointmn.com

http://sharepointmn.com

Demo – Content Search Webpart

http://sharepointmn.com

• 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

http://sharepointmn.com

Search Center Rendering

http://sharepointmn.com

Quick test… raise your hand when you’re done

http://sharepointmn.com

Find the PDF

Now find Joanna’s project

http://sharepointmn.com

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

What’s the problem?

http://sharepointmn.com

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

http://sharepointmn.com

Demo – Result Types

http://sharepointmn.com

• Refiners• Query Rules

(Demo if time allows)

Additional Rendering

http://sharepointmn.com

• 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://sharepointmn.com

Questions?

http://sharepointmn.com

Thanks for coming!