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 info@estruyf.be

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