Embedding your JavaScript into a SharePoint page

A very typical approach for client side development in SharePoint is to throw the code onto the page where you need it. You can alternatively put into the master page, but generally speaking, most code doesn’t need to run on each and every page. The following describes my preferred, tried and true, method of handling this.

Upload the Assets

Say you have some great JavaScript code provided by a developer or blogger, and you want to now use it on your page. First things first, get the JavaScript into your SharePoint site!

Upload the JS file into a library. I generally use SiteAssets, with a small folder structure for organization, like SiteAssets\js, or if there is more, sometimes like SiteAssets\webparts\mywebpartname.

Once the JS is uploaded, we now need a HTML file to reference it. This can be pretty simple HTML file. You can create it on your desktop (create a new text file, and rename the extension to .html) or using SharePoint Designer, you can create it directly in SharePoint. Throw it in the same place as your JS file, or however you have your assets structured.

As an example, we’ll take a block of code from one of my blog posts, we’re going to throw the necessary HTML and JS into the HTML file you created, something like:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<script src="/SiteAssets/Lozzi.Fields.js" type="text/javascript"></script>

<script type="text/javascript">
Lozzi.Fields.disableWithAllowance("Start Date", ["Project Managers"]);
Lozzi.Fields.disable("Task Status");
Lozzi.Fields.hide("% Complete");

This is all the HTML and code needed to run the JS I’m working with. Notice Line 2, the second <script tag. This is the path to the JS file you uploaded into SharePoint. Make sure the path is correct. This block of code above will differ for each and every JS example you work with.

Once the HTML file is saved, navigate to it through your browser and copy the link to the HTML file. You can do this simply by clicking on the file’s ellipses, the …, and copy the URL from there

copy file link

Embed in SharePoint

Ok, now that we have the JS file uploaded, and a HTML file created, let’s embed it in SharePoint! This is the easy part.

Navigate to the page you want to use this code on. Just use your browser and click to go to the page, pretty simple so far right?

Now edit the page: click the cog in the top right and select Edit Page

edit page

Once the page is in edit mode, click Add a Web Part button at the top of a zone, it doesn’t matter too much where. If you don’t have an Add a Web Part button, you’re probably using a wiki page, so click anywhere in the content area where you want add a web part, then click Insert Web Part.

add content editor web part

In the Add web part ribbon, select Media and Content on the left, and then select Content Editor. Click Add to add to your page. You should have something like:

added content editor web part

Notice the Content Editor web part added. Now click the web part, in the top right, and edit the web part.edit web part

In the tool pane on the right, paste in the URL to the HTML file. Click OK.

past html link in content editor

Afterwards, your content editor web part may look empty, or you may see some of your HTML, it depends on what you’re working with. My example, I’m just using JavaScript to hide fields on my page.

save content editor

Save the page and you should be good to go! Your code should fire off and you should see things happening. If not, if you question what’s going on, try using the developer tool bar in your browser, more on how here.

A couple of notes:

  • You may want to modify the Content Editor Web Part’s Chrome Type setting to hide the title from view
  • If you receive the error “Cannot retrieve the URL specified in the Content Link property. For more assistance, contact your site administrator.”, check the URL you’re pasting in. SharePoint can’t find it, make sure it’s valid. Paste it into a new browser window and see if downloads the file.
  • Make sure to structure your JS and HTML files well, you never know who’s going to look at it next.
  • Consider using the URL to the HTML file as a relative URL instead of a absolute URL. How? Consider the following URL is an absolute URL: https://sharepoint/sites/sitename/siteassets/myfile.js. Make it relative by dropping the first part: /sites/sitename/siteassets/myfile.js. This will keep it a wee bit more flexible and migrations in the future should be a little easier.

‘Til next time, Happy SharePointing!

19 thoughts on “Embedding your JavaScript into a SharePoint page

Add yours

  1. Hi, First thanks for posting this. Its very useful for someone doing this for the first time. I am trying to do exactly this to validate certain fields on save action by adding a script. and I add a simple HTML file to SiteAssets folder with my script in it. But when I go into edit page and select “Media and Content” section, the subset that shows up has no “Content Editor” option. But instead has the following: Bing Maps, Embed, File viewer, Highlighted content, Image, Image gallery, Link.

    Can you please tell me if there is any other way to include the script? Thanks!

    1. Ah, it sounds like you’re using modern site, which does NOT support this method. I’ve heard of a 3rd party app/widget you can use to do this, or write your code in a webpart yourself. Not sure what other options there are out there.

      1. Thanks David for the reply. What do you mean by write my own code in a webpart? Can you please expand on this? Thanks.

  2. Hi, this is all working for me, but when I make changes to the .js file I get the old version. Some caching is going on here.
    Any ideas how to force it to load the new version?
    Using ctrl-F5 to refresh does not seem to help.

  3. hello this is really cool stuff thanks!
    It’s not clear to me if the page I am editing in the last step should contain a list or what. the updates just below the Content Editor WPart is related to this post? Following at my best your instructions I ended with a blank page…

    1. Probably got everything wrong, since I created a brand new page for it. I now embedded the CEWP in the page of the already existing list but the view has not been modified at all…

  4. Maybe a dumb question, but why not simply embed the js directly into a SharePoint page using a Script Editor Web Part, rather than uploading .js and .html pages and referencing them in a CEWP? Is the advantage that you can more easily reuse on other pages?

    1. Great question. I lean towards the CEWP approach because then the HTML and JS files can be easily edited (aka troubleshooting) via SharePoint Designer or Windows Explorer. Embedding it all on the page makes this a lot more complex. Also, if you are going to use the same code multiple times it makes it a lot easier to reuse, and update one file for all instances. What do you think?

Leave a Reply

Up ↑

%d bloggers like this: