Whoami in SharePoint

One of the nicest things in SharePoint is that you can access it not only through the web interface, but through its web services as well. Combining this with AJAX, you can build pretty good user interfaces with a SharePoint backend.
When doing this you’ll definitely be interested in knowing who is currently logged in.
So if you are modifying a SharePoint generated page (like NewForm.aspx, EditForm.aspx or a page associated with a view) and add (D)HTML code to it, you can easily access the _spUserId variable which holds the current logged in user ID in SharePoint.
From this point on if you’re interested in more details you just simply run a query against the user list using SharePoint web services.
If you want to have these information in a page of your own, you can simply run that query using the CAML tag UserID.

<Query>
  <Where>
    <Eq>
      <FieldRef Name="ID"/>
      <Value Type="Integer"><UserID Type="Integer"/></Value>
    </Eq>
  </Where>
</Query<

Just as a note, don’t forget to put Type="Integer" in there.

If you wonder how I got over this, you should read my other article.

Cross browser XMLHttpRequest

AJAX has become more and more widely used. It is a cool thing, you can do a lot with it, but basically (and here is the best part) it is only a new JavaScript object: XMLHttpRequest. There is no need to learn new technologies or languages.
Unfortunately, not all the browsers (please read especially IE) support this in a native and smooth way. If in FF2+ and even IE7, this comes in a native way, in IE6 this comes only as an ActiveX object.
The good news is that, except how the objects are instantiated, everything else is the same.
As I said in FF/Mozilla this comes in a native smooth way


var xmlHttp = new XMLHttpRequest();


but in IE5 and 6, to create it, you actually create an ActiveX object


var xmlHttp = new ActiveXObject("MSXML2.XMLHTTP");


And that’s not all, even the ActiveX object class can be different from Windows version to another, so you might also have:


xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");


So every time you want AJAX you might end up with something like this:

    var xmlHttp;
    // use the ActiveX control for IE5.x and IE6
    try {
        xmlHttp = new ActiveXObject("MSXML2.XMLHTTP");
    } catch (othermicrosoft){
        try { 
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        } 
        catch (native) {
            // If IE7, Mozilla, Safari, etc: Use native object
            xmlHttp = new XMLHttpRequest();
        } 
    } 

As I’m lazy and I don’t want to write this code every time, I decided to wrap it up in a nice cross browser way.

How? Look at the code below.

try {
    // test to see if XMLHttpRequest is defined
    XMLHttpRequest.DONE;
}
catch (e) {
    XMLHttpRequest = new Object();
    // define also all the constants
    XMLHttpRequest.UNSENT = 0;
    XMLHttpRequest.OPENED = 1;
    XMLHttpRequest.HEADERS_RECEIVED = 2;
    XMLHttpRequest.LOADING = 3;
    XMLHttpRequest.DONE = 4;
}

/** Creates new instance of the XMLHttpRequest object */
XMLHttpRequest.newInstance = function() {
    var xmlHttp = null;
    // use the ActiveX control for IE5.x and IE6
    try {
        xmlHttp = new ActiveXObject("MSXML2.XMLHTTP");
    } catch (othermicrosoft){
        try { 
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        } 
        catch (native) {
            // If IE7, Mozilla, Safari, etc: Use native object
            xmlHttp = new XMLHttpRequest();
        } 
    } 

    return xmlHttp;
};

Just to explain a little bit what happens. First we test if the XMLHttpRequest exists, by calling a property on it. If it doesn’t exist, then this will raise an exception and then we will create it. After this, the next step will be to define a method (similar to a static one) to create a new instance and enclose the entire cross browser code. So now we will create a new XMLHttpRequest like this:


var xmlHttp = XMLHttpRequest.newInstance();


Lazy enough for you !? 😉

AJAX vs DHTML

AJAX is gaining a lot of adopters these days and it seems to be like the new cool kid in town. If you’re in the web development area, you must use AJAX, otherwise you’re not cool at all.

But more than this, AJAX became a buzzword. And I definitely don’t like buzzwords. Because amateurs would try to use that word for everything that is related to that area.

We have to clearly see the difference between AJAX and DHTML. AJAX stands for Asynchronous JavaScript and XML and it is simply a way to communicate with a web server without making a new request in the browser. And this will happen more likely without user really feeling it. DHTML stands for Dynamic HTML and it is a set of technologies used for dynamically modifying a web page, usually incorporating JavaScript and CSS.

AJAX and DHTML are not excluding each other, but working together. With DHTML you can dynamically modify a site using client-side code. But sometimes you cannot simply have everything on the client side (or it could be too expensive to have it) and you should interact in some way with the server-side code. And then AJAX comes into stage, just to simply create a connection between some JavaScript client-side code (on an DHTML site) and a web server. Before this, you could have used signed Java applets or Flash, but this offers the opportunity of a pure JavaScript solution.

Actually you could even say that AJAX is a small part from DHTML, but people are using it the other way around. I have to admit that even the name was chosen to fit a new upcoming buzzword. With AJAX (Asynchronous JavaScript and XML) you can even do synchronous requests and handle HTML or plain text, even tough the initial intent and good practice is not to do it.
I know that it is cool to use all these new buzzwords, but it will be much more correct to use the right term.

For a good AJAX reference you can use Wikipedia. Read also the articles referenced at the end, I would especially recommend the ones from IBM developerWorks.

Passing POST parameters with AJAX

AJAX can be used not only with webservices but with HTTP applications as well. So instead invoking a webservice, you’ll make an HTTP request. This comes veryhandy when using legacy application or when your usage of AJAX is very limited and webservices are simply too much.

What I wanted to share is a small trick on how to pass POST parameters with AJAX. The entire exercise will consist of defining a function called doPost that will receive as parameters the url and a two-dimensional array of parameters

function doPost(url, parameters) { 
  // create the AJAX object 
  var xmlHttp = undefined; 
  if (window.ActiveXObject){ 
    try { 
      xmlHttp = new ActiveXObject("MSXML2.XMLHTTP"); 
    } catch (othermicrosoft){ 
      try { 
        xmlHttp = new ActiveXObject(
            "Microsoft.XMLHTTP"); 
      } catch (failed) {} 
    } 
  }    

  if (xmlHttp == undefined && window.XMLHttpRequest) { 
    // If IE7, Mozilla, Safari, etc: Use native object 
    xmlHttp = new XMLHttpRequest(); 
  }  

  if (xmlHttp != undefined) { 
    // open the connections 
    xmlHttp.open("POST", url, true); 
    // callback handler 
    xmlHttp.onreadystatechange = function() { 
      // test if the response was totally sent 
      if (xmlHttp.readyState == 4 
            && xmlHttp.status == 200) { 
        // so far so good 
        // do something useful with the response 
      } 
    }  

    // create the parameter string 
    // iterate the parameters array 
    var parameterString;  

    for (var i = 0; i < n; i++) { 
      parameterString += (i > 0 ? "&" : "") 
          + parameters[i][0] + "=" 
          + encodeURI(parameters[i][1]); 
    }  

    // set the necessary request headers 
    xmlHttp.setRequestHeader("Content-type", 
        "application/x-www-form-urlencoded"); 
    xmlHttp.setRequestHeader("Content-length", 
        parameterString.length); 
    xmlHttp.setRequestHeader("Connection", "close");  

    // send request 
    xmlHttp.send(parameterString); 
  } 
}

The parameters string can be constructed in a different way or even the parameters can be passed to the method in a different format. In the above case the parameters are passed as a two-dimensional array, everyline representing a parameter, again an array containing name (first element) and value (second element).

A call to the above function would look like this:

doPost("doIt.jsp", new Array(new Array("action", "action1"), new Array("id", "123")));