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

SharePoint 2010 ECMAScript Client Object Model - Samples and Examples

I have done sufficient experiments on SharePoint 2010 Client Object Model and other features while I am learning SharePoint 2010. Now, my work is to share the knowledge I have gained. So, part of that is all these examples and samples. I hope they will help you to better understand and keep you up to date with new technologies.

As we know SharePoint 2010 provides the nice API for 3 client object models, in this post I have concentrated on ECMAScript client object model.

Download the code from here and start see the code and try to learn it. All these examples are my own development and not copied from any where in the internet.
Download ECMAScript Client Object Model Samples and Examples.

Before take a look at the code, you should read the article for where to place the code and how to use.
ECMAScript - Complete details
Read More...

SharePoint 2010 ECMAScript - How to know logged in user information

This is post which is simple and not really needed. But when I started writing the code in ECMAScript I have faced problems in getting the logged in user information. So, my readers may feel good after see this post and really most the users are looking for this too.
By this time, we have really understood all about ECMAScript Client Object Model and debugging. So, it's easy for us to know it well.
Please find the code below to get the current user information.

<script type="text/javascript">
ExecuteOrDelayUntilScriptLoaded(getWebUserData, "sp.js");
var context = null;
var web = null;
var currentUser = null;
    function getWebUserData() {
        context = new SP.ClientContext.get_current();
        web = context.get_web();
        currentUser = web.get_currentUser();
 currentUser.retrieve();
        context.load(web);
        context.executeQueryAsync(Function.createDelegate(this, this.onSuccessMethod), Function.createDelegate(this, this.onFailureMethod));
    }
    function onSuccessMethod(sender, args) {
        var userObject = web.get_currentUser();
        alert('User name:' + userObject.get_title() + '\n Login Name:' + userObject.get_loginName());
    }
    function onFailureMethod(sender, args) {
        alert('request failed ' + args.get_message() + '\n' + args.get_stackTrace());
    }
</script>

So, the above code returns you the user object and displays user name and user login name. You can customize it as you want and please let me know the feedback or questions you have. Read More...

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

SharePoint 2010 - Client Object Model - ECMAScript - Introduction on how to use

In SharePoint 2010, the great feature is introducing the client object model [Read this article before proceed]. The great advantage with this is, we can do plenty of things without server side coding using the ECMAScript. There are plenty of default supported files to use and do whatever you want with the SP Package files. All javascript files will be found in the layouts folder. All of them starts with "SP" name.

ECMAScript works only for the current context. It means from outside of the site, you can't access the SharePoint data. This won't support the cross-site scripting.

How to add the reference to SP.js and access the data?

1. Refer it from the client side: Create a js file somewhere in the SharePoint site which can be accessible and write the below line as the first line.
   
   
   

   ExecuteOrDelayUntilScriptLoaded(initialize, "sp.js");

2. Refer it from the server side: Add the below line to the ASPX page.
   
   
   

Note: It's not really needed to use refer from server side code added to page to execute the code.

What this method is doing?
In javascript when you request files, all will load asynchronously. I mean, they will load randomly and what if your javascript is using sp.js file and it's not loaded yet? This will be a problem. So, this method helps to tell the browser to wait and execute the "initialize" function if and only if sp.js file is loaded.

Note: If you are using the separate js file then paste the below code by removing the script tags. If you are using the script on ASPX page or in Content editor web part then copy all the code and paste.

A small example:

<script type="text/javascript">
ExecuteOrDelayUntilScriptLoaded(getWebSiteData, "sp.js");
var context = null;
var web = null;
    function getWebSiteData() {
        context = new SP.ClientContext.get_current();
        web = context.get_web();
        context.load(web);
        context.executeQueryAsync(Function.createDelegate(this, this.onSuccessMethod), Function.createDelegate(this, this.onFailureMethod));
    }
    function onSuccessMethod(sender, args) {
        alert('web title:' + web.get_title() + '\n ID:' + web.get_id());
    }
    function onFaiureMethodl(sender, args) {
        alert('request failed ' + args.get_message() + '\n' + args.get_stackTrace());
    }
</script>

Explanation:
I think you understood well by seeing the above without any difficulties. Simply I will explain the steps.

1. I am getting the current context by calling the get_current() method.
2. Get the current web site [Where we have write the javascript code, will get that web object.]
3. context.load() - I know it's not straight forward to understand. But, it's simple. When you send the request to server, what we need to get back from the server as response? That is what we need to place in the load method. In this case, load is invoked with web parameter. It means it will load the complete web object with all properties.
4. When you write load, it means it won't load the object immediately. We need explicitly call it by using executeQueryAsync() method. As the name says, this method is asynchronous call. And the syntax shows that it is a callback call. It has the success method and the failure method. So, when the query is succeeded then it goes to the success method, otherwise it goes to the failure method.

Load only the data you want, not the whole web object:
This is a performance and efficient related thing. Everyone knows in SQL, why we don't use select * always, and use only select and then only columns you needed to process something in the selected list? The same reason here too. Don't query all the properties in an object and only query the properties you actually needed. This is looking fine, but how to do that? In  my above example, I am actually using only Title and Id, I want to load only them. For that I need to use the below line.

context.load(web, 'Title','Id');  

If you added comma separated properties then it will query those properties and load data. There is another option also available named loadQuery(). I will tell you about this in later posts.

NOTE: Remember, all the properties are case-sensitive. I have wasted 1 hour to find out a small problem. I have used the 'ID' instead of 'Id' in properties and running into trouble. So, make sure you are aware of that.

You can debug and there is a file which helps you to debug upto inner imeplementations. The file is sp.debug.js and you can find it in layouts folder. This is good practice to use it on dev environment, but don't forget to remove this reference on the production environment. Read More...

SharePoint 2010 - Complete details about Client Object Model

This is the introduction to the Client Object model introduced in the SharePoint 2010. This is going to be a huge help and useful part in SharePoint 2010 for developers and makes lot of customization to the existing SharePoint system.

In eariler versions, I mean till SharePoint 2007 the code runs using the SharePoint object model to run against the server which is running SharePoint. Other than the SharePoint server object model, other way is, simply reference the web service and use that to get and manipulate data. Then what is the need of SharePoint 2010 Client object model[Cleint OM] concept?

What is Client Object Model?

Client Object Model is introduced in SharePoint 2010 which helps to developers to make things easier to develop the client side applications for SharePoint 2010. Client Object Model can run on the client machines (Where SharePoint is not installed) and communicate with the SharePoint server remotely. This is the great advantage for the SharePoint devs as they don't have to install SharePoint for development any more.

What are the different Client OM supporting in the SharePoint 2010 API? [Client API]

1. .NET Managed Client - Implemented in .NET CLR. I mean we use this in Web, Windows and Console applications.
2. Silverlight Client - You can use the SharePoint objects in Silver light coding. Wow, this is going to be a huge advantage to  the Silverlight applications which can be integrated into SharePoint. Before we don't have access to SharePoint objects inside Silverlight context.
3. ECMAScript Client - Through javascript too, we can get context and do manipulations to SharePoint objects. Do you think it's possible? Yes, its a brilliant way of thinking from Microsoft SharePoint team and this will help in great scenarios. Will explain later in this article.

Why Client Object Model comes into the picture? Are there any specialties of them?

The main started point to think by SharePoint team are as follows.

1. Is it really necessary to have SharePoint installed on server for SharePoint development? - Yes, in SharePoint 2007 you have to install SharePoint on the server to write code and test it.
2. What is the advantage of writing more web services to serve what the clients are looking for? - This is completely not a feasible solution to give or expose web services for each and every single requirement to get and manipulate data. It has plenty of limitations and if Microsoft exposes 500 web services and you didn't find what you really need and they are just waste. Instead write whatever you want and use them.
3. The great thinking and beautiful solution to the people who don't allow server side coding in the SharePoint sites is ECMAscript client OM. You can create a simple javascript file and deploy into the server to get what you needed. As we know, most of the clients don't allow server side coding but they want something to be developed. In SharePoint 2007 it's very difficult to get this job done. But now in SP 2010 very easy.

So, these things take into high priority and makes them to come up with a great solution in the form of Client Object Model. The great advantage of it is completely looks [Syntax] like the SharePoint Object Model. So, nothing new for developers and no confusion. Infact very simple to manage and write code.

SharePoint object model syntax:

Server side syntax	Client side syntax
SPContext	ClientContext
SPSite	Site
SPWeb	Web
SPList	List

Now, I believe you have understood the Client OM concept. Now, we will discuss a little bit about technical implementation.
SharePoint 2010 provides the client support files to refer the SharePoint objects and communicate with the SharePoint server. Below are the details.

For Managed Client	DLL's needed : Microsoft.SharePoint.Client.dll, Microsoft.SharePoint.Client.Runtime.dll. Find these files in the 14/ISAPI folder. Usually, the location would be at "C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\ISAPI".
Silverlight	Microsoft.SharePoint.Client.Silverlight.dll and Microsoft.SharePoint.Client.Silverlight.Runtime.dll. They find at "C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\ClientBin".
ECMAScript	SP.js file - The file fund at "C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS".

What we need to do is, add the relted file to the project references if it is Managed client or Silverlight and start using the SharePoint objects in the code. If it is ECMAScript then we just need to declare the line     ExecuteOrDelayUntilScriptLoaded(Initialize, "sp.js"); on the top of js file to use the SP object.
**Initialize is some javascript function.**
My next posts will be the examples of each client OM implementation and how to get, manipulate data for better understanding. Read More...