Cum Grano Salis : Win7

Coding the Excel Services Windows 7 Gadget – Part 4 - Fly-outs

Shahar — Fri, 13 Nov 2009 17:00:00 GMT

One of the features gadgets posses is the ability to have a “fly-out” visual aid for “zooming in” or “drilling down” on parts of the gadget. The Excel Services gadget supports that too – for certain types of links. Generally speaking, one should not muck around with the HTML that comes back from Excel Services. If you do decide to do that, be aware that your solution may stop working because Microsoft does not guarantee the structure of the HTML. That said, lets see how we can muck around with the HTML. :)

As a reminder, this is what a Flyout looks like in Excel Services:

The right part is the gadget and clicking on the left column in the gadget brings up the fly-out. The normal behavior in a gadget – when a link is clicked – is to bring up a browser with that link. What we want is that for certain cases, the data will show up in a flyout. To achieve that, the HTML that wraps the content of the gadget has an onclick event associated with it. This event is fired whenever somebody clicks inside the content – and that includes clicking on links. Here’s what the code for the event looks like:

// Brings up the flyout for links. This is attached to the OnClick event that wraps

// the content.

function showFlyoutForLinks()

{

var hideFlyout = true;

// Check to see that it's an anchor that was clicked..

if (event.srcElement.tagName == "A")

{

if (event.srcElement.href) // then make sure it has a link.

{

if (event.srcElement.href.toUpperCase().indexOf("_VTI_BIN/EXCELREST.ASPX") != -1) // Then, make sure it's a link to a REST URL.

{

// If all these things are true, that means we need to show a flyout with the data.

System.Gadget.Flyout.file = "flyout.html";

System.Gadget.Flyout.show = true;

// Tell the flyout what URL it needs to go to.

System.Gadget.Flyout.document.restUrlNavigation = event.srcElement.href;

// setting event.returnValue to false will make sure the link does not actually invoke.

event.returnValue = false;

hideFlyout = false;

}

if (hideFlyout && System.Gadget.Flyout.show)

{

System.Gadget.Flyout.show = false;

}

First thing we do when processing a click, is to check to see what element got clicked – by checking the tagName property, we make sure the element is an anchor (a link). If it also has an HREF, that means we can process and check to see if we need to bring up the fly-out.

The next condition checks to see if the string “_vti_bin/ExcelRest.aspx” is part of the URL – if it is, we assume that that’s a REST URL and we will use the fly-out to display the information.

We tell the gadget to show the fly-out and use the flyout.html file to do so. We set an expando property on the document so that the fly-out will know what URL it needs to load as well. Finally calling event.returnValue = false guarantees that the gadget won’t continue processing the click event (and thus won’t execute the standard link behavior of opening the link).

The HTML in the flyout.html file contains the following body:

When the fly-out completes loading, the flyoutLoadRestUrl() will execute:

// Attached to the load event of the body of the flyout. Starts the whole loading of the flyout.

function flyoutLoadRestUrl()

{

loadRange(document.restUrlNavigation, gebid("flyout"), 0, flyoutElementComplete);

}

This uses the same exact method the gadget itself uses to load ranges – but it gives a different callback – flyoutElementComplete(). This method is somewhat interesting because of some of the constraints we have. Namely, we do not know what the type of the URL is – it may be a chart and it may be a range. Since I did not want to parse the URL to figure that out, I had to use a different mechanism:

// This is used as the callback for loadRange() when it appears in the flyout.

function flyoutElementComplete(element)

{

var targetParent = element.targetParent;

// With the flyout, we dont necesserily know what to do with a URL - if it's a Range, we want

// to embed the stream that comes back. If it's an image, we want to put it in an <img> element.

// What we do here, is detect what the data is by looking at the Content-Type http header.

var contentType = this.getResponseHeader("Content-Type").toUpperCase();

if (contentType.substring(0, 5) == "IMAGE")

{

// For images, the content type will be image/png - we detect that and make sure we add an Image tag to the

// flyout.

element = document.createElement("img");

element.src = this.requestUrl;

// We set up the event to fire when the image is done loading.

element.onload = flyoutImageLoaded;

targetParent.appendChild(element);

}

else // It was a range, not an image.

{

// Append the element to the target (inside the flyout).

targetParent.appendChild(element);

// Adjust the flyout size.

flyoutAdjustContent();

}

This callback is somewhat more involved. First, we check to see what the content type that got returned is (this is returned in the Content-Type HTTP response header). If the element is an image, we know we need to use a slightly different mechanism – put in an IMG tag – we also need to make sure that when the image loads, we adjust the size, so for that we have the flyoutImageLoaded callback attached to the onload event.

If, on the other hand, the content type that got returned is not an image, we will go and set the content of the fly-out to contain the returned range.

So that’s it pretty much for coding! Here’s what we saw in the past four posts:

1. The settings window of the gadget uses the REST discovery mechanism to figure out what elements exist in a workbook.
2. The gadget window uses REST calls to get charts and adjust it’s size.
3. The gadget window uses REST to get Ranges and embed them inside the gadget.
4. Override the way links work to show a fly-out for the gadget when a REST link is clicked.

There’s just one more post in this series – discussing some of the changes I want to make to the gadget and some of the new features. After that, we will take a break from REST and talk about some of the other new programmability capabilities Excel Services has with the new version.

Coding the Excel Services Windows 7 Gadget – Part 3 - Ranges

Shahar — Thu, 12 Nov 2009 17:00:00 GMT

The first post in this series talked about how to code the settings window and the second talked about how the chart contents is displayed on the gadget itself. In this post, I will show how ranges are treated when the user requests to see them on the gadget.

Ranges (and tables and PivotTables) are different from charts because there’s no convenient mechanism that will load HTML fragments into a page. Instead, we need to use XmlHttpRequest to load the HTML and embed it into the gadget itself.

When I showed the adjustContent(), there was a call to the loadRange() in it:

else if (tnt == config.typeRange || tnt == config.typeTable || tnt == config.typePivotTable)

{

if (!loaded)

{

loadRange(config.get_resolvedThumbnailUrl(), gebid("thumbnailContainerDiv"),0);

}

The first parameter we pass in is the URL to the content we want. The second parameter is the element which will contain the fetched REST HTML fragment and the last is the index of the loaded item (so we can track if it was loaded successfully or not). Here’s the content of that method:

// Loads a range from REST and puts it in a DIV. Since this an asynchronous operation, there are a number of stages that take place here:

// 1. A hidden DIV is created "off screen" and an async called made to the appropriate URL.

// 2. When the call is done, the result is taken from the DIV and placed in the actual location (thumbnail or full-sized).

// 3. Adjust content is called.

// Note that when used in the flyout, this call also knows how to load images (the callback detects the image and handles it properly)

function loadRange(url, targetElement, loadedIndex, completeCallback)

{

if (!completeCallback)

{

completeCallback = loadedElementComplete;

}

debugWrite("Loading small range");

// Create the "off screen" DIV.

var rangeLoader = document.createElement("div");

// Create an expando property to hold the loaded index - the item we are trying to load (minimized/maximized)

rangeLoader.loadedIndex = loadedIndex;

// Append the element to the hiddent div.

gebid("loadContainer").appendChild(rangeLoader);

// Create the appropriate range request.

var rangeRequest = new XMLHttpRequest();

// Store the xmlHttpRequest on the off screen DIV.

rangeLoader.xmlHttpRequest = rangeRequest;

// Set properties/events

rangeRequest.onreadystatechange = rangeRequestReadyStateChanged;

rangeRequest.open("GET", url);

// Also create a reference back from the XML Http Request into the DIV.

rangeRequest.divTarget = rangeLoader;

rangeRequest.loadedElementComplete = completeCallback;

rangeRequest.requestUrl = url;

// Set the targetParent on the off-screen DIV to be the element we actually want it to go into eventually.

rangeLoader.targetParent = targetElement;

// Send the async request.

rangeRequest.send();

}

As you can see from the function declaration, it actually knows how to take a fourth parameter. This will be used in a future post – for now, omitting the completeCallback parameter will default the value to the loadedElementComplete function (this was shown in the previous post).

Here’s what we do to fetch a range – just like before, we create an element which we add to the hidden DIV – this element will be used as a temporary store for the loaded data. We set up the newly created DIV and add it. We then create an XMLHttpRequest() object which we will point to the URL that will return the HTML fragment. We set up the callback (via the onreadystatechange property) and we also give a second callback (via the expando property loadedElementComplete) which is where the actual interesting stuff is going to occur. Finally, we send the the HTTP request.

The rangeRequestReadystateChanged() has one important job – it takes the result that comes back from the HTTP call and inserts it into the target DIV:

// Used by loadRange to figure out when a request is done.

function rangeRequestReadyStateChanged()

{

if (this.readyState == 4)

{

if (this.status == 200)

{

this.divTarget.innerHTML = this.responseText;

this.loadedElementComplete(this.divTarget);

}

else

{

}

The callback makes sure that the request is really complete, in which case it sets the inner HTML of the target DIV to be the resulting text and it then calls the callback that was set on it (that’s the expando completeCallback property discussed above).

And that’s it – from loadedElementComplete() we will make a call to adjustContent() that will resize the gadget and zoom out if needed (in the case of a minimized gadget).

With this post, we covered all the basic elements of the gadget. The next post will show how the flyout works and the one after that will discuss improvements and the like for future versions of the gadget.

Coding the Excel Services Windows 7 Gadget – Part 2 - Charts

Shahar — Wed, 11 Nov 2009 17:00:00 GMT

The first part of this series showed how the code in the Settings form worked in the gadget. In this part, I will start describing how the gadget fetches the requested information from Excel Services and displays it.

As a reminder, here’s what the gadget looks like when minimized and showing a chart:

The gadget reloads itself in two cases – when the refresh interval has passed and when the settings window is OKed. In both cases, the call that gets made is to the method adjustContent which takes care both of shooting off the loading of the data and adjusting to the size of the content. The function has different processing for when the gadget is maximized and when it’s minimized which are pretty similar. Here is the function with the handling of the maximized gadget removed for brevity (since this method is relatively long, I am also adding comments with stages in them so I can refer to them):

// This method adjusts the content of the gadget to fit. It also takes care of refreshing the data if necessery.

// If the content is not yet loaded, Adjust will make a call to the loading code and exit. Once the content is loaded,

// adjust will be called AGAIN and this time adjust for the actual loaded content.

function adjustContent()

{

// [[[ STAGE 1 ]]]

showLoading(false);

var initDocking = true;

if (isDocked()) // When the gadget is docked (minimized/thumbnail) this code will run.

{

debugWrite("Adjusting for small");
// [[[ STAGE 2 ]]]

var loaded = loadedArray[displayThumbnail];

var tnt = config.get_resolvedThumbnailType();

// If needed, try to load the data - depending on what we are actually showing.
// [[[ STAGE 3 ]]]

if (tnt == config.typeChart)

{

if (!loaded)

{

loadSmallChart();

}

} // [[[ STAGE 4 ]]]

else if (tnt == config.typeRange || tnt == config.typeTable || tnt == config.typePivotTable)

{

if (!loaded)

{

loadRange(config.get_resolvedThumbnailUrl(), gebid("thumbnailContainerDiv"),0);

}

else

{

initDocking = false;

}

// [[[ STAGE 5 ]]]

// If we are loaded, adjust the size and content to properly show the data.

if (loaded || !initDocking)

{

// Figure out the zoom - this is done by taking the content size and making sure it fits in 120pixels width.

gebid("thumbnailContainerDiv").style.zoom = 1;

gebid("undocked").style.position = "absolute";

var ratio = 120 / gebid("thumbnailContainerDiv").scrollWidth;

if (ratio >= 0.95)

{

ratio = 1;

}

gebid("thumbnailContainerDiv").style.zoom = ratio;

document.body.style.height = gebid("docked").scrollHeight;

gebid("undocked").style.position = "static";

}

else // [[[ STAGE 6 ]]]

{

// Show the little circle that denotes a loading gadget (the thing that goes round and round).

showLoading(true);

}

document.body.style.width = "120px";

debugWrite("BodyW:" + document.body.style.width);

}

else // !isDocked - If the gadget is maximized, we need to adjust it appropriately.

{

// [[[ Code removed from here ]]]

}

if (initDocking)

{

setupDocking();

}

Here’s what’s happening in this method:

Stage 1:
We make sure the loading indicator (the little circly thing that goes round and round when loading) is hidden and we check to see if the gadget is docked or not (remember, a docked gadget is “minimized” or small and an undocked gadget is “maximized” or big). The processing shown here is just for handling of the minimized gadget.

Stage 2:
We have a global state that tells us whether or not the content of the gadget has been loaded – that’s stored in the variable called loadedArray[] – the first entry (displayThumbnail) is for the minimized gadget. If the content has not been loaded (or has expired), adjustContent will fire up an update – this can be seen in stages 3 and 4. The call to config.get_resolvedThumbnailType() returns the type of the content to be displayed – this can be a range, a chart, a table or a PivotTable.

Stage 3:
In the case of a chart and in the case that the gadget still has not loaded, we will call into the loadSmallChart() code (we will look into that a little later). Note that the call to config.get_resolvedThumbnailUrl() will return the URL to the content the user wants to see when the gadget is minimized.

Stage 4:
In the case of Ranges, Tables and PivotTables, the gadget will call into a different method called loadRange(). The parameters passed comprise of the URL to load, the element into which the range needs to be placed (the details of how ranges are loaded will be shown in the next post in this series).

Stage 5:
In here, if the gadget has been loaded (which it won’t be the first time you go into adjustContent()) the code will adjust the size of the minimized gadget to show the data. The code takes the size of the containing div (called thumbnailContainerDiv) and checks to see its size – if the size is too large for the minimized gadget (the width needs to be 120 pixels), it will zoom that specific div so that the HTML will fit.

Stage 6:
If the gadget still has not loaded it’s data, the adjustContent() method will show the loading indicator.

The code that was removed (handling the maximized gadget) is similar – the major difference is that instead of adjusting the content to fit in 120 pixels, the gadget will adjust it’s size to fit the content.

Before we delve into the loadSmallChart() method, it’s important to understand how the gadget update occurs. When updating, the gadget uses a hidden DIV on the HTML (called loadContainer) to anchor the new content. The reason for this is so that if the content fails to load for whatever reason, we do not lose the content that’s already on the gadget. Once an element has been successfuly loaded, it will be removed from the loadContainer element and placed in its correct location. Here’s what loadSmallChart() looks like:

// Loads a "small" chart - places an IMG element in the content (in the thumbnail)

// and sets its properties (URL etc)

// It also sets up an event so that when the chart is done loading (onload), we will know and be able to

// adjust the content to the size of the chart.

function loadSmallChart()

{

debugWrite("Loading small chart");

var imageLoader = document.createElement("img");

gebid("loadContainer").appendChild(imageLoader);

imageLoader.style.width = "120px";

imageLoader.onload = loadedElementComplete;

imageLoader.targetParent = gebid("thumbnailContainerDiv");

imageLoader.loadedIndex = displayThumbnail;

imageLoader.src = config.get_resolvedThumbnailUrl();

}

The method creates an IMG tag and adds it to the loadContainer DIV. It then sets the parameters on the IMG and attaches a method to the onload event – this event will fire when the IMG tag is done loading the chart (at which stage we will go and update the gadget body to actually show the new chart). Note that we also that we add an expando attribute to the IMG tag we created which points to the element into which it will ultimately need to be added. This allows us to have a generic mechanism for moving the element later on. Here’s what loadedElementComplete looks like:

// Used by the gadget as a callback to when a Range is done loading.

function loadedElementComplete(element)

{

if (!element)

{

element = event.srcElement;

}

// Figure out where we need to place the DIV - this property was set up in the

// loadRange() method to point to the target element.

var targetParent = element.targetParent;

// Remove the "off screen" div from it's parent.

element.parentElement.removeChild(element);

// Now add it/replace the current existing child.

if (targetParent.children.length == 1)

{

targetParent.replaceChild(element, targetParent.children[0]);

}

else

{

targetParent.appendChild(element);

}

// Specify that we did indeed load the range.

loadedArray[element.loadedIndex] = true;

// Make sure we know when we last updated.

lastUpdate = new Date();

setStatus();

// Adjust the gadget to the content.

adjustContent();

}

When loading a chart, the first part of the method will guarantee we point to the correct element that got loaded. Next, we figure out where the newly loaded element needs to go to (by accessing element.targetParent). We then remove the newly loaded element from its parent and add it to the actual location where it’s going to be viewed. Finally, we mark the element as loaded (loadedArray[element.loadedIndex] = true) and we call adjustContent to make sure the gadget is properly sized (note that in this call to adjustContent, the loaded state of the content will be set to true, and so the actual resizeing/adjusting part of the code will manifest.

That’s it for now – tomorrow I will show how ranges are fetched and displayed (the mechanism is slightly more elaborate since we do not have an element we can use to load it (as we do with the IMG element for charts).

Coding the Excel Services Windows 7 Gadget – Part 1 - Settings

Shahar — Tue, 10 Nov 2009 17:00:00 GMT

In the next few days, my posts will revolve around the mechanisms that make the Excel Services gadget tick. I won’t talk a whole lot about Gadget development – that could easily take up 4 or 5 posts – I will give a very brief overview though on what a gadget is and how it works. You can read more about gadgets on msdn and on blogs around the tubes.

Windows 7 (and vista) gadgets come in various flavors. By far the most popular are the ones based on HTML and Javascript because they are very easy to write and deploy. When writing a gadget in HTML, there are 3 basic parts that you need to code:

1. What appears in the actual gadget: That’s the guy that’s usually visible on the desktop. It can have 2 “modes” – big/small, maximized/minimized or docked/undocked (in Vista you used to be able to dock it). The actual content is represented by an HTML that’s in the gadget package – the HTML gets loaded and from that point you can consider it the gadget “application”.

2. The settings window: Gadgets have little wrench icons attached to them – clicking on that icon will bring up a form you can use to edit your settings. The infrastructure gives you the ability to save settings via special methods supplied off the Gadget object. The settings window is also essentially an HTML page that the Gadget HTML sets up as part of it’s initialization.

3. The flyout window: Some gadgets have functionality where by you can click on some UI element and a “flyout” view will shoot out of the side of the gadget, allowing it to supply more information. The flyout appearance and disappearance is governed by the Gadget HTML (again, via special methods off the Gadget object available in the javascript OM).

Each post will tackle one of these aspects of the gadget. I am not going to go too deeply into DHTML and the like (because DHTML and JS make me bleed from my eyes) – I will only go into the areas that I think are critical or especially interesting.

This first post will talk about the settings window – this is what it looks like:

The settings page has two important parts to it. The first is the bit that knows how to take a workbook, extract the various items that are available in it and put them in the combo boxes for the user to select from. The second is actually writing the information to the gadget settings store so that it can be later extracted and used to display the appropriate information. By far the more interesting part here is the way we do the discovery. So lets delve into that. All the code for the Settings screen is encapsulated in the settings.js file in the gadget and the HTML that is displayed is the one contained in Settings.html (I am pretty imaginative with names!)

When a user clicks on the “Refresh” button, the following JS code runs:

// This call issues 4 async requests to the Excel Services REST API to discover what elements exist in the workbook.

// An async call is made each to the Charts, Ranges, Tables and PivotTables.

// when each call is done, it will call back into the onAtomRequestComplete function which will tally the results and take care

// of updating the UI once done.

// Each call takes the base URL (which is essentially http://[server]/_vti_bin/ExcelRest.aspx/[Path to workbook]) and appends the

// appropriate URL for it.

function refreshFromWorkbook()

{

feedsReturned = 0;

var refreshReq = null;

refreshHadErrror = false;

refreshReq = new atomRequest(get_uiBaseDocument() + "/Model/Charts?___nocache___=" + new Date().getTime(), chartsIndex, onAtomRequestComplete);

refreshReq.send();

refreshReq = new atomRequest(get_uiBaseDocument() + "/Model/Ranges?___nocache___=" + new Date().getTime(), rangesIndex, onAtomRequestComplete);

refreshReq.send();

refreshReq = new atomRequest(get_uiBaseDocument() + "/Model/Tables?___nocache___=" + new Date().getTime(), tablesIndex, onAtomRequestComplete);

refreshReq.send();

refreshReq = new atomRequest(get_uiBaseDocument() + "/Model/PivotTables?___nocache___=" + new Date().getTime(), pivotTablesIndex, onAtomRequestComplete);

refreshReq.send();

// Update the UI to show that we are querying.

setRefreshStatus("Connecting to server...");

showRefreshIndicator(true);

clearLists();

}

When the user asks to refresh from the workbook, we will issue four different discovery requests – one for each of the four resources we know we can represent on the gadget: Charts, ranges, tables and PivotTables. The gadget is using a class called “atomRequest” which is fairly straightforward wrapper around the XmlHttpRequest which is the class used to issue asynchronous HTTP requests via script. Because these are async requests, two things are apparent:

1. They both need callbacks to be specified (so that we know when they are done running) and
2. We can issue multiple requests at the same time, running them in parallel*.

The get_uiBaseDocument() method call takes the name of the workbook specified in the text-box on the settings window and turns it into the REST URL base that we need. For each request we append the appropriate resource relative URL (/Modek/Charts for charts for example) and we also add another URL parameter called __nocache__ which is not used by REST, but will cause the system to not try and use cached versions of the returned data. Here’s the actual code behind get_uiBaseDocument() – as you can see it’s a fairly straightforward string manipulation method that sticks “_vti_bin/ExcelRest.aspx” in the middle of the URL. Could probably have been written more efficiently with some regex magic.

// Takes a document URL (http://server/doclib/file.xlsx) and turns it into a REST URL

// (http://server/_vti_bin/ExcelRest.aspx/doclib/file.xlsx)

function baseRestFromDoc(doc)

{

if (doc.toLowerCase().indexOf("_vti_bin/ExcelRest.aspx") > -1)

{

return doc;

}

var newUri = new String();

var startIndex;

if (doc.substr(0, 7).toLowerCase() == "http://")

{

newUri = doc.substr(0, 7).toLowerCase();

startIndex = 7;

}

else if (doc.substr(0, 8).toLowerCase() == "https://")

{

newUri = doc.substr(0, 8).toLowerCase();

startIndex = 8;

}

else

{

return "";

}

doc = doc.substr(startIndex);

var server = doc.substr(0, doc.indexOf("/"));

newUri += server;

newUri += "/_vti_bin/ExcelRest.aspx";

newUri += doc.substr(server.length);

return newUri;

}

All four async requests have the same callback. That callback will track which one return and once all are done, will continue to the next step:

// This is the callback that gets invoked when each of the ATOM request is done.

// The atomRequest is the instance of the JS object we use to make calls - it is defined in utils.cs/

// This method keeps tally on how many calls came back. Once all 4 come back, it updates the UI appropriatley.

function onAtomRequestComplete(atomRequest)

{

if (atomRequest.hasError || refreshHadErrror)

{

// If we errored out, mark the global as such.

refreshHadErrror = true;

}

else

{

// Otherwise retain the result - we will use it once all 4 requests are done.

refreshResult[atomRequest.userState] = atomRequest;

}

// Tally how many came back.

feedsReturned++;

// Once all feeds came back, update the UI.

if (feedsReturned == feedCount)

{

showRefreshIndicator(false);

if (refreshHadErrror)

{

// We had an error - set the status line to say that.

setRefreshStatus("There was an error trying to fetch charts.", "red");

}

else

{

// Need to fill the selection.

fillSelect(refreshResult[chartsIndex], config.typeChart, "Charts");

fillSelect(refreshResult[rangesIndex], config.typeRange, "Ranges");

fillSelect(refreshResult[tablesIndex], config.typeTable, "Tables");

fillSelect(refreshResult[pivotTablesIndex], config.typePivotTable, "PivotTables");

setRefreshStatus("You can now select elements from the workbook.");

}

For each of the async calls that comes back, the callback checks on the error status and stores the result in a global array (refreshResult). It also counts how many requests have come back already. When the number that comes back is the number we issued, the code will take the entire result set and update the UI with it.

The fillSelect() method simply takes the ATOM feed that is returned, iterates over the elements that are there and adds them to the combo-boxes under the appropriate header so that you get the following result in the combo-box:

And that’s about it for the REST interaction in here. Once the user hits “OK”, the gadget uses a class called config (defined in config.js) to store the data into the settings repository of the gadget. The Gadget is also listening to the OK button and will update once it’s pressed (showing the data the user requested).

As you can see, the code needed for doing discovery is relatively simple. The missing part is the atomRequest class which in itself is fairly simple and the code that adds elements into the combo boxes which is not Excel Services specific.

Next up, updating the gadget to show the actual data/charts!

* Well, semi-parallel – the gadget infrastructure may or may not limit how many opened connections we can have concurrently.

Showing Excel ranges in the Excel Services Gadget

Shahar — Wed, 04 Nov 2009 10:27:00 GMT

The last post I wrote, I showed the Excel Services gadget and how it can be a great tool for bringing your Excel data right to the desktop. In this short post, I will show some of the other capabilities it has – namely, the ability to show ranges on top of charts.

In the settings page of the gadget, you have the ability to choose not only charts, but also ranges, tables and PivotTables. The workbook I have contains a simple color coded “score card” which contains the number of bugs I have and the average number – I can choose that score-card to show when the gadget is minimized – in some cases, it can be a better indication than the chart shown in the last post. The actual workbook that contains the range is relatively simple – here’s what that specific range looks like:

Here’s what the settings page looks like – notice that I still want to see the chart showing my stats when the gadget is maximized:

Once you hit OK and the gadget refreshes, you will see the score card showing in the gadget itself:

And just like in the previous post – clicking on the “Maximize” button will show the chart.

Here’s a short video that shows exactly how this works and what it looks like:

Enjoy!!

Introducing the Excel Services Windows 7 Gadget

Shahar — Tue, 03 Nov 2009 17:00:00 GMT

The past few posts have shown some of the basic REST functionality you can expect to get from the new Excel Services that will ship as part of SharePoint 2010. Before going into some of the more advanced features (well.. feature) of Excel Services REST, I thought I would show you a Windows Gadget we implemented for internal use. I will make the source code available either through the MSDN Code Library or through this blog in the very near future.

Now, gadgets are not hard to write, but they do require some knowledge of HTML and JavaScript. This Gadget is an absolutely great tool for people who have any sort of spreadsheet that contains any type of data that periodically changes and which is usually used as a sort of tracking application – instead of having to write the gadget yourself, you can just use the Excel workbook. You can think of any type of workbook – from the workbook that tracks your portfolio, to the one that displays information about your warehouse stock, to the one that tracks your project progress. This data is usually “locked” inside spreadsheets and one needs to manually open the workbook and actively look in. This gadget opens up an opportunity to use virtually any piece of information that resides within such workbooks and make it easily accessible right on your desktop – the gadget will make sure to periodically update the data so that with a simple glance, you can see exactly what’s going on!

Once installed, you add the gadget just like you would any other – run the “Desktop Gadget Gallery” in Windows 7 and double-click the Excel icon:

Once added to the desktop, you need to properly configure your gadget to show whatever information you want. In this example, we will show information about bug counts. For starters, you click the little wrench icon – that will get you to the settings screen:

Next, you type the name of the URL for the workbook in the “Workbook” field and hit Refresh. The Gadget will go and use REST discovery to figure out what elements exist in the workbook:

As you can see, the gadget lets you choose from any of the entities available in the workbook. For now, lets choose the “PersonalBugs” – it is what I like seeing on my desktop, so I can closely monitor my status.

As you can see, the chart is not really designed to be used in such a small space – clicking on the little arrow will “undock” the gadget (a term inherited from Vista) and will show the chart at full size:

Now, this looks much better. It can be even better though – if you noticed, in the first screenshot of the “Settings” screen, there are two combo boxes – one for the actual object you want to see and the other for the thumbnail. The nice thing is that you can set up the gadget to show you one element when it’s “minimized” and one when it’s “maximized”. In this example, we conveniently have a chart called “MiniPersonalChart” which contains the chart in a smaller format. Here is how you set the two objects up in the gadget:

Now, when the gadget is “minimized”, it will show the chart that’s better suited for smaller space (it has no header, legend or axis):

That’s it for this post! Next post will show how the gadget can show not only charts, but also show ranges!

Windows 7 RC – Media Streaming (“Stream” button in Windows Media Player)

Shahar — Thu, 07 May 2009 23:28:49 GMT

I found out about this feature a bit ago and.. Wow.. I am so impressed. The set-up procedure is a little convoluted, but once you do it, the thing just works.

Here’s the idea: Allow your identity (your Windows Live account, basically) to stream your media accross the interwebs. If my home computer has my entire outdated music library on it, I don’t need to copy the entire thing to my laptops to access it – I just make sure to associate my Windows Login user to my Live account user and voila – I can stream media from my house when I work!

Step by step:

You can associate your live-id to your windows user account by using the control panel, but Windows Media Player gives you a shortcut. In the Stream drop-down, choose “Allow Internet access to home media”:

Then, you will be presented with a dialog containing the options you have. You should click “Link online ID”:

Once you click that, WMP will bring you to a window that allows you to add an online ID provider. Click the “Add an online…” button:

Once clicked, you will be presented with providers. Click the “Windows Live” one – that will again redirect you to a download from Microsoft. Choose the correct architecture (x86 or x64) and download/install the package. Once you did that, going back to the “Link online IDs” dialog will look like this:

You now need to select the “Link online ID” on the WindowsLiveID highlighted item. That will ask you to log into Windows Live with your Live-ID. Once that’s done, the window will again change to show the linked account:

If you go back to Windows Media Player, you should choose the”Allow internet access to home media” option on the open dialog box (same as the second image in this post). Once clicked, the dialog should close and you should land back inside Windows Media Player. But now, you will have your home library available to choose from:

You can now play your music to your heart conent. Apparently, this also supports streaming of video. The quality seems kind’a random – I have seen it be very good (indistinguishable from the original) and pretty bad. I guess it takes your bandwidth into account:

Enjoy!!