Back
Excel

Updated! Embedding Excel Web App in your own web page or blog


image

 

Today’s blog post is brought to you by Dan Parish a Program Manager on the Excel Web App team.

 

New! See the end of this post for updates on how to embed.

One of the feature requests we frequently get for Excel Web App is “it would be great if there was a way to embed my workbook in my blog”. Well, starting today, if you have an Excel workbook (xlsx or xlsb only) or a PowerPoint presentation on SkyDrive, you can embed them! In fact, the following embedded PowerPoint presentation will show you how:

There is also a help article (referenced at the end of the presentation) that contains all of the details of how to embed an Excel workbook.

 

Once you’ve chosen to embed an Excel workbook on SkyDrive, you’ll see the default embed code and a preview of what it will look like on the embed page:

You don’t have to stick with the default embed code though, since the embed code for Excel Web App is also customizable. The embed page contains a link to a help article that shows you how you can customize the embed code to get the embedded workbook to look and behave exactly how you want it to. For example you can have the embedded viewer show only a particular item, you can set the active cell, and you can modify the types of interactivity that are allowed such as sorting and filtering, or typing.

Excel workbooks that are embedded are still “live”, so whenever you update the source workbook, the embedded viewer will display that updated content as well. However, modifications that people make in the embedded viewer are always personal and temporary (only for that browser session), and so don’t affect the underlying workbook itself. This allows people consuming your content to explore it themselves without changing it for everyone.

Let’s look at a few examples of how you can use an embedded Excel Web App in your blog. Let’s say you are on a diet, and want to use the power of peer pressure to keep you on it. So you weigh yourself weekly, plug the result into an Excel workbook, and chart your progress. Now you can put that chart in your blog for your friends and family to see, just like so:

The embed code for this looks as follows:

<iframe src=”http://r.office.microsoft.com/r/rlidExcelEmbed?su=-3211708242785571568&Fi=SDD36DB85E9A926D10!108&AllowInteractivity=False&Item=WeightChart” width=”385” height=”335” frameborder=”0″ scrolling=”no”></iframe>

 

Note that I’ve changed the URL provided by the embed page as shown in red. I’ve specified a specific item to display using the Item parameter, which in this case is the name of the chart. I’ve also customized the height and width of the IFRAME to make it fit my chart perfectly.

 

So everyone loves your chart, but you continually get requests for how to calculate BMI as well. You’ve already created a workbook that does just that, so now you can simply embed it in your blog and point people there so they can use it too:

The embed code for this looks as follows:

<iframe src=”http://r.office.microsoft.com/r/rlidExcelEmbed?su=-3211708242785571568&Fi=SDD36DB85E9A926D10!107&AllowInteractivity=True&AllowTyping=True&Item=BMICalculator&ActiveCell=’BMI Calculator’!G4” width=”440” height=”615” frameborder=”0″ scrolling=”no”></iframe>

 

Note that in this example I’ve used every option that the embedded viewer has: I’ve enabled interactivity which is required to enable typing, I’ve enabled typing to allow people to fill out their height and weight, I’ve specified a specific item to render which in this case is a named range, and I’ve set the active cell.

 

If you’d like to see the full workbook an embedded viewer is based on, you can click the  icon, which will navigate you to the public workbook on SkyDrive.  If you’d like to re-embed an embedded workbook, you can get the code to do that too by clicking the icon.

 

We hope you enjoy this new functionality, and please leave any comments and/or questions in the feedback section!

 

New! How-tos, examples, and ideas