labs.steveottenad.com

Adding Javascript to SharePoint 2010 Master Page

Including Javascript In SharePoint 2010

Adding scripts in a Sharepoint 2010 Master Page can be accomplished in a couple of different ways. I’d like to focus on what I consider to be both the easiest (once learned) and the most beneficial method, the tag. Keep in mind I am writing this article from the place of a (primarily) front-end developer. This is not geared at back end developers looking to use all of the functionality of the ScriptManager Tag.

Why ScriptManager?

For one, the tag provides you with an easy way to provide a fool-proof path to the script you are looking for. No more “../../../” in your src attribute, or worrying about links breaking as users begin to use your master page on subsites or subsubsites. Secondly, you can easily combine all of your JS together into a “Composite Script”, reducing the number of files you need to download and potentially speeding up your initial loads considerably.

How Do I Use It?

Start by creating an instance of the tag inside your SharePoint 2010 Master Page. You’ll want to leave the parameters on this alone unless you know what you’re doing and have a good reason to change them

<asp:ScriptManager id="ScriptManager" runat="server" EnablePageMethods="false" EnablePartialRendering="true" EnableScriptGlobalization="false" EnableScriptLocalization="true">
	<Scripts>
		<%--Scripts Go Here--%>
	</Scripts> 
</asp:ScriptManager>

Next, you’ll want to add the individual scripts you want to include in the master page. This can be accomplished using the

<asp:ScriptReference>

tag. Simply repeat this tag enough times to cover the desired scripts

<asp:ScriptReference Path="<%$SPUrl:~SiteCollection/Style Library/scripts/jquery-1.5.min.js%>"></asp:ScriptReference>

NOTE: in this example, the “jquery-1.5.min.js” file is stored in a new folder called “Scripts” in the “Style Library”. The

<%$SPUrl:~SiteCollection/%>

is telling sharepoint to grab the URL for the site collection, and will remain valid wherever the site is set up.

Here is a look at it all compiled together:

<asp:ScriptManager id="ScriptManager" runat="server" EnablePageMethods="false" EnablePartialRendering="true" EnableScriptGlobalization="false" EnableScriptLocalization="true">
	<Scripts>
		<%--scripts go here--%>
                <asp:ScriptReference Path="<%$SPUrl:~SiteCollection/Style Library/scripts/jquery-1.5.min.js%>"></asp:ScriptReference>
	</Scripts> 
</asp:ScriptManager>

13 Comments

  1. Maria Fitzsimons says:

    Where do you put the ScriptManager tag in the Masterpage?

  2. anon says:

    Thank you, this post is what I was looking for. So many other sites suggested using Path=”~/Scripts/jquery.js”, but that just wouldn’t work for me on my SharePoint master page.

  3. Lukasz says:

    Thanks, short and straight to the point – exactly what I was looking for.

  4. Sunil says:

    Very useful article.. Thanks

  5. Paul Burns says:

    Hi there, this doesn’t appear to work for me. Below is the exact code that I am using:

    <asp:ScriptReference Path="”>
    <asp:ScriptReference Path="”>

    When I have Fiddler open while refreshing the page, both files are being called as opposed to one call for both.

    Am I doing something wrong here?

    Thanks in advance

    Paul

    • sottenad says:

      Paul, I assume you are looking for the “Composite Script” feature on the Scriptmanager. I did some research into that a while after writing this post and could not get it to work. Im not sure why off the top of my head, but googling around for “Composite Script Scriptmanager” might yield some results. Let me know if you find out though, that seems (on paper anyways) to be a very cool and underutilized feature.

  6. Paul Burns says:

    Sorry the above code did not paste properly:

    <asp:ScriptReference Path="”>
    <asp:ScriptReference Path="”>

  7. Thank you very much. I used this to help me add Google Analytics code to a SharePoint Instance in an enterprise. Appreciate you sharing.

  8. […] <script src=”/Style%20Library/JavaScript/YBBESTCustom.js” type=”text/javascript”></script> will only work for root site for the web application. aka , it will not work for site like http://yourwebapp/sites/yoursite.You should use the scriptlink or using the script manager. […]

  9. […] Adding Javascript to SharePoint 2010 Master Page: 7,339 Views […]

  10. Sue says:

    I put this on my page but …

    <asp:ScriptReference Path="”>

    … I got an error saying the “ScriptManager” is already in use by another control. Any advice in this situation? Thank you.

Leave a Reply