Issues with Adding JavaScript to your SharePoint Online Page

Adding JavaScript code to your page is a simple yet effective way to start customising your SharePoint sites. You can use JavaScript to manipulate pretty much anything in SharePoint. This is a fundamental technique that should be in the arsenal of all SharePoint Consultants, developers, administrators etc. You will find many articles online showing you how to do this like this great one by David Lozzi.

The Issue

Recently, I was trying to add some JS customisations to my SharePoint Online page (on Office 365) using this very technique. However, I came across some really weird issues. A little background, I was trying to use Mark Rackley’s awesome Hillbilly Tabs to get a few of my webparts to appear in tabs on the Home page of a sub site in my Site Collection. I was successful for the most part. The issues I was seeing was when I clicked the site logo on the top right hand side to navigate back to the home page. My JS would break all references for some reason.

The Diagnosis

This perplexed me quite a bit. I had double checked if the JS files were all stored in the correct location (I had stored them in the Site Assets library of the sub site in a JS folder) – /sites/teamsite/SiteAssets/js. Using dev tools (F12) in the browser, I saw that SharePoint was trying to reference the top level site (/sites/SiteAssets/js). When I navigated to the page using certain links, the JS loaded just fine without any issues and the tabs were appearing.

The Smoking Gun

Facts:

  • JavaScript definitely worked, but sporadically depending on how I landed on the page
  • I tried using CEWP to embed the JS and also tried the script editor as well
  • I tried embedding the JS directly into the page as well
  • The URL of the page itself was either /teamsite or /teamsite/pages/default.aspx
  • I was using relative URLs when referencing the JS file in my CEWP
  • Managed navigation was turned on for the sites

The Discovery

After a bit of digging around and searching the web, I came across Waldek Mastykarz’s article about Managed Navigation and how it works. This made me realise that the references I was using in the JS files all needed to be absolute URLs and not relative. Once I changed all the JS, CSS and image file references from relative to absolute, everything started working just like normal

The Conclusion

JavaScript is an effective way to customise your SharePoint sites. Using Managed Navigation is definitely the way to do navigation in SharePoint. The performance you get out of Managed Navigation compared to Structured is too great to ignore. Using relative URLs is also an acceptable way to use URLs – SharePoint itself starts converting absolute URLs to relative in certain places. However, using all all of the above will give you the issues as above. So the solution is to use absolute URLs when embedding JS on SharePoint sites that use Managed Navigation.

 

Author: kiwithatflew

I am a SharePoint Consultant, moved to the Bay Area, USA from New Zealand. I am an avid technology enthusiast, a reader, a photographer, a travel and now, a blogger.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s