Tuesday, January 1, 2013

Interacting with Your Website’s Data Using Web Excel Mashups

AppId is over the quota
AppId is over the quota

This post is brought to you by Harrison Gordon, a Program Manager on the Excel Services team.

What exactly is an Excel Mashup? With Web Excel, you can embed workbooks into your website or blog. This alone is really powerful and lets you show a workbook directly in your website (it also lets you easily sort, filter, and interact with the workbook as if you were in Web Excel). For more info on embedding a workbook, check out our previous blog post here. If you embed the workbook as a mashup, you can add JavaScript to your website to set or grab data and “mash” it up with other services or functionality. There are a ton of things you can do, but here are a few to give you just a taste of what’s possible:

Grab data from Facebook, Twitter, or any other source and add it to a table in an Excel workbook for easy sorting, filtering, and pivoting.Take data from an Excel workbook and visualize it in ways you can’t in Excel.

Use the Excel Button to quickly add sorting, filtering, and charts to HTML table data in your website or blog.

ExcelMashup.com has all of the resources you need to get coding with Web Excel right away. Want to add the Excel Button? Try it out and then create the Excel Button code using our Excel Button generator. Want to see what’s possible with our JavaScript API? Walk through examples, tutorials, and use the JavaScript code explorer to get started writing code.

To show the power of Excel Mashups and how quickly you can build one, here’s a Magic 8 Ball example (let’s call it the “Excel 8 Ball”). I created a workbook in Excel that randomly chooses between the original 8 Ball’s 20 iconic responses:

Magic 8 Ball example
I could just embed this workbook onto my webpage, but then how would my visitors be able to “shake” the 8 ball? It’s no fun until you get the answer you want, after all.

This is where the magic of Excel Mashups come in – I can add a button to my website called “Shake!” and use that to tell my workbook to recalc – that will change the value on my Excel 8 ball.

Upload the workbook to SkyDrive – you can download this workbook here.

Open the workbook in the Excel Web App. In the Home ribbon, press “Share” -> “Embed”. Your configurator should look like this (note that “Ball” is selected and the Embed code is “JavaScript”):


Copy the Embed Code on the bottom.

This is the tricky part, so I’ll walk you through some tips to make this easier. Let’s take a look at the copied code and break it down:

This is the DIV that we will place the workbook in – you should copy/paste it into the appropriate spot in your website.


This is the JavaScript that is necessary to load the workbook – you should place this after your BODY tag (this way, the rest of your page will load before the workbook does, it will keep your page running quickly).

I created a JavaScript file that makes working with the JavaScript API a bit easier. Add these Script tags between the two Excel script tags. It should look like this: