Friday, February 26, 2010

SharePoint 2010 ECMAScript - how to know all methods in SP object and debug

After spent good time to write nice posts on Client Object Model and ECMAScript how to use, I want to present you another nice tip on how we know all the methods and properties available for the SP object in the ECMA javascript . MSDN documentation is not finalized or completed yet to know what properties and methods  for SP objects have. And when you want to query something [like list or web] and you are not aware of what it has inside methods and properties, then the best way as far as I know is, using the Javascript debugging using Internet Explorer.

If you take the same example which from the post "How to get the web site properties", I have declared the web object and reading that when it fills. How I knew that for the web object there are methods named get_title() and get_id()? Follow the below steps to reveal that.
  1. After you are ready with the script added to the page, Follow the steps...
  2. Open the page in Internet Explorer and Select Developer Tools from Tools Menu as shown in below figure. Needs >= IE 7 version installed.
  3. Find the script tab from the developer tools.
  4. Select the file from the list of files where the custom javascript you have written.
  5. Now go to the location of javascript code, and place the break point to debug.
  6. Now, on the top, click on the button start debugging. This will start loading the breakpoints in the files. When the code reaches where the breakpoint is present debug starts and you can find them.
  7. Now, go to the ASPX page and refresh it. From the page execute the code. [If you have written code to execute on page load then fine we don't do anything, it will automatically reaches breakpoint and if you have written the code to execute when some event raises then do raise that event(just like button click or something else).]
  8. When you do that, then the debugger will find the breakpoint and starts debugging as shown below.
  9. Press F10 to repeat through the code one line at a time. Stop at the place where you want to debug and find the methods of an object or see the values and select that part and right click, select "Add Watch". For example, In my case I am trying to find the web properties and adding watch the web object as shown in the below figure.
  10. Now see all the existing methods available for the object. This is the best and efficient way to know the methods in an object and another advantage is you can directly see what value it will return by using a specific method by adding that to watch. But take care, you can see only the data which is actually coming from the server. You have selected Title and Id from the example we are using, If you use the method web.get_description() then it will give you error. So, make sure you have loaded the property before you access it.
This is what all about knowing the properties and debug the data and see the information. It has helped me so many times and in fact I rely on this to know the methods in any SP object. The will surely help to all SharePoint 2010 devs who are working on the ECMAScript client object model. Hope you like this post and it helps you for better programming.

3 comments:

  1. Great tip Praveen! Awesome job with your posts! Thanks for sharing and all your hard work!

    ReplyDelete
  2. I agree with Andres. Excellent post, Praveen!

    ReplyDelete
  3. Thanks for the comments. Just written another post, which actually helps much better to find methods.

    http://praveenbattula.blogspot.com/2010/06/sharepoint-2010-ecmascript-intellisense.html

    -Praveen

    ReplyDelete