Create Tailored Search Results w/ Display Templates

SPSATL 2014

Create Tailored Search Results w/ Display TemplatesSHAREPOINT SATURDAY ATLANTA – JUNE 21, 2013MIKE ORYSZAK

BLOG: WWW.MIKEORYSZAK.COMTWITTER: @NEXT_CONNECT LINKEDIN: HTTP://WWW.LINKEDIN.COM/IN/MICHAELORYSZAK

SPSATL 2014

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

Scan the QR code for a chance to win a prize!

BLOG: WWW.MIKEORYSZAK.COM TWITTER: @NEXT_CONNECT LINKEDIN: HTTP://WWW.LINKEDIN.COM/IN/MICHAELORYSZAK

2

3 SharePoint Saturday Atlanta3 |SharePoint Saturday Atlanta

Please thank our sponsors!Platinum Sponsors


Please thank our sponsors!Gold Sponsors


Please thank our sponsors!Silver Sponsors


Lunch Snack

SharePint

Please thank our sponsors!Item & Event Sponsors

Speaker Shirts Attendee Shirts

Abel Solutions

Speaker Dinner

SPSATL 2014

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.


7

8SPSATL 2014

Display Template BasicsCREATE TAILORED SEARCH RESULTS W/ DISPLAY TEMPLATES


SPSATL 2014 9

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


SPSATL 2014 10

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


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



SPSATL 2014 11

Display Template BasicsProcess Flow with Result Type Rules

Dynamically selects which template to use on each item based on the rules


SPSATL 2014 12

Display Template BasicsProcess Flow with Result Type Rules

Central Control FileSpecified item template shows all items formatted the same way


13SPSATL 2014

ExamplesCREATE TAILORED SEARCH RESULTS W/ DISPLAY TEMPLATES


SPSATL 2014 14

Tweak Standard ResultsSimple example to get us started, minor format changes to existing display


SPSATL 2014 15

Grid View ResultsModify the results to show them in a grid/table view


SPSATL 2014 16

Working With People ResultsWorking with People results and presence


SPSATL 2014 17

Customizing the Hover PanelProvide layout changes to the hover panel


19SPSATL 2014

CloseoutCREATE TAILORED SEARCH RESULTS W/ DISPLAY TEMPLATES


20SPSATL 2014

Questions?


SPSATL 2014 21

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/






http://www.ableblue.com/blog/archive/2013/06/05/add-presence-to-sharepoint-search-results/

http://www.ableblue.com/blog/archive/2013/06/05/add-presence-to-sharepoint-search-results/

http://mikeoryszak.com/2014/05/search-results-in-grid-view/

http://mikeoryszak.com/2014/05/search-results-in-grid-view/

http://mikeoryszak.com/tag/search/

http://mikeoryszak.com/tag/search/


Max Lager’s – 320 Peachtree Street NE Right after the event ends First drink is on The Intersect Group The valet is located one block south of

Max Lager’s on Baker and Peachtree at White Oak Kitchen & Cocktails (WOKC). Bring in your ticket for validation

See the SPSATL Website for more info and directions

Join us for SharePint


SharePint Directions

Documents

Create Tailored Search Results w/ Display Templates