Wednesday, June 23, 2010

SharePoint 2010 ECMAScript Intellisense in Visual Studio 2010

This post is a very big help to the SharePoint 2010 developers. We need the intellisense help to write code fast in our SharePoint applications. But, in SP2010 BETA I faced so many problems to find what methods a java script object has. After written a long post on how to get the java script intellisense working in Visual Studio 2008 this is now an easy for me to do the same on Visual Studio 2010. I just tried the same implementation in VS 2010 and that worked great. So, there I started and started using it in ECMAScript development. When I first see the intellisense working in VS 2010 felt very very happy and jumped into the air. Because, before to find the same methods in the ECMAScript object, I had wasted hours and hours. One of the example is this post "How to know all methods in SP object".

Solution:
By using reference tag everything possible.

  1. Create a js file in VS2010.
  2. Add the below script as the first line. /// <reference name="MicrosoftAjax.js" />
  3. The MicrosoftAjax.js reference should be in the first line. What is it? why it is needed? I know the question are always in mind... This is the default js files which comes with visual studio. It has all the default methods for Sys.* available. More details here. "Make sure any dependencies are taken into account in the order of declarations. Most of the time, you will want "MicrosoftAjax.js" to be on the top." Some of the SP objects depends on this file.
  4. Now, it's time to link SharePoint ECMAScript java script files linking. We need to add only debug.js files to the reference files to get intellisense working.
  5. /// <reference path="file://C:/Program Files/Common Files/Microsoft Shared/Web Server Extensions/14/TEMPLATE/LAYOUTS/SP.core.debug.js" />
    /// <reference path="file://C:/Program Files/Common Files/Microsoft Shared/Web Server Extensions/14/TEMPLATE/LAYOUTS/SP.debug.js" />
  6. SP.Core.Debug.Js and SP.Debug.Js files are the primary files needed to develop the ECMAscript. So, these two are the main and should be added to the js file after MicrosoftAjax.js reference.
  7. Like this, you can add whatever debug.js files available in the SharePoint 14 hive layouts folder. For example, if you are developing on Ribbon then the reference will be 
/// <reference path="file://C:/Program Files/Common Files/Microsoft Shared/Web Server Extensions/14/TEMPLATE/LAYOUTS/SP.Ribbon.debug.js" />

All at once:
/// <reference name="MicrosoftAjax.js" />
/// <reference path="file://C:/Program Files/Common Files/Microsoft Shared/Web Server Extensions/14/TEMPLATE/LAYOUTS/SP.core.debug.js" />
/// <reference path="file://C:/Program Files/Common Files/Microsoft Shared/Web Server Extensions/14/TEMPLATE/LAYOUTS/SP.debug.js" />
Note: Add all other debug.js files depends on your requirements right after the 3 reference tags.

Once add the reference tags, write something and see the intellisense loads all the methods in the specific SP object as shown below.

Hope this helps you a ton and make your development on ECMAScript more faster and faster than ever.

3 comments:

  1. Great post! Thanks for saving us the time!

    ReplyDelete
  2. Great post! Thanks for saving us the time!

    ReplyDelete
  3. Welcome Danny.
    I am trying to post much to help my readers and techies to do better and better job. Sharing is really sexy.... I believe in that.

    -Praveen.

    ReplyDelete