You Are Here:   Guide To Porteo Intranet Separator Skip Navigation LinksInstallation

​JSLinks Installation     

The install of JSLinks is the same for all SharePoint versions (2013, 2016, 2019, O365)

  • Unzip provided JSLinks.zip package to a temporary folder in your computer.
  • Copy the jslink file and other assets if provided (stylesheets, images, etc) in the top level site's Site Assets or Style Library libraries.
    It is a good practice to create a folder and copy the files in it, to keep different jslinks in separate containers.
  • Within the web part you want to style, open web part properties and go all the way to the bottom​, under "miscelaneous",​ and put in the link to your jslink file.
    WebPartUrlJSLink.PNG

 

JSLink URLs and Tokens


When you are constructing your JSLink URL, there are a number of tokens you can take advantage of:

~site                              – reference to the current SharePoint site (or "Web")
~sitecollection              – reference to the current SharePoint site collection (or "Site")
~layouts                        – version specific reference to the web application Layouts folder (so it will automatically swap out /_layouts/14 or /_layouts/15 for you)
~sitecollectionlayouts – reference to the layouts folder in the current site collection (e.g. /sites/team/_layouts/15)
~sitelayouts                  – reference to the layouts folder in the current site (e.g. /sites/teams/subsite/_layouts/15)


This allows you to easily make sure that your JSLink files are targeted correctly (whether you are provisioning them to a specific library, or want to make sure your _layouts URL is constructed appropriately).

You can also apply more than one JSLink reference at a time by separating each reference with the pipe | symbol.
So if you wanted to include two custom JSLink files on a field you might use the following attribute:

JSLink="~sitecollectionlayouts/MJH/JSLink1.js|~sitecollectionlayouts/MJH/JSLink2.js"



Still have questions? We’re happy to help!