Farewell XSL, Welcome Display Templates

”I’m a SharePoint consultant with a passion for branding and development” Elio Struyf SharePoint Consultant Xylos Belgium

 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

Show the latest documents of various site collections Site Collections Crawl SearchCSWP

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

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

Diagnostic Template

Ultimate diagnostic display template

Reference Mikael Svenson: 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

#SPCSR

Questions?

Clean Search Results WP Display Templates - Provisioning Display Templates What is Required for Display Templates - Showing Alternating Rows - Replacing the OOTB Small Search Input Box Ultimate Diagnostic Display Template - References

THANK YOU