Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Â
Developing SP 2013 Display Templates
1. TriSPUG
Create Tailored Search
Results w/ Display Templates
TRIANGLE SHAREPOINT USER GROUP â JULY 1, 2014
MIKE ORYSZAK
BLOG: WWW.MIKEORYSZAK.COM
TWITTER: @NEXT_CONNECT
LINKEDIN: HTTP://WWW.LINKEDIN.COM/IN/MICHAELORYSZAK
2. TriSPUG
About Me
ï¶Senior SharePoint Solution Architect w/ B&R Solutions
ï¶Microsoft SharePoint Server MVP (5-time)
ï¶Leader for Triangle SharePoint User Group (TriSPUG)
ï¶Dev and Architect with MS stack since 1996
ï¶Working with SharePoint since 2002
ï¶Raleigh-Durham, NC
BLOG: WWW.MIKEORYSZAK.COM
TWITTER: @NEXT_CONNECT
LINKEDIN: HTTP://WWW.LINKEDIN.COM/IN/MICHAELORYSZAK
2
3. TriSPUG
Session
Overview
ï¶Display Template Basics
ï¶How to Work With Display Templates
ï¶Examples:
ï¶Example 1 â Simple tweak of standard results
ï¶Example 2 â Show results in a grid view
ï¶Example 3 â Working with People Results
ï¶Example 4 â Customize the hover panel
ï¶Closeout
Target Audience:
Developers interested in creating
customized result displays or building
search driving applications.
BLOG: WWW.MIKEORYSZAK.COM
TWITTER: @NEXT_CONNECT
LINKEDIN: HTTP://WWW.LINKEDIN.COM/IN/MICHAELORYSZAK
3
5. TriSPUG
Display Template Basics
ï¶What are Display Templates?
ï¶Display templates are used by the Search related Web Parts to render search results in SharePoint 2013
ï¶They leverage client side code to allow for dynamic injection and rendering
ï¶Important to note: Part of the Design Manager layer
BLOG: WWW.MIKEORYSZAK.COM
TWITTER: @NEXT_CONNECT
LINKEDIN: HTTP://WWW.LINKEDIN.COM/IN/MICHAELORYSZAK
5
6. TriSPUG
Display Template Basics
ï¶Located in the Master Page Gallery at the Site Collection level
ï¶Under Display Templates/Search
ï¶Considerations
ï¶Can map a drive to the gallery or upload the files individually
ï¶Pair of files for each template; html and javascript
ï¶You work with html, the javascript file is generated when the html file is saved to the gallery
ï¶Display Template Reference:
ï¶http://technet.microsoft.com/en-us/library/jj944947(v=office.15).aspx
BLOG: WWW.MIKEORYSZAK.COM
TWITTER: @NEXT_CONNECT
LINKEDIN: HTTP://WWW.LINKEDIN.COM/IN/MICHAELORYSZAK
6
7. TriSPUG
Display Template Basics
ï¶Process Flow with Result Type Rules
ï¶Dynamically selects which template to use on each item based on the rules
BLOG: WWW.MIKEORYSZAK.COM
TWITTER: @NEXT_CONNECT
LINKEDIN: HTTP://WWW.LINKEDIN.COM/IN/MICHAELORYSZAK
7
8. TriSPUG
Display Template Basics
ï¶Process Flow with Result Type Rules
ï¶Central Control File
ï¶Specified item template shows all items formatted the same way
BLOG: WWW.MIKEORYSZAK.COM
TWITTER: @NEXT_CONNECT
LINKEDIN: HTTP://WWW.LINKEDIN.COM/IN/MICHAELORYSZAK
8
10. TriSPUG
Tweak Standard Results
ï¶Simple example to get us started, minor format changes to existing display
BLOG: WWW.MIKEORYSZAK.COM
TWITTER: @NEXT_CONNECT
LINKEDIN: HTTP://WWW.LINKEDIN.COM/IN/MICHAELORYSZAK
10
11. TriSPUG
Grid View Results
ï¶Modify the results to show them in a grid/table view
BLOG: WWW.MIKEORYSZAK.COM
TWITTER: @NEXT_CONNECT
LINKEDIN: HTTP://WWW.LINKEDIN.COM/IN/MICHAELORYSZAK
11
12. TriSPUG
Working With People Results
ï¶Working with People results and presence
BLOG: WWW.MIKEORYSZAK.COM
TWITTER: @NEXT_CONNECT
LINKEDIN: HTTP://WWW.LINKEDIN.COM/IN/MICHAELORYSZAK
12
13. TriSPUG
Customizing the Hover Panel
ï¶Provide layout changes to the hover panel
BLOG: WWW.MIKEORYSZAK.COM
TWITTER: @NEXT_CONNECT
LINKEDIN: HTTP://WWW.LINKEDIN.COM/IN/MICHAELORYSZAK
13