iGoogle Gadget (featuring UWL,BPM,JSON & OAuth) - Part 3

[lvhengel]

This is the final blog about my iGoogle Gadget. In Part 1  (iGoogle Gadget (featuring UWL,BPM,JSON & OAuth) - Part 1) the retrieval of Universal Worklist tasks and present them as JSON was explained and in Part 2 (iGoogle Gadget (featuring UWL,BPM,JSON & OAuth) - Part 2) the creation of the OAuth Provider on SAP NetWeaver CE was described.     In this blog I will explain how to create the iGoogle Gadget for retrieving the tasks and integrate the gadget in your iGoogle page.  h3. *iGoogle Gadgets*   I think everybody knows iGoogle. It’s a personalized start page were users can add web feeds and Google Gadgets. Popular gadgets include Weather, Calendar, Gmail, Twitter and Facebook. A cool thing to do is to develop your own Gadget, so you can decide yourself what you wanna show on your iGoogle page and that is what this blog is about.    h3. *Gadgets API*   For creating gadgets Google offers the Gadget API. With this API and by using XML, HTML, and JavaScript you are able to create your own gadget. Actually the Google Gadget API was the basis for the OpenSocial API, which is now an open platform for creating gadgets   which can run in several containers  (http://wiki.opensocial.org/index.php?title=Containers). Next to Google many websites already support OpenSocial like LinkedIn, MySpace and recently [SAP StreamWork | https://streamwork.com/api/opensocial/Overview.html] also joined. More info about this you can find in the recent blog  (The specified item was not found.) by Richard Hirsch.My blog will only focus on iGoogle Gadgets and running them inside the iGoogle container. I have not tested it within another container.      A good place to get familiar with creating iGoogle Gadgets is the documentation from Google.  (http://code.google.com/intl/en/apis/gadgets/index.html) Here you can start with creating your “Hello, World” Gadget and embed d it into your own iGoogle Page.     After creating the first application it needs to be hosted somewhere to make it accessible for iGoogle, this can be done by hosting it on a webhost. An easy way and suitable for this application  is by using the Google Gadget Editor (GGE) , this is a tool for editing and hosting a gadgets with Google. You can use the Google Gadget Editor directly if you have a Gmail-account. [http://code.google.com/intl/en/apis/igoogle/docs/igoogledevguide.html#gadgethosting | http://code.google.com/intl/en/apis/igoogle/docs/igoogledevguide.html#gadgethosting]    In this editor you can create several gadgets and test them. See the Hello World example below.        For our gadget we create a new file and start. As starting point and example the OAuth Gadget  (http://code.google.com/apis/gadgets/docs/oauth.html) from Google is used and adjustedHere we reference the 3 OAuth endpoints which are created in Part 2  (iGoogle Gadget (featuring UWL,BPM,JSON & OAuth) - Part 2):+http://gadget-doc-examples.googlecode.com/svn/trunk/opensocial- gadgets/popup.js+ and included in our web module from Part 2.   Next is the javascript. Here I will explain some main parts and attach the whole source code at the end.  h3. *Retrieving the data*   The final xml for the gadget can be downloaded from here  (http://dl.dropbox.com/u/5925403/uwl_gadget.zip).   Store this XML file in your Google Gadget Editor. Name the file uwl.xml for example and save it.     Right-click on the name and copy the shortcut. This link we can add to our iGoogle Page. You can do this by going to your iGoogle page and click on the Add Stuff link. In the next page click Add Feed or gadget and past the link to your gadget xml file.     And there is the final result. The BPM Tasks from your Universal Worklist inside your iGoogle Page!