farewell xsl, welcome display templates
DESCRIPTION
Elio Struyf. Farewell XSL, Welcome Display Templates. Elio Struyf. ”I’m a SharePoint consultant with a passion for branding and development”. SharePoint Consultant Xylos Belgium. Contact @eliostruyf www.eliostruyf.com [email protected]. Agenda. The Past & Present - PowerPoint PPT PresentationTRANSCRIPT
Farewell XSL, Welcome Display Templates
Elio Struyf
”I’m a SharePoint consultant with a passion for branding and development”
Elio Struyf
SharePoint ConsultantXylosBelgium
Contact @eliostruyf www.eliostruyf.com [email protected]
Agenda The Past & Present What are Display
Templates? What to do before we start Creating Display Templates Troubleshooting Tips & Tricks
The PastSharePoint 2007 / 2010
Showing the latest documents
Libraries
CQWP
Show the latest documents of various site collections
CQWP
Site CollectionsSearch Core Results
Just again another day with XSL
Here & nowOffice 365 / SharePoint 2013
HTMLComment -
JS
Office 365 – SharePoint 2013• New: Content Search Web Part• Updated: Search Results Web Part• No site collection limitation• HTML & JavaScript
CSWP Enterprise Licence – Office 365 E3 & E4
Show the latest documents of various site collections
Site Collections
Crawl
Search CSWP
ComparisonContent Query WP• Site collection
limitation• XSLT• Instant results• Server Side
Rendering• Client Performance• Minor / major
versions
Content Search WP• No site collection
limitation• Display Templates• Requires a crawl• Client Side Rendering• Server Performance• Only major versions
Query Builder
Let’s welcome display templates
What are Display Templates?• Defines the visual layout of search
results• HTML File JavaScript File• Client side rendering
What does it do?• Uses managed properties• Displays via HTML and JavaScript
File extension
Title + Path
Path
Document summary
Logical structureWeb PartSpecifies which query and templates will be used.
Control TemplateProvides the overall layout how you want to present the results.Ex: list, list with paging, slideshow.
Item TemplateDefines how the item itself needs to be rendered.
Where are they used?
Before we start
What to do before we start?1. Create content2. Crawl content3. Define the managed properties / or use
the auto-created ones4. Crawl content again
Creation process
Creating a Display Template• Mapping the master page gallery• Path: /_catalogs/masterpage/Display
Templates/• Best to start with an existing template• Use an editor of your choice
The end result
Control Display Template
Control Template RecapLoad custom CSS files$includeCSS(this.url, "~sitecollection/_catalogs/masterpage/SPSNL/css/slider.css");
Load custom JavaScript files$includeScript(this.url, "~sitecollection/_catalogs/masterpage/SPSNL/js/slider.js ");
Write JavaScript as comments in the HTML file<!--#_ _#-->
Write your HTML mark-up inside the first <div>
Item Display Template
Item Template RecapProperty Mapping<mso:ManagedPropertyMapping msdt:dt="string">‘Property Name JS' {Property Display Name}:'Managed Property''Picture URL'{Picture URL}:'PublishingImage'</mso:ManagedPropertyMapping>
Get property valuevar pictureURL = $getItemValue(ctx, 'Picture URL');
Using the variable_#= pictureURL =#_
Event Handling
Event Handling RecapUse AddPostRenderCallback / OnPostRender to ensure that control and item HTML content is loadedAddPostRenderCallback(ctx, function(){ // Write here your JavaScript code});
ctx.OnPostRender = [];ctx.OnPostRender.push(function () { // or write it in here });
Troubleshooting
Getting to know the values<xsl:template name=”Debug” match=”Row[@Style='Debug']” mode=”itemstyle”> <xsl:for-each select=”@*”> Property Name: <xsl:value-of select=”name()” /><br /> Value: <xsl:value-of select=”.” /><br /> </xsl:for-each></xsl:template>
Diagnostic Template
Ultimate diagnostic display template
Ultimate diagnostic display templateOffice 365 or future on-premises updates
Reference Mikael Svenson: http://elst.es/1oTLk4j
var folder = list.RootFolder;var props = folder.Properties;props["vti_indexedpropertykeys"] = "UAB1AGIAbABpAHMAaABpAG4AZwBDAGEAdABhAGwAbwBnAFMAZQB0AHQAaQBuAGcAcwA=|SQBzAFAAdQBiAGwAaQBzAGgAaQBuAGcAQwBhAHQAYQBsAG8AZwA=|";props["IsPublishingCatalog"] = "True";folder.Update();
BASE64: PublishingCatalogSettings|IsPublishingCatalog
SharePoint 2007
SharePoint 2010
Display Template Messages
Firefox Firebug / IE Developer Tools / …
Tips & Tricks
Only do your changes in the HTML files Doing changes in JavaScript could end up in corrupt files
Tip 1
Do not modify OOTB display templates, create a copy instead Remember the ItemStyle.xsl, we were
all guilty
Tip 2
Searching where they are located? Do not make it hard, place them in your own project folders.
Tip 3
If you’re writing lots of code Do it in a separated JavaScript file, that way you can easier debug your solutions
Tip 4
Provisioning of display templates?HTML Only publishing site Conversion takes time Needs extra codingJS Quick and easy Leave the HTML in TFS
Tip 5
Check the values and types you retrieve This could save you debugging time
Tip 6
Dare to open the JS files to check syntax errors Because everything is written in HTML comments, it’s hard to see syntax errors
Tip 7
Want to do DOM changes via JavaScript? Use the AddPostRenderCallback method
Tip 8
Keep in mind that it is CSR (client side rendering) Keep it clean Keep it fast
Tip 9
Learn to getting used to JavaScript Very easy to start experimenting Frameworks like jQuery could simplify the process
Tip 10
#SPCSRhttps://github.com/SPCSR
Questions?
Clean Search Results WP Display Templates - http://elst.es/1eClIBQProvisioning Display Templates - http://elst.es/1iGspnc - http://elst.es/1hhpqBjWhat is Required for Display Templates - http://elst.es/1fr8RoVShowing Alternating Rows - http://elst.es/1gE7oIlReplacing the OOTB Small Search Input Box - http://elst.es/1eGeJYyUltimate Diagnostic Display Template - http://elst.es/1fnOyZR
References
THANK YOU