Farewell XSL, Welcome Display Templates
description
Transcript of Farewell XSL, Welcome Display Templates
![Page 1: Farewell XSL, Welcome Display Templates](https://reader035.fdocuments.in/reader035/viewer/2022062501/56815c5e550346895dca632c/html5/thumbnails/1.jpg)
Farewell XSL, Welcome Display Templates
Elio Struyf
![Page 2: Farewell XSL, Welcome Display Templates](https://reader035.fdocuments.in/reader035/viewer/2022062501/56815c5e550346895dca632c/html5/thumbnails/2.jpg)
”I’m a SharePoint consultant with a passion for branding and development”
Elio Struyf
SharePoint ConsultantXylosBelgium
Contact @eliostruyf www.eliostruyf.com [email protected]
![Page 3: Farewell XSL, Welcome Display Templates](https://reader035.fdocuments.in/reader035/viewer/2022062501/56815c5e550346895dca632c/html5/thumbnails/3.jpg)
Agenda The Past & Present What are Display
Templates? What to do before we start Creating Display Templates Troubleshooting Tips & Tricks
![Page 4: Farewell XSL, Welcome Display Templates](https://reader035.fdocuments.in/reader035/viewer/2022062501/56815c5e550346895dca632c/html5/thumbnails/4.jpg)
The PastSharePoint 2007 / 2010
![Page 5: Farewell XSL, Welcome Display Templates](https://reader035.fdocuments.in/reader035/viewer/2022062501/56815c5e550346895dca632c/html5/thumbnails/5.jpg)
Showing the latest documents
Libraries
CQWP
![Page 6: Farewell XSL, Welcome Display Templates](https://reader035.fdocuments.in/reader035/viewer/2022062501/56815c5e550346895dca632c/html5/thumbnails/6.jpg)
![Page 7: Farewell XSL, Welcome Display Templates](https://reader035.fdocuments.in/reader035/viewer/2022062501/56815c5e550346895dca632c/html5/thumbnails/7.jpg)
Show the latest documents of various site collections
CQWP
Site CollectionsSearch Core Results
![Page 8: Farewell XSL, Welcome Display Templates](https://reader035.fdocuments.in/reader035/viewer/2022062501/56815c5e550346895dca632c/html5/thumbnails/8.jpg)
Just again another day with XSL
![Page 9: Farewell XSL, Welcome Display Templates](https://reader035.fdocuments.in/reader035/viewer/2022062501/56815c5e550346895dca632c/html5/thumbnails/9.jpg)
Here & nowOffice 365 / SharePoint 2013
![Page 10: Farewell XSL, Welcome Display Templates](https://reader035.fdocuments.in/reader035/viewer/2022062501/56815c5e550346895dca632c/html5/thumbnails/10.jpg)
HTMLComment -
JS
![Page 11: Farewell XSL, Welcome Display Templates](https://reader035.fdocuments.in/reader035/viewer/2022062501/56815c5e550346895dca632c/html5/thumbnails/11.jpg)
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
![Page 12: Farewell XSL, Welcome Display Templates](https://reader035.fdocuments.in/reader035/viewer/2022062501/56815c5e550346895dca632c/html5/thumbnails/12.jpg)
Show the latest documents of various site collections
Site Collections
Crawl
Search CSWP
![Page 13: Farewell XSL, Welcome Display Templates](https://reader035.fdocuments.in/reader035/viewer/2022062501/56815c5e550346895dca632c/html5/thumbnails/13.jpg)
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
![Page 14: Farewell XSL, Welcome Display Templates](https://reader035.fdocuments.in/reader035/viewer/2022062501/56815c5e550346895dca632c/html5/thumbnails/14.jpg)
Query Builder
![Page 15: Farewell XSL, Welcome Display Templates](https://reader035.fdocuments.in/reader035/viewer/2022062501/56815c5e550346895dca632c/html5/thumbnails/15.jpg)
Let’s welcome display templates
![Page 16: Farewell XSL, Welcome Display Templates](https://reader035.fdocuments.in/reader035/viewer/2022062501/56815c5e550346895dca632c/html5/thumbnails/16.jpg)
What are Display Templates?• Defines the visual layout of search
results• HTML File JavaScript File• Client side rendering
![Page 17: Farewell XSL, Welcome Display Templates](https://reader035.fdocuments.in/reader035/viewer/2022062501/56815c5e550346895dca632c/html5/thumbnails/17.jpg)
What does it do?• Uses managed properties• Displays via HTML and JavaScript
File extension
Title + Path
Path
Document summary
![Page 18: Farewell XSL, Welcome Display Templates](https://reader035.fdocuments.in/reader035/viewer/2022062501/56815c5e550346895dca632c/html5/thumbnails/18.jpg)
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.
![Page 19: Farewell XSL, Welcome Display Templates](https://reader035.fdocuments.in/reader035/viewer/2022062501/56815c5e550346895dca632c/html5/thumbnails/19.jpg)
Where are they used?
![Page 20: Farewell XSL, Welcome Display Templates](https://reader035.fdocuments.in/reader035/viewer/2022062501/56815c5e550346895dca632c/html5/thumbnails/20.jpg)
Before we start
![Page 21: Farewell XSL, Welcome Display Templates](https://reader035.fdocuments.in/reader035/viewer/2022062501/56815c5e550346895dca632c/html5/thumbnails/21.jpg)
What to do before we start?1. Create content2. Crawl content3. Define the managed properties / or use
the auto-created ones4. Crawl content again
![Page 22: Farewell XSL, Welcome Display Templates](https://reader035.fdocuments.in/reader035/viewer/2022062501/56815c5e550346895dca632c/html5/thumbnails/22.jpg)
Creation process
![Page 23: Farewell XSL, Welcome Display Templates](https://reader035.fdocuments.in/reader035/viewer/2022062501/56815c5e550346895dca632c/html5/thumbnails/23.jpg)
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
![Page 24: Farewell XSL, Welcome Display Templates](https://reader035.fdocuments.in/reader035/viewer/2022062501/56815c5e550346895dca632c/html5/thumbnails/24.jpg)
The end result
![Page 25: Farewell XSL, Welcome Display Templates](https://reader035.fdocuments.in/reader035/viewer/2022062501/56815c5e550346895dca632c/html5/thumbnails/25.jpg)
Control Display Template
![Page 26: Farewell XSL, Welcome Display Templates](https://reader035.fdocuments.in/reader035/viewer/2022062501/56815c5e550346895dca632c/html5/thumbnails/26.jpg)
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>
![Page 27: Farewell XSL, Welcome Display Templates](https://reader035.fdocuments.in/reader035/viewer/2022062501/56815c5e550346895dca632c/html5/thumbnails/27.jpg)
Item Display Template
![Page 28: Farewell XSL, Welcome Display Templates](https://reader035.fdocuments.in/reader035/viewer/2022062501/56815c5e550346895dca632c/html5/thumbnails/28.jpg)
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 =#_
![Page 29: Farewell XSL, Welcome Display Templates](https://reader035.fdocuments.in/reader035/viewer/2022062501/56815c5e550346895dca632c/html5/thumbnails/29.jpg)
Event Handling
![Page 30: Farewell XSL, Welcome Display Templates](https://reader035.fdocuments.in/reader035/viewer/2022062501/56815c5e550346895dca632c/html5/thumbnails/30.jpg)
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 });
![Page 31: Farewell XSL, Welcome Display Templates](https://reader035.fdocuments.in/reader035/viewer/2022062501/56815c5e550346895dca632c/html5/thumbnails/31.jpg)
Troubleshooting
![Page 32: Farewell XSL, Welcome Display Templates](https://reader035.fdocuments.in/reader035/viewer/2022062501/56815c5e550346895dca632c/html5/thumbnails/32.jpg)
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>
![Page 33: Farewell XSL, Welcome Display Templates](https://reader035.fdocuments.in/reader035/viewer/2022062501/56815c5e550346895dca632c/html5/thumbnails/33.jpg)
Diagnostic Template
![Page 34: Farewell XSL, Welcome Display Templates](https://reader035.fdocuments.in/reader035/viewer/2022062501/56815c5e550346895dca632c/html5/thumbnails/34.jpg)
Ultimate diagnostic display template
![Page 35: Farewell XSL, Welcome Display Templates](https://reader035.fdocuments.in/reader035/viewer/2022062501/56815c5e550346895dca632c/html5/thumbnails/35.jpg)
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
![Page 36: Farewell XSL, Welcome Display Templates](https://reader035.fdocuments.in/reader035/viewer/2022062501/56815c5e550346895dca632c/html5/thumbnails/36.jpg)
SharePoint 2007
![Page 37: Farewell XSL, Welcome Display Templates](https://reader035.fdocuments.in/reader035/viewer/2022062501/56815c5e550346895dca632c/html5/thumbnails/37.jpg)
SharePoint 2010
![Page 38: Farewell XSL, Welcome Display Templates](https://reader035.fdocuments.in/reader035/viewer/2022062501/56815c5e550346895dca632c/html5/thumbnails/38.jpg)
Display Template Messages
Firefox Firebug / IE Developer Tools / …
![Page 39: Farewell XSL, Welcome Display Templates](https://reader035.fdocuments.in/reader035/viewer/2022062501/56815c5e550346895dca632c/html5/thumbnails/39.jpg)
Tips & Tricks
![Page 40: Farewell XSL, Welcome Display Templates](https://reader035.fdocuments.in/reader035/viewer/2022062501/56815c5e550346895dca632c/html5/thumbnails/40.jpg)
Only do your changes in the HTML files Doing changes in JavaScript could end up in corrupt files
Tip 1
![Page 41: Farewell XSL, Welcome Display Templates](https://reader035.fdocuments.in/reader035/viewer/2022062501/56815c5e550346895dca632c/html5/thumbnails/41.jpg)
Do not modify OOTB display templates, create a copy instead Remember the ItemStyle.xsl, we were
all guilty
Tip 2
![Page 42: Farewell XSL, Welcome Display Templates](https://reader035.fdocuments.in/reader035/viewer/2022062501/56815c5e550346895dca632c/html5/thumbnails/42.jpg)
Searching where they are located? Do not make it hard, place them in your own project folders.
Tip 3
![Page 43: Farewell XSL, Welcome Display Templates](https://reader035.fdocuments.in/reader035/viewer/2022062501/56815c5e550346895dca632c/html5/thumbnails/43.jpg)
If you’re writing lots of code Do it in a separated JavaScript file, that way you can easier debug your solutions
Tip 4
![Page 44: Farewell XSL, Welcome Display Templates](https://reader035.fdocuments.in/reader035/viewer/2022062501/56815c5e550346895dca632c/html5/thumbnails/44.jpg)
Provisioning of display templates?HTML Only publishing site Conversion takes time Needs extra codingJS Quick and easy Leave the HTML in TFS
Tip 5
![Page 45: Farewell XSL, Welcome Display Templates](https://reader035.fdocuments.in/reader035/viewer/2022062501/56815c5e550346895dca632c/html5/thumbnails/45.jpg)
Check the values and types you retrieve This could save you debugging time
Tip 6
![Page 46: Farewell XSL, Welcome Display Templates](https://reader035.fdocuments.in/reader035/viewer/2022062501/56815c5e550346895dca632c/html5/thumbnails/46.jpg)
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
![Page 47: Farewell XSL, Welcome Display Templates](https://reader035.fdocuments.in/reader035/viewer/2022062501/56815c5e550346895dca632c/html5/thumbnails/47.jpg)
Want to do DOM changes via JavaScript? Use the AddPostRenderCallback method
Tip 8
![Page 48: Farewell XSL, Welcome Display Templates](https://reader035.fdocuments.in/reader035/viewer/2022062501/56815c5e550346895dca632c/html5/thumbnails/48.jpg)
Keep in mind that it is CSR (client side rendering) Keep it clean Keep it fast
Tip 9
![Page 49: Farewell XSL, Welcome Display Templates](https://reader035.fdocuments.in/reader035/viewer/2022062501/56815c5e550346895dca632c/html5/thumbnails/49.jpg)
Learn to getting used to JavaScript Very easy to start experimenting Frameworks like jQuery could simplify the process
Tip 10
![Page 50: Farewell XSL, Welcome Display Templates](https://reader035.fdocuments.in/reader035/viewer/2022062501/56815c5e550346895dca632c/html5/thumbnails/50.jpg)
#SPCSRhttps://github.com/SPCSR
![Page 51: Farewell XSL, Welcome Display Templates](https://reader035.fdocuments.in/reader035/viewer/2022062501/56815c5e550346895dca632c/html5/thumbnails/51.jpg)
Questions?
![Page 52: Farewell XSL, Welcome Display Templates](https://reader035.fdocuments.in/reader035/viewer/2022062501/56815c5e550346895dca632c/html5/thumbnails/52.jpg)
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
![Page 53: Farewell XSL, Welcome Display Templates](https://reader035.fdocuments.in/reader035/viewer/2022062501/56815c5e550346895dca632c/html5/thumbnails/53.jpg)
THANK YOU