88 articles and 831 comments as of Monday, November 24th, 2014

Sunday, March 14, 2010

Referencing Javascript Files with SharePoint 2010 Custom Actions using SciptSrc

This entry is part of a series, Evolutions 2010 Conference»

Editor’s Note: In a new series of articles, I will be introducing you to some of the speakers who will be presenting at the SharePoint Evolutions Conference in London next month, pointing you to articles on their sites, offering downloads of white papers, and publishing articles on their subjects of expertise. — Mark Miller

Jan Tielens, Presenting at SharePoint 2010 Evolutions Conference

If you’re an avid reader of Jan Tielen’s blog, you are probably aware of the fact that using Javascript plus SharePoint is a very powerful combination. In SharePoint 2007 there were a couple of techniques you could use to make sure your Javascript files would be referenced by SharePoint pages:

  1. Add the Script reference to the Master Page
  2. Use a Delegate Control (e.g. the AdditionalPageHead)
  3. Dynamically through code, e.g. in a Web Part

Although all those techniques work, and will still work in SharePoint 2010, they all have some limitations.

The first technique requires you to build a custom Master Page, which may be a little overkill just to get a Javascript file referenced. Additionally, your custom Master Page is not used on Application Pages (unless you use the Superbranding trick).

The second is my favorite one in SharePoint 2007, but the requirement is that the Master Page you’re using has the corresponding Delegate Control, and you need to have either a Server Control or Web User Control that generates HTML to reference the script.

The third technique is nice if you only want to use the script when the Web Part is on the page, otherwise you’ll have to put the Web Part on every page where you’d like to reference the script.

SharePoint 2010 is adding another very interesting technique to this list; using the ScriptSrc attribute of the CustomAction element in a Feature. Check the following Feature Elements file:

<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
<CustomAction
ScriptSrc="JSDemo/jquery-1.4.2.js"
Location="ScriptLink"
Sequence="100"
>
</CustomAction>
</Elements>

The first important thing to notice is that the CustomAction element contains the ScrptSrc attribute that points in this example to the jQuery Javascript library. The jQuery library is added to the /_layouts folder in the SharePoint Root, in a folder called JSDemo (the /_layouts/ prefix is added automatically). By the way, adding files to the /_layouts folder is very easy in a SharePoint project in Visual Studio 2010, using a Mapped Folder

The second important attribute is the Location; it must be set to ScriptLink so the Javascript file is referenced in the head element of the page. Optionally you can specify a Sequence attribute to determine the in which order the script references will be added (if you have multiple). When Feature is activated, it results in the following HTML:

document.write

<script type="text/javascript" src="http://weblogs.asp.net/_layouts/jsdemo/jquery-1.4.2.min.js?rev=EAku7lY97C3Kgrd9LPWhrg%3D%3D"></' + 'script>

It’s important to mention that adding a reference to a script using this technique only works for scripts stored in the /_LAYOUTS folder in the SharePoint Root, so unfortunately it’s not possible to do something like this:

<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
<CustomAction
ScriptSrc="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"
Location="ScriptLink"
Sequence="100"
>
</CustomAction>
</Elements>

Besides the ScriptSrc attribute, you can also use the ScriptBlock attribute to render a script inline. The following example shows an annoying message box every time a pages load:

<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
<CustomAction
ScriptSrc="JSDemo/jquery-1.4.2.min.js"
Location="ScriptLink"
Sequence="100"
>
</CustomAction>
<CustomAction
Location="ScriptLink"
ScriptBlock="$(document).ready(function() {
alert('jQuery is loaded!!'); });"
Sequence="101"
>
</CustomAction>
</Elements>

Unfortunately the ScriptSrc attribute doesn’t work very well in combination with Sandboxed Solutions: you can’t add files to the SharePoint Root using Sandboxed Solutions, and the ScriptSrc attribute requires the referenced script to be in the SharePoint Root’s /_layouts folder. I’m still figuring out a nice way to add for example the jQuery library to a SharePoint site, only using a Sandboxed Solution.

If I’m successful, you’ll can definitely read more about it in a future post! :-)

This article was originally published on Jan’s blog.

Guest Author: Jan Tielens

Jan Tielens is a .NET Architect and Trainer at U2U. He focuses on Information Worker technologies including SharePoint and Office.

Jan is a Microsoft Most Valuable Professional (MVP) for Office SharePoint Server and he is well known in the SharePoint community as the author of the SmartPart. You can read his weblog at http://weblogs.asp.net/jan and follow him via twitter at http://twitter.com/jantielens.

Bookmark and Share
 

Please Join the Discussion

4 Responses to “Referencing Javascript Files with SharePoint 2010 Custom Actions using SciptSrc”
  1. Nice, Jan. Thanks for investigating this approach. On almost every SharePoint build I’ve been involved with, I need to create a custom master page, so I just add my script references in the master pgae. However, I think the feature approach could be useful when building no-code solutions that are deployed through a feature.

    How does this work if the site already includes jQuery–is there a check or does jQuery get loaded twice?

  2. farid says:

    Nice Article. I created a feature to deploy the jquery script and all was working fine but now I can’t insert a picture from Sharepoint with the Asset Picker dialog. i got this error:

    Line: 3377
    Char: 5
    Error: ’style’ is null or not an object’
    Code: 0
    Url: …../cmssitemanager.js

    is there a solution for this?

  3. djeeg says:

    Hi Jan,

    I have made a sandbox solution that grabs jQuery from either a CDN (Microsoft or Google) or a document library (http://spc3.codeplex.com/). It also attempts to get around the problem of document.ready() not working if you try to dynamically load the library.

    Regards

  4. Naren says:

    Hi Jan, I tried your <Custom ScriptSrc="" approach., but i could n't make it, the error is "Cannot make a cache safe URL for "myscript.js", file not found. Please verify that the file exists under the layouts directory. " but i kept the file myscript.js inside SHarepoint Layouts Mapped folder oly of my visual webpart project. please help me to add my custom .js file to SP 2010.

Subscribe without commenting

Speak and you will be heard.

We check comments hourly.
If you want a pic to show with your comment, go get a gravatar!