Meeting #127 Welcome to the Minnesota SharePoint User Group July 8 th, 2015 SharePoint Search and Display Templates Kameron Berget

Meeting #127http://sharepointmn.com

Welcome to the Minnesota SharePoint

User Group

July 8th, 2015

SharePoint Search and Display Templates

Kameron Berget

Donald Donais


Agenda

• MNSPUG Information

• Search and Display Templates

• BREAK

• Search and Display Templates

• Giveaways


User Group Goal / Objectives

Develop and support a local community focused on Microsoft SharePoint Technologies

• Educate user group members about SharePoint Technologies• Transfer knowledge within the community• Communicate best practices• Introduce new products / solutions


MNSPUG Sponsors

Wrox Press (www.wrox.com)

O’Reilly (www.oreilly.com)

Dedicated Sponsors

Avtex (www.avtex.com)

Microsoft (www.microsoft.com)

Annual Sponsor

Sponsorships Levels:• Gold Sponsorship -

$500• Silver Sponsorship -

$250

SharePoint User Group Support

Atomic Data (http://www.atomicdata.com)

http://www.wrox.com/

http://www.oreilly.com/

http://www.avtex.com/

http://www.microsoft.com/

http://www.atomicdata.com/

http://www.atomicdata.com/


MN SharePoint Users Group Website

• SharePoint Resource Documents• SharePoint Resource links• RSS Feeds • Meeting Schedule• Past User Group Presentations• Past User Group Recordings• Sponsorship Information

• http://sharepointmn.com• Email: [email protected]

mailto:[email protected]



Social Networking

• Linked In group – The most interactive… includes job postings… Post Job Posting on the Jobs Discussion page

http://www.linkedin.com/groups?gid=1878792

• Twitter tags - @MNSPUG and #MNSPUG

• Yammer – Minnesota SharePoint Users Group https://www.yammer.com/mnspug/

http://www.linkedin.com/groups?gid=1878792

https://www.yammer.com/mnspug/

https://www.yammer.com/mnspug/


Upcoming Schedule

• Next Meeting August 12th, 2015 – Wendy Neal - SharePoint Usability and Design Tips for Non

Designers Microsoft Technology Center, Edina, MN Check www.SharePointMN.com for updates!

• Ongoing Schedule 2nd Wednesday of every month 9:00 to 11:30 am Microsoft Technical Center – Edina

http://www.sharepointmn.com/


Local and Online EventsMN Women in SharePoint – July 27th, 4 – 6 p.m. Location TBD, TopicVisit the MNWISP Yammer Group - https://www.yammer.com/minnesotawomeninsharepoint#/

Minnesota SharePint – July 28th, Joe Senser’s Sports Grill in Bloomington – 4:30 – 6:30 p.m.http://www.meetup.com/Minnesota-SharePoint-SharePint/events/223727030/

Unbound – August 13th, Ameriprise downtown Minneapolis – Drop by anytime between 8 a.m. to 4 p.m.More information at: https://medium.com/@espnguyen/_unbound-in-minneapolis-8a2829f31549

SharePoint Fest Seattle – August 18 – 20th, 2015http://www.sharepointfest.com/Seattle/ Discount of $200 if use offer code = HAASE200

SharePoint Saturday Twin Cities – Oct 24th at Normandale Community College, Bloomington, MNhttp://spstc.com

Anything Else?

https://www.yammer.com/minnesotawomeninsharepoint#/

http://www.meetup.com/Minnesota-SharePoint-SharePint/events/223727030/

http://www.meetup.com/Minnesota-SharePoint-SharePint/events/223727030/

https://medium.com/@espnguyen/_unbound-in-minneapolis-8a2829f31549

https://medium.com/@espnguyen/_unbound-in-minneapolis-8a2829f31549

http://www.sharepointfest.com/Seattle/

http://www.sharepointfest.com/Seattle/

http://spstc.com/


Evaluations & Giveaways!


Presenters


Kameron Berget• Expecting child #3 New Years Eve!

Foster/Rescue dogs.• @KameronBerget• [email protected]

m• https://spphile.wordpress.com/



https://spphile.wordpress.com/

https://spphile.wordpress.com/


SharePoint 2013 - Search Display Templates


What to Expect


What are we used to when customizing results?

• Content Query Web Part Limited to site collection Had to write XSLT Slots (Similar to Content Search Display Templates)

• Search 2007/2010 XSLT Transformation/Templates to alter results


Challenge/Problem

• We want to get content from anywhere in our farm.• Display the results the way we want.• Create a reusable solution.


Solution? Display Templates!• What are display templates?

A single HTML file. Display templates control which managed properties are shown in the search results and how they

appear in the Web Part. Search results are controlled via a combination of:

• HTML5: Markup • CSS: Style• JavaScript: Logic

– Wait, I need to learn JavaScript??• Advantages

No boundaries Display Templates independent of one another Reusable Easier to debug


Types of Display Templates

• Control Templates Determine the overall structure of how the results are

presented. Includes lists, lists with paging, and slide shows.• Item Templates (Result and Content Search)

Determine how each result in the set is displayed. Includes images, text, video, and other items.

• Filter (Refinement) Templates Determine how each filter option is displayed.


Display Template Structure (Item)

• Template Title <Title>

• Managed Property Mappings <mso:ManagedPropertyMapping msdt:dt="string">

• External Resources(Optional) <script>

• JavaScript 

• HTML Markup


Where do we use these web parts?

• Display templates can only be used with Search web parts. Search Results Content Search Cross-Site Publishing Supported in both SPO and On Premises Both will work with refinement web parts too.


Search Results Content Search

Query Builder

Display specific content

Template StructureTemplate Structure

Template Location

Web part configuration

Reusable/Dynamic

Web part configuration

Template Location

Result Types


Managed Properties

• Display templates rely on Managed Properties to display data within the template.

• Site Columns vs. List Columns Site Columns get Managed properties mapped

automatically. [Predictable] List columns do not. You must create your own

Managed Property after the content has been picked up by the crawl.

• Managed Property schema defines how each value can be used. Text, Date, Number, Refiner, Sorting, Etc. Changes to schema requires full crawl to take effect.

• SPO provides pre-configured managed properties for Refinement and Sorting.

• On Premises deployments require that you setup each property.


Today’s Scenario

Today we are working with Contoso Thrills, an Amusement park company. They have a list of their rides, upcoming events and primary contacts. They would like to display this information in a more user friendly manner for their consumers.

Some data has already been created along with content types and site columns.

SPO

Contoso Thrills

Search

Contoso News


Demo 1

• Introduction to Rides, Events and People Lists• Browse and locate display templates to get familiar with the pieces


Demo 1 - Recap• /_catalogs/masterpage/Display Templates contains all of our display

templates• Display templates are local to the site collection but can be copied

across sites as needed. • All webs (aka Sub-sites) within the Site collection share the same

display templates.• Search Server Web Parts and Templates site collection feature

needs to be activated to gain full functionality.• Publishing Infrastructure needs to activated in order to see and add

display templates.• Design manager gives use a shortcut to our display templates


Demo 2 –Result template

• Modify our search center to show our custom refiners Review properties in Schema

• Create new item result display template Add rating and Height managed

properties

• Create custom hover display template Add publishing image managed

property

• Create custom result type• View our results


Demo 2 –Recap

• SPO gives us preconfigured managed properties for Refinement and Sorting. We cannot create our own. On Premises we create our own.

• The best way to build a new display template = Copy/Paste• Search Results web parts rely on Result types to know how to

render each result. Based on priority.• Hover display templates add nice fly-out capability and the

template structure is much the same.


Demo 3 –Content Search Template

• Create new content search display template Add rating and Height managed

property mappings/slots• Modify the homepage of Contoso

Thrills to add a content search web part for Thrill rides and Family Rides.

• View our results


Demo 3 – Recap

• Content Search display templates differ slightly in their authoring• Content Search display templates promote reusability for popular

item layouts.• The Content Search web part is configured differently than the

search results web part.


Demo 4 – Build custom search page

• Build display template for Events• Review our new search driven home page.


Recap

• Display templates are new and take some getting used to.• Results hinge on crawl freshness.

Cannot control in SPO (See tips) Certain requirements may require continuous crawl

• We have several different kind of display templates. Although similar in structure, they each provide a different unique purpose.

• Result type property sync is required when property mappings change. Haven’t seen this for SPO.


Tips

• COPY/PASTE• Use your favorite web designer to mockup your HTML.• JavaScript alert function.

alert(“message”)• Console.log(“message”)• Bad syntax/errors give more friendly messages.• You might be cached!• Due to the way display templates are structured, you get very little intellisense.

Try breaking out chunks of your code into your favorite IDE when writing JS to avoid typos.

• Reindex Site/List


Resources Slide

• Microsoft intro to display templates https://

msdn.microsoft.com/en-us/library/office/jj945138.aspx#bk_introduction

• SharePoint 2013 Search Display Template and Query Rules – Matthew McDermott https

://channel9.msdn.com/Events/SharePoint-Conference/2014/SPC322 • Changing the look of Search using Display Templates and CSR

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

https://msdn.microsoft.com/en-us/library/office/jj945138.aspx#bk_introduction



https://channel9.msdn.com/Events/SharePoint-Conference/2014/SPC322






Last But Not Least

• Please Fill Out Evaluations• Drawings for Giveaways• Online Participants Eval

http://1drv.ms/1ctXdcB

• Today’s Presenters:• Kameron Berget

Thanks for coming!