Enable JavaScript Intellisense for SharePoint Development

One of my favorite new additions to SharePoint 2010 is the client side object model.  You can easily reference it using an assembly for Silverlight or managed code development, which means you get all the Intellisense goodness.  However, there is no Intellisense displayed for client side object model code in JavaScript.  It turns out that it’s pretty easy to add.

I am told this will be published as part of the SharePoint Guidance (https://www.microsoft.com/spg) and is due to publish Monday.  I can’t wait to see what’s in this release!

When you are debugging SharePoint code in Visual Studio 2010 and attached to the site, you will see the following scripts loaded.

Notice the SP.debug.js file there.  That is the debug version of SP.js which is where much of the client side object model is kept.  When you code against this at design-time, you don’t have Intellisense, but SharePoint automagically brings it into context so that it’s there at runtime.  The trick, then, is tricking Visual Studio into bringing the script into the design-time view.

JavaScript Intellisense In a Page

If you are creating an Application Page in Visual Studio 2010, or using the Site Page or Page Layout capabilities from the CKS Development Tools Edition, the process is pretty much the same.  In the PageHead content placeholder of the application page, or the PlaceHolderAdditionalPageHead content placeholder of the page layout or site page, add the following code:

 <% #if FOO %>
<script type="text/javascript" src="/_layouts/SP.debug.js" />
<% #endif %>

You might be wondering, “what the heck is FOO?”  Normally, conditional compilation will look for things that actually exist, like DEBUG.  However, we are using a marker that we know doesn’t exist but still causes Visual Studio to download SP.debug.js anyway.  The result is that you get Intellisense just as you expect.

(note: the example in this screen shot doesn’t work… but I am trying to find out just what the SP.ULS.log method is intended to do:) )

BONUS CODE:

Because the code that you want to execute might be lazy-loaded, you need to wait until that script has finished loading before you attempt to execute against it.  The SharePoint client object model provides the ExecuteOrDelayUntilScriptLoaded function for this purpose.  Within the head section, add your code that will be called when the SP.js library is finished loading.  Here is an example from the SharePointDevWiki on the Client Side Object Model that demonstrates this concept.

       ExecuteOrDelayUntilScriptLoaded(Initialize, "SP.js");

      var site;
      var context;
      function Initialize() {
          context = SP.ClientContext.get_current();
          site = context.get_web();
          context.load(site, "Title");
          context.executeQueryAsync(Succeeded, Failed);
      }
      function Succeeded(sender, args) {
          alert(site.get_title());          
          site.set_title(site.get_title() + ' from js');
          site.update();
          context.executeQueryAsync(Succeeded2, Failed);
      }
      function Succeeded2(sender, args) {
          alert('Site Title Changed');
      }
      function Failed(sender, args) {
          alert('request failed ' + args.get_message() + '\n' + args.get_stackTrace());
      }

JavaScript in a Stand Alone Script File

The SP.debug.js and SP.js files are located in the _layouts directory for SharePoint.  This directory maps to a physical file location on your harddrive.

JavaScript Intellisense was introduced with Visual Studio 2008, but I still talk to a lot of developers who had no idea it exists.  To see a good overview of Intellisense with JavaScript, see Scott Guthrie’s blog on VS2008 JavaScript Intellisense.  Enabling this scenario takes less effort and no trickery, because we are just providing comments with a specific format to the top of the JavaScript file.

 /// <reference path="C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\

    14\TEMPLATE\LAYOUTS\MicrosoftAjax.js" />
/// <reference path="C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\

    14\TEMPLATE\LAYOUTS\SP.debug.js" />

Note:  remove the line break, that is included for readability.

Once you do that, you get Intellisense within your JavaScript file.

Hope this helps!

For More Information

VS2008 JavaScript Intellisense

SharePoint Guidance (https://www.microsoft.com/spg)

client side object model on Channel9’s SharePoint free training course

an example from the SharePointDevWiki on the Client Side Object Model