Farewell XSL, Welcome Display Templates

”I’m a SharePoint consultant with a passion for branding and development”

Elio Struyf

SharePoint Consultant

Xylos

Belgium

Contact

@eliostruyf

www.eliostruyf.com

info@estruyf.be

The Past & Present

What are Display Templates?

What to do before we start

Creating Display Templates

Troubleshooting

Tips & Tricks

The Past

SharePoint 2007 / 2010

Showing the latest documents

Libraries

CQWP

Show the latest documents of various site collections

CQWP

Site Collections

Search Core Results

Just again another day with XSL

Here & now

Office 365 / SharePoint 2013

HTML

Comment -JS

Office 365 – SharePoint 2013

CSWP Enterprise Licence – Office 365 E3 & E4

Show the latest documents of various site collections

Site Collections

Crawl

Search CSWP

Comparison

Content 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?

What does it do?

File extension Title + Path

Path

Document summary

Logical structure

Specifies which query and templates will beused.

Provides the overall layout how

you want to present the results.

Ex: list, list with paging, slideshow.

Defines how the item

itself needs to be

rendered.

Where are they used?

Before we start

What to do before we start?

Creation process

Creating a Display Template

The end result

Control Display Template

Control Template Recap

Item Display Template

Item Template Recap

Event Handling

Event Handling Recap

Troubleshooting

Getting to know the values<xsl:template name=”Debug” match=”Row[@Style='Debug']” mode=”itemstyle”>

<xsl:for-each select=”@*”>

<xsl:value-of select=”name()” /><br />

xsl:value-of select=”.” /><br />

</xsl:for-each>

</xsl:template>

Diagnostic Template

Ultimate diagnostic display template

Ultimate diagnostic display template

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

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 coding

JS 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/1eClIBQ

Provisioning Display Templates - http://elst.es/1iGspnc -http://elst.es/1hhpqBj

What is Required for Display Templates - http://elst.es/1fr8RoV

Showing Alternating Rows - http://elst.es/1gE7oIl

Replacing the OOTB Small Search Input Box - http://elst.es/1eGeJYy

Ultimate Diagnostic Display Template - http://elst.es/1fnOyZR

References

THANK YOU