RISPUG - Anatomy of a Display Template

21

description

Session: Anatomy of a Display Template If you’ve enjoyed working with Data View Web Parts (DVWPs) and XSL in the past, SharePoint 2013’s Display Templates may be just the right thing for you. If you consider yourself a front end coder, they may be just for you as well. Display Templates are a new way to format and display data in SharePoint 2013 for search results, the Content Search Web Part (CSWP) , Refinement Web Parts, and more. Display Templates use HTML and JavaScript rather than XSL to format data on the client side. We can develop our own Display Templates and combine them with third party tools to create rich, powerful content rendering to equal the best Web sites out there. We’ll go through the anatomy of some of the most useful out of the box Display Templates and look at how you can build your own useful customizations.

Transcript of RISPUG - Anatomy of a Display Template

Page 1: RISPUG - Anatomy of a Display Template
Page 2: RISPUG - Anatomy of a Display Template
Page 3: RISPUG - Anatomy of a Display Template
Page 4: RISPUG - Anatomy of a Display Template
Page 5: RISPUG - Anatomy of a Display Template
Page 6: RISPUG - Anatomy of a Display Template
Page 7: RISPUG - Anatomy of a Display Template

One source of data + many display options =

Content Management “Nirvana”

Page 8: RISPUG - Anatomy of a Display Template
Page 9: RISPUG - Anatomy of a Display Template
Page 10: RISPUG - Anatomy of a Display Template

Page 11: RISPUG - Anatomy of a Display Template
Page 12: RISPUG - Anatomy of a Display Template
Page 13: RISPUG - Anatomy of a Display Template

Image Source: SharePoint 2013 Design Manager display templates (MSDN)

http://msdn.microsoft.com/en-us/library/office/jj945138(v=office.15).aspx

Page 14: RISPUG - Anatomy of a Display Template

Co

ntr

ol_

bla

nk. h

tml

Page 15: RISPUG - Anatomy of a Display Template

Item

_Pic

ture

3Li

nes.

htm

l

Page 16: RISPUG - Anatomy of a Display Template

Resource: Useful JavaScript to know when working with SharePoint Display Templates (#SPC3000) by Corey Roth

http://dotnetmafia.com/blogs/dotnettipoftheday/archive/2014/02/26/useful-javascript-for-working-with-sharepoint-display-

templates-spc3000-spc14.aspx

Co

ntr

ol_

List

. htm

l

Page 17: RISPUG - Anatomy of a Display Template
Page 18: RISPUG - Anatomy of a Display Template
Page 19: RISPUG - Anatomy of a Display Template
Page 20: RISPUG - Anatomy of a Display Template

http://msdn.microsoft.com/en-us/library/office/jj945138(v=office.15).aspx

http://technet.microsoft.com/en-us/library/jj944947.aspx

http://dotnetmafia.com/blogs/dotnettipoftheday/archive/2014/02/26/useful-javascript-for-working-with-sharepoint-display-templates-spc3000-spc14.aspx

http://www.dotnetmafia.com/blogs/dotnettipoftheday/archive/2014/02/13/for-tips-for-using-jquery-with-sharepoint-display-templates.aspx

http://channel9.msdn.com/Events/SharePoint-Conference/2014/SPC3000

http://en.share-gate.com/blog/sharepoint-2013-animated-menu-search-display-template

http://en.share-gate.com/blog/image-slider-with-sharepoint-2013-search-results