Transcript Farewell XSL, Welcome Display Templates

Farewell XSL,
Welcome Display Templates
Elio Struyf
SharePoint Consultant
Xylos
Belgium
Contact
@eliostruyf
www.eliostruyf.com
[email protected]
”I’m a SharePoint consultant
with a passion for branding
and development”

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
CQWP
Libraries
Show the latest documents of
various site collections
CQWP
Search Core Results
Site Collections
Just again another day with XSL
Here & now
Office 365 / SharePoint 2013
Comment -
HTML
JS
Office 365 – SharePoint 2013
CSWP  Enterprise Licence – Office 365 E3 & E4
Show the latest documents of
various site collections
Crawl
Search
Site Collections
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
Document summary
Path
Logical structure
Specifies which query
and templates will be
used.
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
var folder = list.RootFolder;
var props = folder.Properties;
props["vti_indexedpropertykeys"] =
"UAB1AGIAbABpAHMAaABpAG4AZwBDAGEAdABhAGwAbwBnAFMAZQB0AHQAaQBuAGcAcwA
=|SQBzAFAAdQBiAGwAaQBzAGgAaQBuAGcAQwBhAHQAYQBsAG8AZwA=|";
props["IsPublishingCatalog"] = "True";
folder.Update();
BASE64: PublishingCatalogSettings|IsPublishingCatalog
Reference Mikael Svenson: http://elst.es/1oTLk4j
SharePoint 2007
SharePoint 2010
Display Template Messages
Tips & Tricks
Tip 1
Only do your changes in the HTML files
 Doing changes in JavaScript could end up in
corrupt files
Tip 2
Do not modify OOTB display templates, create a
copy instead
 Remember the ItemStyle.xsl, we were all guilty
Tip 3
Searching where they are located?
 Do not make it hard, place them in your own
project folders.
Tip 4
If you’re writing lots of code
 Do it in a separated JavaScript file, that way you
can easier debug your solutions
Tip 5
Provisioning of display templates?
HTML
 Only publishing site
 Conversion takes time
 Needs extra coding
JS
 Quick and easy
 Leave the HTML in TFS
Tip 6
Check the values and types you retrieve
 This could save you debugging time
Tip 7
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 8
Want to do DOM changes via JavaScript?
 Use the AddPostRenderCallback method
Tip 9
Keep in mind that it is CSR (client side rendering)
 Keep it clean
 Keep it fast
Tip 10
Learn to getting used to JavaScript
 Very easy to start experimenting
 Frameworks like jQuery could simplify the
process
#SPCSR
https://github.com/SPCSR
Questions?
References
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
THANK YOU