Create Tailored Search Results through Customized Display Templates
17
SPSNYC 2014 Create Tailored Search Results w/ Display Templates SHAREPOINT SATURDAY NYC– JULY 26, 2014 MIKE ORYSZAK BLOG: WWW.MIKEORYSZAK.COM TWITTER: @NEXT_CONNECT LINKEDIN: HTTP://WWW.LINKEDIN.COM/IN/MICHAELORYSZAK
-
Upload
mike-oryszak -
Category
Technology
-
view
531 -
download
1
description
Create Tailored Search Results with custom display templates for SharePoint 2013.
Transcript of Create Tailored Search Results through Customized Display Templates
SPSNYC 2014
Create Tailored Search Results w/ Display TemplatesSHAREPOINT SATURDAY NYC– JULY 26, 2014
MIKE ORYSZAK
BLOG: WWW.MIKEORYSZAK.COMTWITTER: @NEXT_CONNECT LINKEDIN: HTTP://WWW.LINKEDIN.COM/IN/MICHAELORYSZAK
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
THANK YOU EVENT SPONSORS
• Please visit them and inquire about their products & services
• To win prizes make sure to get your bingo card stamped by ALL sponsors
Session Overview
Display Template Basics
How to Work With Display Templates
Examples:Example 1 – Simple tweak of standard resultsExample 2 – Show results in a grid viewExample 3 – Working with People ResultsExample 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
4
5
Display Template BasicsCREATE TAILORED SEARCH RESULTS W/ DISPLAY TEMPLATES
BLOG: WWW.MIKEORYSZAK.COM TWITTER: @NEXT_CONNECT LINKEDIN: HTTP://WWW.LINKEDIN.COM/IN/MICHAELORYSZAK
SPSNYC 2014
Display Template BasicsWhat are Display Templates?
Display templates are used by the Search related Web Parts to render search results in SharePoint 2013They 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
6
SPSNYC 2014
Display Template BasicsLocated in the Master Page Gallery at the Site Collection level
Under Display Templates/Search
ConsiderationsCan map a drive to the gallery or upload the files individuallyPair 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
7
SPSNYC 2014
Display Template BasicsProcess 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
8
SPSNYC 2014
Display Template BasicsProcess Flow with Result Type Rules
Central Control FileSpecified item template shows all items formatted the same way
BLOG: WWW.MIKEORYSZAK.COM TWITTER: @NEXT_CONNECT LINKEDIN: HTTP://WWW.LINKEDIN.COM/IN/MICHAELORYSZAK
9
10
ExamplesCREATE TAILORED SEARCH RESULTS W/ DISPLAY TEMPLATES
BLOG: WWW.MIKEORYSZAK.COM TWITTER: @NEXT_CONNECT LINKEDIN: HTTP://WWW.LINKEDIN.COM/IN/MICHAELORYSZAK
SPSNYC 2014
Tweak Standard ResultsSimple 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
11
SPSNYC 2014
Grid View ResultsModify the results to show them in a grid/table view
BLOG: WWW.MIKEORYSZAK.COM TWITTER: @NEXT_CONNECT LINKEDIN: HTTP://WWW.LINKEDIN.COM/IN/MICHAELORYSZAK
12
SPSNYC 2014
Working With People ResultsWorking with People results and presence
BLOG: WWW.MIKEORYSZAK.COM TWITTER: @NEXT_CONNECT LINKEDIN: HTTP://WWW.LINKEDIN.COM/IN/MICHAELORYSZAK
13
SPSNYC 2014
Customizing the Hover PanelProvide layout changes to the hover panel
BLOG: WWW.MIKEORYSZAK.COM TWITTER: @NEXT_CONNECT LINKEDIN: HTTP://WWW.LINKEDIN.COM/IN/MICHAELORYSZAK
14
16
CloseoutCREATE TAILORED SEARCH RESULTS W/ DISPLAY TEMPLATES
BLOG: WWW.MIKEORYSZAK.COM TWITTER: @NEXT_CONNECT LINKEDIN: HTTP://WWW.LINKEDIN.COM/IN/MICHAELORYSZAK
17
Questions?
BLOG: WWW.MIKEORYSZAK.COM TWITTER: @NEXT_CONNECT LINKEDIN: HTTP://WWW.LINKEDIN.COM/IN/MICHAELORYSZAK
SPSNYC 2014
ResourcesDesign Manager display templates
http://msdn.microsoft.com/en-us/library/office/jj945138(v=office.15).aspx
Display Template Referencehttp://technet.microsoft.com/en-us/library/jj944947(v=office.15).aspx
Add Presence to SharePoint Search Results – Matthew McDermotthttp://www.ableblue.com/blog/archive/2013/06/05/add-presence-to-sharepoint-search-results/
Search Results in Grid Viewhttp://mikeoryszak.com/2014/05/search-results-in-grid-view/
My Search Blog Postshttp://mikeoryszak.com/tag/search/
BLOG: WWW.MIKEORYSZAK.COM TWITTER: @NEXT_CONNECT LINKEDIN: HTTP://WWW.LINKEDIN.COM/IN/MICHAELORYSZAK
18
