The Excel Button - Bringing Excel Everywhere

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

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.

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:

How do I use it? Playing with the filters on the left, you can filter by state (clicking on the 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:

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

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:

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!