![Page 1: Take your display template skills to the next level](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55a7a2231a28ab4d438b48b0/html5/thumbnails/1.jpg)
Sorry, something went wrong
![Page 2: Take your display template skills to the next level](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55a7a2231a28ab4d438b48b0/html5/thumbnails/2.jpg)
Elio Struyf
![Page 3: Take your display template skills to the next level](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55a7a2231a28ab4d438b48b0/html5/thumbnails/3.jpg)
”I’m a consultant with a passion
for branding and development”
Contact
@eliostruyf
www.eliostruyf.com
Elio StruyfSenior SharePoint Consultant
![Page 4: Take your display template skills to the next level](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55a7a2231a28ab4d438b48b0/html5/thumbnails/4.jpg)
Thank You to Our Sponsors!
![Page 5: Take your display template skills to the next level](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55a7a2231a28ab4d438b48b0/html5/thumbnails/5.jpg)
• Getting syntax highlighting
• Sorting results
• Refreshing results
• Loading more results
• Grouping results
![Page 6: Take your display template skills to the next level](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55a7a2231a28ab4d438b48b0/html5/thumbnails/6.jpg)
Intellisense
Syntax Highlighting
![Page 7: Take your display template skills to the next level](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55a7a2231a28ab4d438b48b0/html5/thumbnails/7.jpg)
HTML
Comment - JS
![Page 8: Take your display template skills to the next level](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55a7a2231a28ab4d438b48b0/html5/thumbnails/8.jpg)
![Page 9: Take your display template skills to the next level](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55a7a2231a28ab4d438b48b0/html5/thumbnails/9.jpg)
![Page 10: Take your display template skills to the next level](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55a7a2231a28ab4d438b48b0/html5/thumbnails/10.jpg)
![Page 11: Take your display template skills to the next level](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55a7a2231a28ab4d438b48b0/html5/thumbnails/11.jpg)
what comes next?object.tostring()object.tostring()object.getId() or object.GetId()
![Page 12: Take your display template skills to the next level](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55a7a2231a28ab4d438b48b0/html5/thumbnails/12.jpg)
![Page 13: Take your display template skills to the next level](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55a7a2231a28ab4d438b48b0/html5/thumbnails/13.jpg)
![Page 14: Take your display template skills to the next level](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55a7a2231a28ab4d438b48b0/html5/thumbnails/14.jpg)
![Page 15: Take your display template skills to the next level](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55a7a2231a28ab4d438b48b0/html5/thumbnails/15.jpg)
Options & Methods
• Copy & paste
• Removing the comments and adding them back before saving
• Create JS display templates
• Create a separate JavaScript file
• SynWrite supports multiple lexers in one file
• Is there another option?
![Page 16: Take your display template skills to the next level](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55a7a2231a28ab4d438b48b0/html5/thumbnails/16.jpg)
Srch.U.registerRenderTemplateByName
Srch.U.getRenderTemplateCollectionSrch.U.getRenderTemplateByName
![Page 17: Take your display template skills to the next level](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55a7a2231a28ab4d438b48b0/html5/thumbnails/17.jpg)
Creating a retrieval function
1. Create a function in the script block
2. Write your code in this function
3. Register your function with: registerRenderTemplateByName
4. Call your function with: getRenderTemplateCollection
![Page 18: Take your display template skills to the next level](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55a7a2231a28ab4d438b48b0/html5/thumbnails/18.jpg)
![Page 19: Take your display template skills to the next level](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55a7a2231a28ab4d438b48b0/html5/thumbnails/19.jpg)
![Page 20: Take your display template skills to the next level](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55a7a2231a28ab4d438b48b0/html5/thumbnails/20.jpg)
![Page 21: Take your display template skills to the next level](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55a7a2231a28ab4d438b48b0/html5/thumbnails/21.jpg)
![Page 22: Take your display template skills to the next level](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55a7a2231a28ab4d438b48b0/html5/thumbnails/22.jpg)
![Page 23: Take your display template skills to the next level](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55a7a2231a28ab4d438b48b0/html5/thumbnails/23.jpg)
![Page 24: Take your display template skills to the next level](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55a7a2231a28ab4d438b48b0/html5/thumbnails/24.jpg)
![Page 25: Take your display template skills to the next level](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55a7a2231a28ab4d438b48b0/html5/thumbnails/25.jpg)
![Page 26: Take your display template skills to the next level](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55a7a2231a28ab4d438b48b0/html5/thumbnails/26.jpg)
![Page 27: Take your display template skills to the next level](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55a7a2231a28ab4d438b48b0/html5/thumbnails/27.jpg)
![Page 28: Take your display template skills to the next level](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55a7a2231a28ab4d438b48b0/html5/thumbnails/28.jpg)
Adding sort actions to your
display templates
![Page 29: Take your display template skills to the next level](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55a7a2231a28ab4d438b48b0/html5/thumbnails/29.jpg)
![Page 30: Take your display template skills to the next level](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55a7a2231a28ab4d438b48b0/html5/thumbnails/30.jpg)
![Page 31: Take your display template skills to the next level](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55a7a2231a28ab4d438b48b0/html5/thumbnails/31.jpg)
#One -
![Page 32: Take your display template skills to the next level](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55a7a2231a28ab4d438b48b0/html5/thumbnails/32.jpg)
REST API - Sortable_api/search/query?querytext='*'&sortlist=‘Created:ascending'
![Page 33: Take your display template skills to the next level](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55a7a2231a28ab4d438b48b0/html5/thumbnails/33.jpg)
REST API – Not sortable_api/search/query?querytext='*'&sortlist=‘Title:ascending'
![Page 34: Take your display template skills to the next level](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55a7a2231a28ab4d438b48b0/html5/thumbnails/34.jpg)
![Page 35: Take your display template skills to the next level](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55a7a2231a28ab4d438b48b0/html5/thumbnails/35.jpg)
#Two -
![Page 36: Take your display template skills to the next level](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55a7a2231a28ab4d438b48b0/html5/thumbnails/36.jpg)
Adding your sorting options
d: 0 ascendingd: 1 descending
![Page 37: Take your display template skills to the next level](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55a7a2231a28ab4d438b48b0/html5/thumbnails/37.jpg)
How to implement something like this
![Page 38: Take your display template skills to the next level](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55a7a2231a28ab4d438b48b0/html5/thumbnails/38.jpg)
![Page 39: Take your display template skills to the next level](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55a7a2231a28ab4d438b48b0/html5/thumbnails/39.jpg)
![Page 40: Take your display template skills to the next level](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55a7a2231a28ab4d438b48b0/html5/thumbnails/40.jpg)
Refreshing your results
Could be useful when building dashboard pages
Interval
Manually
![Page 41: Take your display template skills to the next level](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55a7a2231a28ab4d438b48b0/html5/thumbnails/41.jpg)
![Page 42: Take your display template skills to the next level](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55a7a2231a28ab4d438b48b0/html5/thumbnails/42.jpg)
![Page 43: Take your display template skills to the next level](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55a7a2231a28ab4d438b48b0/html5/thumbnails/43.jpg)
By default you have paging
![Page 44: Take your display template skills to the next level](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55a7a2231a28ab4d438b48b0/html5/thumbnails/44.jpg)
What if you could do this
![Page 45: Take your display template skills to the next level](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55a7a2231a28ab4d438b48b0/html5/thumbnails/45.jpg)
![Page 46: Take your display template skills to the next level](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55a7a2231a28ab4d438b48b0/html5/thumbnails/46.jpg)
Maximum of 50 items
![Page 47: Take your display template skills to the next level](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55a7a2231a28ab4d438b48b0/html5/thumbnails/47.jpg)
Another way to achieve it
Result container
1. Result 12. Result 23. Result 34. Result 4
Search Result Web Part
Hidden container
1. Result 12. Result 2
Move results
Load moreLoad moreLoad more
1. Result 32. Result 4
http://elst.es/1xiOUVL
![Page 48: Take your display template skills to the next level](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55a7a2231a28ab4d438b48b0/html5/thumbnails/48.jpg)
Where is the grouping option?
![Page 49: Take your display template skills to the next level](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55a7a2231a28ab4d438b48b0/html5/thumbnails/49.jpg)
Content Query Web Part
![Page 50: Take your display template skills to the next level](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55a7a2231a28ab4d438b48b0/html5/thumbnails/50.jpg)
![Page 51: Take your display template skills to the next level](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55a7a2231a28ab4d438b48b0/html5/thumbnails/51.jpg)
What needs to be done?
#One - Control display templateCreate a new object to store each retrieved item
#Two - Item display templateRetrieve the managed property values
Place each item in the grouping object
#Three - Control display templateDisplay the results from that object
![Page 52: Take your display template skills to the next level](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55a7a2231a28ab4d438b48b0/html5/thumbnails/52.jpg)
![Page 53: Take your display template skills to the next level](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55a7a2231a28ab4d438b48b0/html5/thumbnails/53.jpg)
![Page 54: Take your display template skills to the next level](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55a7a2231a28ab4d438b48b0/html5/thumbnails/54.jpg)
https://github.com/SPCSR/
http://www.eliostruyf.com
![Page 55: Take your display template skills to the next level](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55a7a2231a28ab4d438b48b0/html5/thumbnails/55.jpg)
![Page 56: Take your display template skills to the next level](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55a7a2231a28ab4d438b48b0/html5/thumbnails/56.jpg)
”I’m a consultant with a passion
for branding and development”
Contact
@eliostruyf
www.eliostruyf.com
Elio StruyfSenior SharePoint Consultant