The March 2016 Chicago SharePoint User Group Presentation

1. © 2016 Rightpoint. All Rights Reserved.
Display Template Deep Dive
MARCH SPUG 2016
3/8/2016

2. © 2016 Rightpoint. All Rights Reserved.
Agenda
1. Quick Intro
2. Presentation Guidelines
3. Quick Search Overview
4. 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 Helpers
7. Display Template Gotchas

3. © 2016 Rightpoint. All Rights Reserved.
Introductions
Dan Adams John Ingraffia

4. © 2016 Rightpoint. All Rights Reserved.
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!

5. © 2016 Rightpoint. All Rights Reserved.
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

6. © 2016 Rightpoint. All Rights Reserved.
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!

7. © 2016 Rightpoint. All Rights Reserved.
Control
Template
Item
Template
Search
Vertical
Refinement
Panel

8. © 2016 Rightpoint. All Rights Reserved.
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

9. © 2016 Rightpoint. All Rights Reserved.
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”

10. © 2016 Rightpoint. All Rights Reserved.
Into The Weeds!

11. © 2016 Rightpoint. All Rights Reserved.
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()

12. © 2016 Rightpoint. All Rights Reserved.
That’s all Folks!
Questions?