How to: Enable ECMA Client Object Model IntelliSense in Visual Studio 2010

http://msdn.microsoft.com/en-us/library/ff798328.aspx

 

How to: Enable ECMA Client Object Model IntelliSense in Visual Studio 2010

Overview

The Microsoft® SharePoint® 2010 ECMA Client Object Model allows developers to interact with SharePoint from JavaScript code running in a Web browser. This topic shows you how to enable Microsoft IntelliSense® for the ECMA Client Object Model in the Microsoft Visual Studio® 2010 development system.

This how-to topic describes the following procedures:

• Enabling ECMA Client Object Model IntelliSense for an application page
• Enabling ECMA Client Object Model IntelliSense for a Visual Web Part
• Enabling ECMA Client Object Model IntelliSense for a standalone JavaScript file

Note:
This how-to topic assumes that you have created a project in Visual Studio 2010 by using the Empty SharePoint Project template.

Enabling ECMA Client Object Model IntelliSense for an Application Page

This procedure registers script tags in an application page. This allows Visual Studio 2010 to provide ECMA Client Object Model IntelliSense for the application page.

To enable ECMA Client Object Model IntelliSense for an application page

1. In the Solution Explorer window, right-click the project node, point to Add, and then click New Item.
2. In the New Item dialog box, in the Installed Templates pane, expand Visual C#, expand SharePoint, and then click 2010.
3. To the right of the Installed Templates pane, click Application Page.
4. In the Name box, type the name that you want to use for your application page.
5. Click Add.
6. On the application page, in the PageHead content placeholder, add the following code.
               HTML       

                   Copy Code            

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

   Note:
   Note: by using an undefined constant, Visual Studio will provide Intellisense while the <script> element is omitted from the actual page rendering

   Notice that the Visual Studio 2010 status bar indicates that it is updating the JavaScript IntelliSense for your page, as shown by the following illustration.

   

7. On the application page, in the PageHead content placeholder, use the following code to add another script tag and create a JavaScript function.
               HTML       

                   Copy Code            

   <script type="text/javascript" language="javascript">
     ExecuteOrDelayUntilScriptLoaded(test, "sp.js");
   
     function test() {
       this.ClientContext = SP.ClientContext.get_current();
     }
   </script>
   

   Notice the IntelliSense is available for the ECMA Client Object Model, as shown by the following illustration.

   

   Note:
   Depending on the portions of the object model that you are working with, you might need to add script tags that reference other SharePoint Client Object Model .js files. These files can be found in the _layouts virtual directory.

Enabling ECMA Client Object Model IntelliSense for a Visual Web Part

This procedure registers script tags in a Visual Web Part. This allows Visual Studio 2010 to provide ECMA Client Object Model IntelliSense for a Visual Web Part.

To enable ECMA Client Object Model IntelliSense for a Visual Web Part

1. In the Solution Explorer window, right-click the project node, point to Add, and then click New Item.
2. In the New Item dialog box, in the Installed Templates pane, expand Visual C#, expand SharePoint, and then click 2010.
3. To the right of the Installed Templates pane, click Visual Web Part.
4. In the Name box, type the name that you want to use for your Visual Web Part.
5. Click Add.
6. In the Visual Web Part .ascx file, add the following code.
               HTML       

                   Copy Code            

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

   Notice that the Visual Studio 2010 status bar indicates that it is updating the JavaScript IntelliSense for your page, as shown by the following illustration.

   

7. In the Visual Web Part ASCX file, use the following code to add another script tag and create a JavaScript function.
               HTML       

                   Copy Code            

   <script type="text/javascript" language="javascript">
     ExecuteOrDelayUntilScriptLoaded(test, "sp.js");
   
     function test() {
       this.ClientContext = SP.ClientContext.get_current();
     }
   </script>
   

   Notice that IntelliSense is now available for the ECMA Client Object Model, as shown by the following illustration.

   

   Note:
   Note: Depending on the portions of the object model that you are working with, you might need to add tags that reference other SharePoint Client Object Model .js files. These files can be found in the _layouts virtual directory. You should remove the references to the .js files that enable IntelliSense when you deploy the Visual Web Part in a production environment.

Enabling ECMA Client Object Model IntelliSense for a Standalone JavaScript File

This procedure registers script tags in a standalone JavaScript file. This allows Visual Studio 2010 to provide ECMA Client Object Model IntelliSense for a standalone JavaScript file.

To enable ECMA Client Object Model IntelliSense for a standalone JavaScript file

1. In the Solution Explorer window, right-click the project node, point to Add, and then click New Item.
2. In the New Item dialog box, in the Installed Templates pane, expand Visual C#, and then click Web.
3. To the right of the Installed Templates pane, click Jscript File.
4. In the Name box, type the name that you want to use for your JavaScript file.
5. Click Add.
6. In the JavaScript file, add the following code.
               JavaScript       

                   Copy Code            

   /// <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" />
   

   Notice that the Visual Studio 2010 status bar indicates that it is updating the JavaScript IntelliSense for your page, as shown by the following illustration.

   

7. In the JavaScript file, add the following code.
               JavaScript       

                   Copy Code            

   ExecuteOrDelayUntilScriptLoaded(test, "sp.js");
   
   function test() {
       this.ClientContext = SP.ClientContext.get_current();
   }
   

   Notice that IntelliSense is now available for the ECMA Client Object Model, as shown by the following illustration.

   

   Note:
   Note: Depending on the portions of the object model that you are working with, you might need to add tags that reference other SharePoint Client Object Model .js files. These files can be found in the _layouts virtual directory. You should remove the references to the .js files that enable IntelliSense when you deploy the standalone JavaScript file in a production environment.

© 2011  Microsoft. All rights reserved.Terms of Use|Trademarks|Privacy Statement