JS Link – Hello World

JS Link and CSR (Client-Side Rendering) for SharePoint 2013 are often used interchangeably, but they aren’t exactly. The JS Link web part property is a way to add CSR template overrides to your page.

This quick post walks through a ‘Hello World’ scenario that doesn’t do any CSR, but makes sure your JavaScript file is working and that the JS Link reference can find it.

I’ve got a longer post on more of the details and use of JS Link for CSR in SharePoint 2013, but this is a quick ‘Hello World’ version for JS Link. There are three main components:

  1. Create a JavaScript file
    This file, saved as [yourFileName.js] literally only needs to have a single line:
       alert(“Hello World”);
  2. Put the file in a location where your JS Link reference can see it.
    • One common location to upload to is the Master Page Gallery though other locations can be used. This does require higher permissions on the site, however.
    • Using this ‘Hello World’ approach is a great way to test the location of your file, the permissions to that file and the JS Link string (next step) used to get everything working.
    • If you are a site collection administrator you can use SharePoint Designer 2013 to view ‘All Files’ in the Master Page Gallery and add a new JavaScript file that way.
  3. Point your web part to the JavaScript file.
    You are changing the properties of a web part here. Technically you can edit the web part of a standard view for a list, but I generally don’t do that.
    1. For this example create a page on the site and drop a web part from your test app (list or library) on to that page.
    2. Edit the page and Edit Web Part. At the far bottom of the web part properties, under the Miscellaneous grouping is the ‘JS Link’ property.
    3. Enter the following and click OK.
      ~site/_catalogs/masterpage/[yourFileName].js
  4. If everything is working as planned, as soon as you click ‘OK’ you should get a JavaScript alert that says ‘Hello World’.

Now, you can start playing with CSR or other functionality with the JS Link. Check out my Primer post… more examples are coming shortly. Smile

6 comments

  1. Hi
    Thanks, a useful post, however I couldn’t get it to work initially, It took me a while to realise when I copied the alert(“Hello World”); from this page that the quote marks are the fancy left & right double quotes that Word likes to use and therefore they it didn’t work in javascript… once I changed them to ordinary double quotes it worked nicely.
    Cheers,
    Iain

  2. Make sure the file extension is .JS, otherwise it will not work. Some users in my site collection save javascript files as .TXT but then can’t figure out why their JS links don’t work. Only .JS file extensions are recognized.

  3. What if it don’t works? I have any result.
    I have Sharepoint 2013 Foundation. Is this a problem?
    There are some settings to make javascript working or it should works anyway?

    1. If CSR/JS Link isn’t working, nothing changes from the view. There is no error – it just doesn’t work. Common issues are: The token used in the JSLink property pointing to the correct location, making sure you’re using the internal name of the field you’re overriding, or trying something too complex where the javascript has errors. The Minimal Download Strategy setting (site collection setting) can also interfere in some cases.

  4. Is it possible to some site settings block this functionality?
    On other site (in the same site collection) everything works properly.

    1. Hmm. Generally no, there aren’t any site settings that intentionally block the functionality. Minimal download strategy (on by default) can sometimes interfere though.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.