display template deep dive spug

© 2016 Rightpoint. All Rights Reserved.

Display Template Deep DiveMARCH SPUG 20163/8 /2016


Agenda1. Quick Intro2. Presentation Guidelines3. Quick Search Overview4. Display Template 10,000 ft. View

1. What is a Control Template?2. What is an Item Template?

5. Into the weeds!1. AKA lets do the fun bit which is actually building the carousel

6. Helpful Functions and Helpers7. Display Template Gotchas


Introductions

Dan Adams John Ingraffia


Presentation Guidelines• We are all here after work because we

want to be, so lets try and have some fun!

• Feel free to raise a hand or give a quick shout throughout the presentation if you have a question or want us to touch on something again

• If a question and it is too in depth or specific, we may ask that we circle back to the question after the presentation

• There is plenty of pizza and drinks so feel free to get up and get some!


Quick Search Overview

Admin Creates Site Content Types & Site

Columns

Users Use The Amazing System (Create and

Upload Content)

The search crawler looks through all of the

allowed sites and stores the content in Crawled &

Managed Properties

All of this data is then stored within the Search Index which acts as a reservoir of data which can be utilized via Search, Search REST API, and Search Web Parts


Display Template 10,000 ft. view• Search web parts are driven by…

‣ A Result Source: Tells the search index what data to return (aka your query)‣ A Control Template: Acts as the container / wrapper for the content‣ An Item Template: Determines how each individual search result is rendered

• Display Templates are built using standard web technologies‣ HTML‣ CSS‣ JavaScript‣ jQuery‣ Angular‣ Knockout‣ Etc.

• You are free to use your favorite frameworks and libraries!


Control Template

Item Template

Search Vertical

RefinementPanel


Metaphor: Carton of Eggs• The Result source would say something

along the lines of SPContentType=“Egg” AND HasFace=“True”

• The Content By Search Web Part Settings would allow us to say only render the first 11 items / eggs

• The Control Template is the carton / container

• The Item Template is represented by each egg / result


Syntax To Call Managed Properties$getItemValue(ctx, “managed prop or display name”

• This call will actually change a property to the correct data type based upon the auto generated suffix that is created for Managed Property via SharePoint Site Column Creation

‣ i.e DiscussionLastUpdatedOWSDATE• This call is able to change a property to

the correct type even if the managed property is set to type text

ctx.CurrentItem.ManagedProp• This call returns the text value of the

property• This can return data differently than

the get item value call. For instance calling a hyperlink or picture field will return the data as “url, display name”


Into The Weeds!


The Gotchas• Calling anything on a null value that has not

been handled‣ i.e. calling .length on a null property will

cause your entire Content By Search web part to error out

• ctx.CurrentItem and $getItemValue can return different results

‣ As an example: a hyperlink / picture field will return url, displayName and the other method will return the hyperlinked displayName

• Check to see if there is a function for what you need before reinventing the wheel

‣ i.e. writing a huge switch statement for document icon to find out later you could have just used: Srch.U.getIconUrlByFileExtension()


That’s all Folks!

Questions?

display template deep dive spug

Technology