Customizing Search Experiences in SP2013Kerem YuceturkProgram Manager

SPC063

You will…

Learn how to customize experiences in Search Centers and portals that use Content Search

Understand Display Templates and Result Types

What we want to build…

Content Search

Scenario: Show dynamic content

Site Collection A

Content Query Web Part

Site Collection B

Site Collection C

Site Collection

List of articles/documents

Site Collection A

SearchSearch Crawl

Content Search Web

Part

Site Collection B

Site Collection C

Site Collection D

List of articles/documentsRecommendationsPopular items

Content Search 30,000 ft. view

Get the results: Query Builder

Show the results: Display Templates

Get the results

Query Builder: Connecting you to results

Create queries Preview Results

Full screen query builder to create/test queries

Fully integrated with result sources and query rules

Query variables are substituted at query time

    <xsl:template name="dvt_1.noKeyword">        <span class="srch-description2">            <xsl:choose>                <xsl:when test="$IsFixedQuery">                    <xsl:value-of select="$NoFixedQuery" />                </xsl:when>                <xsl:otherwise>                    <xsl:value-of select="$NoKeyword" />                </xsl:otherwise>            </xsl:choose>        </span>    </xsl:template>      <!-- When empty result set is returned from search -->    <xsl:template name="dvt_1.empty">        <div class="srch-results">             <xsl:if test="string-length($SrchRSSLink) &gt; 0 and $ShowActionLinks">                <a type="application/rss+xml" href ="{$SrchRSSLink}" title="{$SrchRSSText}" id="SRCHRSSL" class="srch-ext-action-margin">                    <img style="vertical-align: middle;" border="0" src="/_layouts/images/rss.gif" alt=""/>                    <xsl:text disable-output-escaping="yes">&amp;nbsp;</xsl:text>                    <xsl:value-of select="$SrchRSSText"/>                </a>                <xsl:if test="string-length($SearchProviderLink) &gt; 0">                    |                    <a href ="{$SearchProviderLink}" title="{$SearchProviderText}" class="srch-ext-action-margin" >                        <img style="vertical-align: middle;" border="0" src="/_layouts/images/searchfolder.png" alt=""/>                        <xsl:text disable-output-escaping="yes">&amp;nbsp;</xsl:text>                        <xsl:value-of select="$SearchProviderText"/>                    </a>                </xsl:if>            </xsl:if>        </div> 

Hello, Display TemplatesCraft the perfect look in HTML &

JavaScript

What a display template does

Displays them using HTML and JavaScript instead of XSL

File Extension Title Preview Image

Document SummaryPath

Retrieves managed properties

Layers for display templatesControl Item

Also:Filter, Group and Hover Panel

Content Search in actionDemo

• Rolled up documents from another site collection

• Changed how they look using OOB display templates

• Put up a slideshow for pictures on the site• Showed personalized results

Demo Summary: Content Search in action

• Place them in the Master Page Gallery• Copy one of the existing ones for best

results• Use the editor of your choice

Your own display templates

Custom display templatesDemo

• Copied an existing display template• Added a new managed property• Customized the information based on a

JavaScript condition

Demo Summary: Custom display templates

Search Center

Search Web Parts are all new in SP2013

Meet the family

Quick test… raise your hand when you’re done

you ready?

Find the PDF

Now find Joanna’s project

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

What’s the problem?

Hello, Result TypesTailor the look of important types of

results.

Result Types

Conditions match result properties to identify a “type” of result.

A Display Template changes the look of that type of result.

Result Types “Out of the box”Demo

Great!But how do I build one?

1. Plumb any properties you need into search

2. Create the look you want with a Display Template

3. Hook up the template to a Result Type4. Try it out with a search!

Building a Result Type

ScenarioYour marketing department has “Marketing Campaigns”.

ProblemFinding the right document is difficult and time consuming.

SolutionMake documents stand out, and show additional fields.

Let’s give it a shot

Custom Result Type for Marketing CampaignsDemo

1. Created a list with custom site columns2. New display template, add our code3. New result type, add condition, use

template

See the magic.

Summary: Building a custom result type

What if something goes wrong?

…debugging display templates

Debugging display templatesDemo

Take hints from the error messages in the UI.

For runtime errors, use browser debugging or Visual Studio with breakpoints and watches.

Use the “ctx.CurrentItem” object to see what’s returned from search.

Summary: Debugging

Whew, and we’re done

Look what we built in an hour!

You…Learned how to customize experiences in Search Centers and portals that use Content Search

Now understand Display Templates and Result Types

HOLs and events @ SPCHOL031 – Introduction to Search in SharePoint 2013HOL034 – Exploring Search Query Rules in SharePoint 2013HOL032 – Extending the Search experience in SharePoint 2013HOL033 – People Search in SharePoint 2013HOL035 – SharePoint Server 2013 Search Connectors and Using BCSHOL039 – Designing a SharePoint 2013 siteHOL041 – Hands on with Content Search web part in SharePoint 2013

Meet a Search SME

Ask questions, meet the community and share knowledge!

Mon-Thu @ Exhibit Hall

Hands on Labs

Daily 10:30am-6:30pm @ HOL Lab Lounge

Ask the Experts

Discuss search!

Wed 6:15PM @ Ask the Experts Lounge

Related Sessions @ SPCMon 2:00pm - SPC259 - What's New in Search for SharePoint 2013Speakers: Glen Anderson, Cem Aykan

Tue 3:15pm - SPC230 - Step by Step: Building Search Driven Applications with SharePoint 2013 - Speaker: Scot Hillier

Wed 9:00am - SPC143 - Making Great Search Based Applications with Query Rules in SharePoint 2013 - Speaker: Pedro DeRose

Wed 1:45 PM – SPC246 - Using jQuery and Display Templates to create modern Web Sites - Speaker: Ethan Gur-esh, Jeremy Kelley

Tue 10:30 AM – SPC019 - Best Practices for Designing Websites with SharePoint 2013 - Speaker: Ethan Gur-esh, Alyssa Levitz

Please complete an evaluation form

Evaluate this session now on MySPC using your laptop or mobile device: http://myspc.sharepointconference.com

MySPC

© 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.