Making REST calls and using state (aka cookies) from a sidebar gadget...

  • Article

This will walk you through how to make REST (GET,POST) calls from a sidebar gadget using XmlHttp.. ( 20 mins or less, if you have asp .net)

There are plenty of samples on the web for using XmlHttp, so will go quick and we will touch in a few of the 'more intricate' scenarios people have asked about: Cookies + Session State + redirects when sidebar gadgets call a back-end...   

The code for this sample is located here; there is a

  • client side component (sample.gadget) -- note that for this sample, login.js script points to my local webserver..  you will have to update that to point to your back-end..
  • server side component ( UsernameSite) ..  this code uses ASP .NET, you can use any backend you want.. I used the easiest one for me.

Here is the gist of the Client-side code:
loginFlyout.html 
Just  has form data... trivial HTML form prompting for username & password for form user authentication.   The "useGet" determines if making a POST or GET request, though practically they are the same code.

generic.js has the function to get the XmlHttp object, first we check for native IE 7 object, if not possible we use MSXML..

function

GetXMLHTTP ()
{
var xmlhttp = null ;
// this should be default path... using IE 7 native XML HTTP
if (window.XMLHttpRequest)
{
xmlhttp = new XMLHttpRequest();
if ( typeof xmlhttp.overrideMimeType != 'undefined')
xmlhttp.overrideMimeType('text/xml');
}
else if (window.ActiveXObject)
{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else
{
throw "No XMLHTTP" ;
}
return xmlhttp;
}

login.js has the code to send the XmlHttp request.. Note that for this samples we used Synchronous calls... that is usually bad :( ... but it saves mein sample code and keeps it simpler so I left as an exercise for you to change ..

function submitForm()
{
var item ; var DataToSend = "" ;  var x ;

//parse the form to get the fields out ... and build the payload
for ( x = 0 ; x < document.form1.elements.length ; x++ )
{
DataToSend += document.form1.elements[x].id + "=" + document.form1.elements[x].value + "&" ;
}

var xmlhttp = GetXMLHTTP() ;
var useGET = document.getElementById('useGET').value;
if ( useGET )
{
xmlhttp.open("GET","https://jaimersvr/UsernameSite/Logon.aspx?ReturnUrl=%2fUsernamesite%2fSessionPage.aspx&" + DataToSend, false);
// Note this is a Synchronous call.. you should not do this.. call it async.. I did it this way to keep code simple .. .
xmlhttp.send();
}
else
{
xmlhttp.open("POST","https://jaimersvr/UsernameSite/Logon.aspx?ReturnUrl=%2fUsernamesite%2fSessionPage.aspx", false);
xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
// Note this is a Synchronous call.. you should not do this.. call it async.. I did it this way to keep code simple .. .
xmlhttp.send(DataToSend );
}

// This is example for a flyout communicating with main document ...
// check the System.Gadget.document documentation
System.Gadget.document.getElementById ('result').innerHTML = xmlhttp.responseText;

}

That is all the client side code ... :)    
I will not explain the server side code unless I start getting requests for it..  I am guessing any one who is familiar with ASPX will know how to install it ... and those that are not familiar will be OK just knowing that REST works well from within sidebar..

Here is what the end to end sample does:

  1. The xmlhttp call is doing is calling the login.aspx page on the server side ...  
  2. At successful login, the Loginaspx does a Redirect to SessionPage.aspx,
  3. SessionPage.aspx merely displays the status of some session variables..   Every time you call this page, the variables get increased..

Here is how to run it: 

  1. Click the "ShowFlyout"  URL in the gadget
  2. Enter "test" (minus quotes) as Email address
  3. Enter "test" (minus quotes) as Password
  4. Click GetSession Data
  5. Repeat previous step to see the variables get incremented 
  6. Add a new instance of this same gadget to the sidebar and repeat the first 4 steps; notice that multiple instances of the gadget are sharing the same back-end session data ...  {good for some people, is it bad for any?} 
     

 Here are some of my observations:

  • Session Variables work fine... even the cookie is persisting fine ... [not sure who is doing the work, I am guessing xmlhttp]

 Here are the gotchas or issues I saw (which for most part might not be an issue):

  • IE in Windows Vista runs in a different trust level, called Protected Mode...  Read about it here.   
    This translates to the cookie we are persisting in our gadget and the cookie IE is reading are *not* shared..  You can have a separate cookie for each if that works for your model (e.g. the cookie just tells you my login or some thing like that)... but as far as passing state, no deal..  [ I have some ideas on how to get that to work, but might be too much]
  • I have also seldomly experienced an issue where the domain cookie that is to be persisted is not incrementing..  I have not figured this out.. it happens seldomly and goes away on its own..  If you are having problems with cookies, you can verify if things are working fine using a utility like IECV..

 Hope that was useful; if the instructions are too hard ... let me know ..