I'm generally a big fan of using SharePoint as a CMS, then doing my own thing on the front end. SharePoint 2013 has a really neat way of doing this for individual lists, but here are some of my personal tips on how to do this better.
1. Setting the JS Link Path Field
When setting the path to the JS Link file, DO NOT USE THE FULL PATH. I spent a long time pulling my hair out on this one, but you must use one of the following options at the font of the path:
1. Setting the JS Link Path Field
When setting the path to the JS Link file, DO NOT USE THE FULL PATH. I spent a long time pulling my hair out on this one, but you must use one of the following options at the font of the path:
- ~site
- ~sitecollection
- ~layouts
- ~siteLayouts
- ~siteCollectionLayouts
Do not set the BaseViewID and ListTemplateType at any stage. I've only ever had issues with clashing JS Link files and web parts on a single page whenever I've tried to be diligent and set these values correctly. Leaving them blank seems to work better than anything else.
3. Running Extra Scripts
To do some post rendering magic, like moving things around or kicking off a slideshow, use the command:
overrideCtx.OnPostRender = setupWebPart;This will fire off the aforementioned function AFTER everything has been rendered, so you won't need a separate JS file for this, and it's all nicely encapsulated for reuse somewhere else. Obviously there will be occasions where you want to reuse the same code in other places, so this isn't always the case.
4. JS Link Template Object
In JS Link you create an override object and have to intrinsically know what are the possible fields you can override. These are:
overrideCtx.OnPostRender = setupWebPart;This will fire off the aforementioned function AFTER everything has been rendered, so you won't need a separate JS file for this, and it's all nicely encapsulated for reuse somewhere else. Obviously there will be occasions where you want to reuse the same code in other places, so this isn't always the case.
4. JS Link Template Object
In JS Link you create an override object and have to intrinsically know what are the possible fields you can override. These are:
- View
- Header
- Body
- Footer
- Group
- Item
- Fields
- OnPreRender
- OnPostRender
And that's about it. I'll add to this list if I come across anything more magical which I think I might forget.