Archive for April 12, 2012

Loading JS files in a SharePoint Online Environment

 

UPDATE: Since I wrote this post the JSOM has been changing a bit. See the changes for the current online model! 

For any of you that don’t follow Wouter van Vugt, he had a great session at the Dutch SPC a while ago about loading JavaScript files in an On Premise SharePoint 2010 Environment. Very cool solutions were discussed however none of them are applicable when having a SharePoint Online environment. It’s true the possibilities are very limited but still some cool techniques can be used to keep amount of scripts loading down to an acceptable level.

ScriptLink

The easiest way to add script to your page from a feature is to use the ScriptLink. By default this control is on every SharePoint Masterpage and by using a <CustomAction> a script can easily be added to the page without the need of changing the MasterPage or Page Layout. The Custom Action to do this can look like this:

<CustomActionLocation=”ScriptLink” ScriptSrc=”~SiteCollection/Scripts/jquery-1.6.min.js” Sequence=”105″ />

This example loads the jQuery library to the page. This approach is a nice one to load Shared Libraries (like jQuery) on every page. Even on the system pages based on the default v4.master the jQuery library is loaded because of this Custom Action. That is an important consideration whether to use this in your solution or not.

ScriptTag

Using the HTML tag <script/> is a good way to always load a script. Actually the SharePoint ScriptLink also renders a <script/> tag eventually. However for this approach the MasterPage needs to be updated and if you want your script to load on system pages (Forms, Views etc.) you also have to edit the default MasterPage which is not a best practice.

Script On Demand

A good way of loading scripts is only load them when you are actually gonna use them. The SharePoint Client OM accommodate you with the SP.SOD (Script On Demand) class. With a few steps we implement this:

1) Deploy your script using a Module (i.e. to the folder ‘/Scripts/MyFile.js’)

2) In the MyFile.js file at the bottom add “SP.SOD.notifyScriptLoaded(‘MyFile.js’);” “SP.SOD.notifyScriptLoadedAndExecuteWaitingJobs(‘MyFile.js’);”

3) On the page where the call to this script is made add “SP.SOD.registerSod(‘MyFile.js’, ‘/Scripts/MyFile.js’);”

4) When the script is needed make a function call like this “SP.SOD.execute(MyFunc, ‘MyFile.js’);” “SP.SOD.execute(‘MyFile.js’, ‘MyFunc’);”

Now the SP.SOD.execute will make sure the Function is execute after the MyFile.js is loaded. At PageLoad this script is not loaded this way.

Script Storage

Because SharePoint Online is bound to SiteCollection level and because we are not able to write to the _layouts folder on the server, the storage of all Script files is important to think about. The logical place after _layouts would be in the Style Library, but there the possibility exist that user are going to mess up your code. In a SharePoint Online environment we can never cover this entirely but a more secure location to store your script would be just in a Folder of the RootWeb. Then people can only touch your code using SP Designer which is more difficult to most users.

Minify your scripts

In order to keep the JS files to a minimum, don’t create too much different JS files and remember to Minify them. The nice VS add-on from Mavention is a very powerful tool to get this done. http://visualstudiogallery.msdn.microsoft.com/04ef7cbc-23dd-49f8-b4a2-ab87885ad065