Back
Excel

The Excel Button – Bringing Excel Everywhere

imageThis blog post is brought to you by Melissa MacBeth, Lead Program Manager on the Excel Web App team.

 

clip_image001[4]

As Dan mentioned in his blog post, there’s data all over the web, and with the Excel Button we are giving you a way to get deeper insights with nothing more than the click of a familiar looking button. In this post, I’ll go a little deeper into the HOWS and WHYS of this new awesome feature.

What is it? The Excel Button, also known as the Excel Interactive View, is like the Facebook Like Button, but for data on the web. When you find an Excel Button, click it and you’ll see the simple HTML table that you were just looking at get transformed into an immersive and interactive Excel experience complete with filters, conditional formatting, sorting, and charts. And of course, you can go from there directly into Excel Web App or download it to your desktop to open it in Excel.

If you are a website owner and want to get the Excel Button on your page, you just need to add one line of HTML above the table of data and a JavaScript tag to the bottom of the page. More details on this below.

clip_image003[4]

Why did we do it? There is so much data on the web, and yet it is often presented in a way that may leave you wanting more. You can copy the data into Excel, but who has time for that? Sometimes you are just left hoping the article or source of the data will fill you in on what is interesting. Wouldn’t it be nice to spend a little bit more time playing with the data yourself?

Take this example below about America’s top colleges. It lists the top 25 colleges, along with state, cost, and freshman class size. It wasn’t hard to find several sites with college lists, but most of the sites just have a table of data – they leave you to find your own insights. When I looked at the data in the table below, I started wondering…

  • Does Washington State have any colleges in the top 25? (yes! Whitman College)
  • Are the most expensive schools the best schools? (turns out no)
  • Are the schools with smaller freshman classes more highly ranked? (it varies widely, so not necessarily)

Try it now:

Rank Name State Cost Freshman Class Size
1 United States Military Academy NY 0 1,263
2 Princeton University NJ 49,830 1,243
3 California Institute of Technology CA 48,990 236
4 Williams College MA 49,530 540
5 Harvard University MA 50,250 1,666
6 Wellesley College MA 50,026 596
7 United States Air Force Academy CO 0 1,286
8 Amherst College MA 50,230 439
9 Yale University CT 51,400 1,318
10 Stanford University CA 51,760 1,703
11 Massachusetts Institute of Technology MA 50,100 1,048
12 Swarthmore College PA 50,381 372
13 Columbia University NY 51,406 1,356
14 Centre College KY 39,200 336
15 Haverford College PA 51,637 327
16 Boston College MA 52,060 2,167
17 Northwestern University IL 52,120 2,078
18 Bowdoin College ME 50,570 488
19 Vassar College NY 51,370 638
20 Whitman College WA 46,212 401
21 University of Chicago IL 53,310 1,306
22 Kenyon College OH 49,260 456
23 Carleton College MN 50,000 489
24 Colby College ME 50,120 482
25 Middlebury College VT 52,460 576
Rank Name State Cost Freshman Class Size
1 United States Military Academy NY 0 1,263
2 Princeton University NJ 49,830 1,243
3 California Institute of Technology CA 48,990 236
4 Williams College MA 49,530 540
5 Harvard University MA 50,250 1,666

 

How do I use it? Playing with the filters on the left, you can filter by state (clicking on the clip_image006[4] next to State clears the filter) to see which of the top schools are in Washington state. Looking at the table, clicking on the Cost header sorts the table to find the most expensive school on the list- the University of Chicago – at number rank of 21. Switching over to the charts, clicking on the last chart shows freshman class size versus ranking, which shows that there isn’t a correlation.

To see more of the chart, click on the chevrons on the right and left sides to hide the filters and charts:

clip_image008[4]

clip_image009[4]To provide feedback on the Excel Interactive View or learn more about Excel or about how to put this same button on your site, you can click on the icon.

clip_image010[4]By clicking on the Excel icon next to Filters, you can look at the data in the Excel Web App or download it and then open it in Excel.

clip_image012[4]

clip_image014[4]

Once in the Excel Web App, you can continue playing and gaining even more insights into the data:

clip_image016[4]

That’s awesome, how does it work? By now you are probably curious how all of this magic happens. Here is how it works: the plain HTML that defines the table is sent to Excel servers in the cloud where it is parsed, put into an automatically generated spreadsheet complete with a table that includes sorting and conditional formatting, the most relevant charts, and a set of filters based on the most relevant columns in the table. The spreadsheet is then shown in the Excel Interactive View back on the originating website. No additional resources are needed from the website owner who added the button to the table on their site.

How do I add this to my site? To put the Excel Button on your site, just go to ExcelMashup.com where you’ll see that it is as easy to add the Excel Button as it is to add a YouTube video or the Facebook Like button. On ExcelMashup, you can play with a demo, learn about all of our APIs, and generate a code snippet for your table using our simple configurator shown below:

clip_image018[4]

When you click “Generate Code” you’ll get the custom code, but if you just want it now, here are the instructions:

1. Copy and paste this code above the HTML table you want to add the Excel Button to:

<a href=”#” name=”MicrosoftExcelButton” data-xl-buttonStyle=”Standard”></a>

2. Copy and paste this code (as a single line) right above the closing body tab (</body>):

<script type=”text/javascript” src=”http://r.office.microsoft.com/r/rlidExcelButton?v=1&kip=1″></script>

Can I use this on O365 and SharePoint? Yes, you can! You can use the Excel Button directly, as long as you don’t mind having data sent outside the corporate firewall momentarily. You can also use the Named Object View, where when you publish your workbooks to SharePoint, you will have the same degree of interactivity and beautiful user experience. And because you are using existing workbooks, you can add more functionality such as timeline slicers, pivot tables, apps for Office, etc. and create even richer and more beautiful dashboards than are available from the Excel Interactive View.

It is all about Data! Data is all over the internet, and now Excel is all over the internet too. For website owners, it is now easy to get people excited about the data on your site and to keep them on your site longer. For people browsing the web, it’s easier than ever to interact and gain insights from data, all using the power of Excel!

Soon you’ll start seeing the Excel Button popping up all over the internet! Help make it happen and let us know what you think using comments below!

Notice: Array to string conversion in D:\home\site\wwwroot\wp-includes\taxonomy.php on line 3255 Notice: Array to string conversion in D:\home\site\wwwroot\wp-includes\category-template.php on line 1245

Tags

Join the conversation

18 comments
  1. Very interesting! I’m on Windows 8 RP / IE10 desktop, and the Excel button is not showing up for me here (it does appear to be there via View Source). It does appear in the latest Firefox, although the button is somewhat broken (dual vertical images are not aligned). If I go to excelmashup.com, the button does appear in IE, and the button appears correctly in both IE and FF. Quite a bit of javascript on this page, some conflicts, or is it just me?

    • @Kip – The problem with the Excel Button not showing up in IE10 is known (unfortunately). The Excel Button works in Standards mode, and the Office blog infrastructure is in IE7 mode (for some reason I don’t know but am following up on). http://www.ExcelMashup.com is a good example of how the button works as well, so glad you found that.

  2. This such an incredible idea. Although I can imagine you’re already working on expanding this for the full Office suite—I can’t wait to try this for Word and PowerPoing! :-D

  3. Is there a limit to the number of rows which this can handle? Could it handle 40k+ rows?

  4. @timbjames: The only limit is the number of rows that Excel can handle on a sheet (~1 million), so 40K should be fine, so long as they are all on the same web page.
    @astroXP: Thanks!

  5. Hmm so this only takes the table below the button and turns it into some cool lightbox with different charts? How useful is that? I expected to be able to link to a xls file and display that on the webpage instead.

  6. This is such a great idea, it just a pity that your precious #1 Excel audience (poor corporate employees) are most likely stuck behind firewalls that completely block this capability! What were you thinking?

    • @Richard – Hopefully I can relieve your worry a bit, on two fronts: First, for users who do want to use this inside the firewall, it should work fine in most cases (unless the firwall blocks all Web traffic) since it runs in the web browser and is standard HTML. Additionally, the audience for the Excel Button is all Internet users in the context of their day-to-day Web browsing. We see this being super-useful on sites like cnn.com, espn.com, government data sites, personal blogs, and more.

  7. Really awesome, guys ! It could be better if we can choose the language used for the data. Actually I’m using Firefox in French, but the row data are US currency numbers ($123,456.00) and the JS tries to parse the data as a French number instead of US currency numbers. I didn’t find in the documentation how I could say the data are US and not FR….

  8. BTW, the example works great with Firefox, but with IE8 (in standard mode) I just see a blank popup with a JS error : "Webpage error details

    User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; EmbeddedWB 14.52 from: http://www.bsalsa.com/ EmbeddedWB 14.52; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; Tablet PC 2.0; InfoPath.3; .NET4.0E; .NET4.0C; MS-RTC LM 8)
    Timestamp: Thu, 9 Aug 2012 13:36:48 UTC

    Message: Could not get the overflow property. Invalid argument.
    Line: 2
    Char: 8614
    Code: 0
    URI: http://s1-excel-beta.vo.msecnd.net/x/1541281020__layouts//EwaMoss.ee.js&quot;

  9. The idea of Interactive View (IV) is really neat. I combined my knowledge of HTML and JavaScript with IV to explore things like multiple tables with IV buttons and improved formatting for multiple buttons.
    http://www.tushar-mehta.com/publish_train/data_visualization/15c%20interactiveview/index.htm

    The pièce de résistance, if I say so myself, is the ability to slice and dice (almost) any table in (almost) any webpage.
    http://www.tushar-mehta.com/publish_train/data_visualization/15c%20interactiveview/dynamic.htm

  10. "For website owners, it is now easy to get people excited about the data on your site and to keep them on your site longer. "

    WRONG!!! This viewer, which looks great, means that people can download my data and get off my website straight away…
    Is there any way of opting out of the download option? This is what is keeping me away from using this.

Comments are closed.