Thursday, 21 March 2013

Javascript IntelliSense not working in Visual Studio 2010 for Sharepoint 2010 and 2013 ( Client Object Model )

I should publish this article long time ago, but it is one of them. I normally know all the commands from jQuery, so I don’t really need to have IntelliSense. Today I was doing some work with the Client Object Model from Sharepoint in javascript, and I noticed straight away that the IntelliSense was not working in Visual Studio 2010 again.

I am going to post some tricks which sometimes makes this IntelliSense bug to work in Visual Studio.

First of all, let’s go to implement the Client Object Model how “officially” needs to be implemented:

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.

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

<% #if SOME_UNDEFINED_CONSTANT %>
<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.

Ff798328.a39fca9a-f7f9-49d2-8747-a5e3bc70f755(en-us,PandP.10).png

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

<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.

Ff798328.a1d7e208-694a-419e-a22a-97acaf3bfb4a(en-us,PandP.10).png

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.
    <% #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.

    Ff798328.ae6fe69f-bc73-4a0f-85c6-7865da239c87(en-us,PandP.10).png


  7. In the Visual Web Part ASCX file, use the following code to add another script tag and create a JavaScript function.
    <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.

    Ff798328.0449199a-bc46-4828-9103-6392ebdaedc5(en-us,PandP.10).png

    Ff798328.note(en-us,PandP.10).gifNote:

    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.


Official way not working! Additional trick 1


Opps, It seems, that the official way didn’t work… let’s go to apply little tricks, I will recommend you do all of them. This can be used for any js file.


To get Intellisense to work again, I ended up resetting my Visual Studio settings (Tools | Import and Export Settings):

ResetSettings

then go ahead and reset to your preferred default profile (I typically choose the C# profile over the Web profile). This may seem counter intuitive immediately after a new install since I hadn’t changed any settings yet, but the reset did the trick.

And voila, Intellisense in JavaScript is back.

I suspect this has something to do with VS 2010 importing some existing VS 2008 settings, so even if you don’t have problems in VS 2010 it might be a good idea to actually reset all settings just to make sure there’s a clean slate to start with.

Not working… well go to the next one…

Official way not working! Additional trick 2


Re-start  Visual Studio 2010


Not working?!… well go to the next one


Official way not working! Additional trick 3


Now let’s go to change our references a little bit, so instead to tell Visual Studio are local, let’s go to tell it is on the Internet.So if we come back to Additional trick 1, we will be changing the references. So having a server called “sp2010dev” and a site called “tr”, we will have the following reference:


For a Page:

<% #if SOME_UNDEFINED_CONSTANT %>
 <script type="text/javascript" src="http://sp2010dev/tr/_layouts/SP.debug.js"></script>
<% #endif %>
For a Webpart:
<% #if SOME_UNDEFINED_CONSTANT %>
 <script type="text/javascript" src="http://sp2010dev/tr/_layouts/MicrosoftAjax.js" ></script>
 <script type="text/javascript" src="http://sp2010dev/tr/_layouts/SP.debug.js"></script>
<% #endif %>
Try now!

4 comments:

ninest123 said...

replica watches, louis vuitton, air jordan pas cher, longchamp pas cher, ray ban sunglasses, nike air max, oakley sunglasses, ugg boots, oakley sunglasses, nike free, nike roshe run, louboutin shoes, michael kors, louboutin, longchamp outlet, louis vuitton outlet, polo ralph lauren outlet, longchamp outlet, tiffany jewelry, tiffany and co, jordan shoes, tory burch outlet, ugg boots, air max, louis vuitton, replica watches, nike free, louis vuitton, uggs on sale, sac longchamp, burberry, chanel handbags, oakley sunglasses, polo ralph lauren outlet, louboutin outlet, longchamp, louis vuitton outlet, prada outlet, cheap oakley sunglasses, oakley sunglasses, christian louboutin outlet, louboutin pas cher, ralph lauren pas cher, ray ban sunglasses, kate spade outlet, ray ban sunglasses, nike air max, prada handbags, gucci outlet, nike outlet

ninest123 said...

burberry outlet online, nike air max, coach purses, nike air max, michael kors, timberland, new balance pas cher, true religion jeans, kate spade handbags, nike free run uk, north face, true religion jeans, ralph lauren uk, air force, hollister pas cher, ray ban uk, converse pas cher, lacoste pas cher, michael kors outlet, michael kors outlet, ugg boots, michael kors outlet, michael kors outlet, coach outlet, vans pas cher, hollister, burberry, coach outlet, nike blazer, oakley pas cher, vanessa bruno, mulberry, ugg boots, lululemon, hermes, tn pas cher, ray ban pas cher, sac guess, hogan, true religion jeans, abercrombie and fitch, true religion outlet, michael kors, nike air max, michael kors outlet, replica handbags, michael kors, nike roshe, north face, michael kors

ninest123 said...

longchamp, iphone 5s cases, hollister, ferragamo shoes, herve leger, jimmy choo shoes, giuseppe zanotti, north face outlet, vans shoes, mont blanc, nike huarache, celine handbags, iphone cases, iphone 6s cases, nike trainers, lululemon, louboutin, ralph lauren, iphone 6 cases, babyliss, s5 cases, hollister, north face outlet, nfl jerseys, bottega veneta, soccer shoes, oakley, baseball bats, abercrombie and fitch, ghd, chi flat iron, valentino shoes, beats by dre, asics running shoes, wedding dresses, reebok shoes, timberland boots, ipad cases, mac cosmetics, mcm handbags, nike roshe, nike air max, insanity workout, iphone 6s plus cases, birkin bag, p90x workout, hollister, instyler, iphone 6 plus cases, soccer jerseys, new balance

ninest123 said...

barbour jackets, toms shoes, lancel, supra shoes, juicy couture outlet, moncler, moncler, louis vuitton, thomas sabo, hollister, canada goose uk, canada goose, louis vuitton, doudoune canada goose, converse outlet, canada goose outlet, replica watches, bottes ugg, canada goose outlet, nike air max, gucci, moncler, pandora jewelry, canada goose, karen millen, marc jacobs, converse, moncler, ray ban, wedding dresses, montre pas cher, ugg,ugg australia,ugg italia, moncler, pandora charms, canada goose, moncler, canada goose, ugg,uggs,uggs canada, moncler, vans, swarovski crystal, sac louis vuitton pas cher, pandora jewelry, juicy couture outlet, louis vuitton, louis vuitton, moncler outlet, coach outlet, swarovski, ugg boots uk, links of london, ugg pas cher, pandora charms