Referencing javascript files using CustomAction in Sharepoint 2010 Sandboxed Solutions

When you are creating farm solution, it is easy to include javascript file into all site pages using CustomAction.
The main idea is that you add javascript file to _layouts folder and use

  <CustomAction
      Location="ScriptLink"
      ScriptSrc="/_layouts/.../your_javascript_file.js" Sequence="100">

Problem is, in sandboxed solutions you are not allowed to put files into _layouts, and it is not possible to reference Assets files using ScriptSrc.

What else is available to us? Actually, there is one thing – you can use ScriptBlock attribute to add custom javascript.

  <CustomAction
      Location="ScriptLink"
      ScriptBlock="alert('hello');" 
      Sequence="100">

What it means – it means that you can do anything you usually do with javascript. And you can create <script src="..." tags using javascript itself.

Simple example.

  1. Create new Sharepoint 2010 solution.
  2. Add a module (Add -> New Item -> Module), for example JavascriptReferenceTestAssets

  3. Add a javascript file to it (Test.js).

  4. To keep things simple, put there
    alert("Test file loaded!");
    
  5. Now it is time to add CustomAction element. Add new Empty element to project (Add -> New Item -> Empty Element). Name it, for example, JavascriptReferenceAction:

  6. Open Elements.xml inside added element (JavascriptReferenceAction). Put there
    <?xml version="1.0" encoding="utf-8"?>
    <Elements xmlns="http://schemas.microsoft.com/sharepoint/">
      <CustomAction
        Location="ScriptLink"
        ScriptBlock="
          document.write('&lt;script type=&quot;text/javascript&quot; src=&quot;~site/JavascriptReferenceTestAssets/Test.js&quot;&gt;&lt;/' + 'script&gt;');"
        Sequence="100" />
    </Elements>
    

Update: You can actually use ScriptLink="~Site/JavascriptReferenceTestAssets/Test.js" instead of ScriptBlock and it will work like in _layouts.

Notice ~site token inside ScriptBlock. It will be replaced with the server relative url of the current site (SPWeb). Another available token is ~sitecollection, which gives server relative url of current site collection (SPSite). It is useful, if you are deploying your feature to site scope.

Now deploy your solution, and while loading the page the alert should appear.

If you view source code of the page, you should find a bit of javascipt similar to this. The only difference may be the path to the javascript file depending on the site path you deployed your feature to.

document.write('<script type="text/javascript" src="/JavascriptReferenceTestAssets/Test.js"></' + 'script>');

This way you can include arbitrary javascript libraries like jQuery or your custom code.

This entry was posted in Sharepoint and tagged , , . Bookmark the permalink.

3 Responses to Referencing javascript files using CustomAction in Sharepoint 2010 Sandboxed Solutions

  1. Pingback: miguel

  2. Pingback: wayne

  3. Pingback: Stephen

Leave a Reply

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