Create smashing mashups with Excel

Today's post is brought to you by Larry Waldman, a program manager on the Excel team. You may remember Larry from his previous posts on embedding Excel files on web sites and designing Excel solutions for the Web.

Hello, web developers! Today, I want to point you to ExcelMashup.com, a new site from the Excel team that is designed to help you get started creating spreadsheet-based mashups. To create an Excel mashup, you use Excel Web App to create an embedded workbook that is stored on SkyDrive, and then displayed in a host web page. Once you've embedded the workbook, you use the JavaScript API to programmatically interact with it. 

Getting started

To get started, do the following three things:

  1. Sign up for a free SkyDrive account, if you don't already have one.
  2. Upload your Excel file to SkyDrive.
  3. Grab the JavaScript embed code snippet and start coding!

We've created some example mashups to help you see what's possible, including a Daily Calories Calculator and a Destination Explorer.

Example 1: Daily Calories Calculator

In this example, you search for a specific food, choose a serving size, and then see dietary information appear inside cells in an embedded workbook. This interactivity is accomplished by using the JavaScript API. This example also shows how to use the calculation and charting features of Excel Web App to render a chart that compares daily calorie intake to recommended dietary guidelines.

 Daily Calories Calculator mashup

To learn how to recreate this example, click the text in the upper-right corner of the page. Then, to find sample code and instructions, click a specific area on the page, such as the search box or meal input worksheet. 

Sample code and instructions for recreating Meal Input worksheet

Example 2: Destination Explorer

In this example, select a place to visit, and you'll see information about the area's average temperature and precipitation, along with monthly visitor patterns. (Fair warning: This information is intended only for illustrative purposes, so please don't rely on it for actual trip-planning activities!) You'll also see related information about your destination appear in Bing Maps.

Destination Explorer mashup 

To find out how to we created the Destination Explorer mashup, refer to this how-to guide.

We hope you're as excited as we are about interactive data mashups, and that you'll find ExcelMashup.com helpful as you create with your own. Feel free to ask questions in the Excel Web App forums or use the interactive code explorer, where you can experiment with our API right there on the site. Developers and JavaScript experts should feel right at home!

If you have comments, questions, or suggestions, please let us know by leaving a comment here or on ExcelMashup.com.

Office Blogs Comments

Comments: (7) Collapse

  • That is great new functionality you guys have created!

    I liked it so much I wrote a tutorial here:

    www.jkp-ads.com/.../embeddedexcel00.asp

  • Hi Jan Karel,

    Thanks so much for writing up the tutorial and posting the link. We're delighted to hear that you like the new functionality. Hope you're doing well!

    - Anneliese

  • After spending about 20 hours on this, I can't get functionality in IE. I can embed a worksheet and manipulate its contents with html forms, which is totally amazing! But a workbook won't load at all via js in IE (tested v7 and 8). I made a super simple test book, and a page which loads it both via iFrame and JS. The embed codes are taken verbatim from SkyDrive. In FF and Chrome, both the iFrame and JS versions load. In IE, only the iFrame. Here's the test page. www.jonahfeld.com/excelfeaturetesting.html The killer functionality is being able to manipulate the worksheets contents with form controls, which requires embedding with js. Any idea why this isn't working in IE?

  • Thanks James! That's it!

    I had tinkered with the JS to read the error code number before making the simple test page, which if I remember right, was 10. I imagine that is the value for 'HtmlDocumentModeNotSupported', but I doubt I'd have stumbled across your solution. My expertise is more with Excel than the web at the moment. Thanks so much!  

    For others reading this thread, the doctype used for success was HTML 4.01 Frameset. (The full tag was removed from James' comment above.)

  • Could someone perhaps post a couple of working example doctype declarations here so we have it in one place?

  • Nice post ! but do you know how to add a barcode into EXcel? <a href="www.keepautomation.com/.../">here </a> will give you the answer.

  • here

    www.keepautomation.com/.../excel_barcode

Comments: (loading) Collapse