Christchurch.NET User Group Christchurch SharePoint User Group (C-SPUG)
Display template deep dive spug
-
Upload
dan-adams -
Category
Technology
-
view
152 -
download
1
Transcript of Display template deep dive spug
© 2016 Rightpoint. All Rights Reserved.
Display Template Deep DiveMARCH SPUG 20163/8 /2016
© 2016 Rightpoint. All Rights Reserved.
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
© 2016 Rightpoint. All Rights Reserved.
Introductions
Dan Adams John Ingraffia
© 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!
© 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
© 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!
© 2016 Rightpoint. All Rights Reserved.
Control Template
Item Template
Search Vertical
RefinementPanel
© 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
© 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”
© 2016 Rightpoint. All Rights Reserved.
Into The Weeds!
© 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()
© 2016 Rightpoint. All Rights Reserved.
That’s all Folks!
Questions?