In Oct of this year, I blogged about the awesome new offering from the Excel team that gives developers the ability to create cool apps (like mashups) using an embedded Excel workbook on a host web page. Just using the Excel Services JavaScript API, a workbook stored on a public OneDrive folder, and standard web technologies, you can create some really powerful apps that run in the browser (for example an app that combines Excel and Bing Maps to create a “Destination Explorer” mashup that shows stats on specific travel locations). As if having that capability wasn’t enough, in this blog post I’m going one better by announcing the debut of the ExcelMashup.com site!

The ExcelMashup.com web site is a one-stop-shop for learning about how to get started developing rich, interactive mashups on your web site quickly using Excel Web App and the power of Excel formulas for calculation. At the heart of the site is the Get Started tab that should have you up and ready to start coding in minutes. There are also tabs to learn more about the technology, connect with the Excel development community, and find more information about related Excel development technologies. But by far, my favorite feature is the Interactive Code Snippets page.

Code Snippets page

image

The Interactive Code Snippets page lets you try out code on a “live” embedded workbook, so you can play with and explore the code real-time, in action. The page is split into 3 sections: Tasks pane, Code Snippets pane, and the Output pane.

1. The Tasks pane holds a list of the tasks you can try out. These are broken out into Basic Tasks and Full Examples:

Tasks pane

image

2. The Code Snippets pane holds the code snippet for the selected task. Also, the Code Snippets pane has additional tabs: one for API reference material that’s tailored to the object model used in the code snippet; and one for comments from the community.

Below the tabs for API References and Comments, there are 3 other small buttons shown in the Code Snippets pane.

  • Execute – Click this button to run the code in the code snippet
  • Reset – If you’ve altered the code in the code snippet, click this button to set the code snippet back to the original snippet
  • Parameters – If the code snippet takes parameters, this button will light up, indicating you can use it to enter the parameter(s)

There’s also a copy code link so you can copy the code snippet for the task and paste it into your web page.

But wait…there’s more! As if your thrill meter wasn’t already pegged, you can also alter the code in the code snippets pane and run that as well! That is, you can change a line of code—even add a whole function!--and then run the altered code snippet. As long as the code you added has the proper references and makes sense in the context, it should run.

DISCLAIMER: The code used in the Code Snippets pane is for instructional purposes only and is not intended for any other purpose.

Code Snippets pane

image

3. The Output pane displays the results of running the code snippet. One very cool feature of the Output pane is that it allows you to copy the code for the ENTIRE example web page using the HTML button. In this case, you don’t just copy the code snippet by itself; you copy all the code for the whole page, JavaScript and HTML. You could then paste that into a blank web page of your own and run it in the context of your own web site.

Output pane

image

 

Output pane HTML

image

 

We want to hear from you!

ExcelMashup.com is designed to be interactive with the user community. Visitors to the site can use the feedback button and the Comments pane on any of the code snippets to ask for more/different code snippets, suggest changes to site content, report bugs on the site, or even a kudos or two. New content will be posted to the site on a regular basis and some of it in response to user request. But why take just my word for it? Check out the ExcelMashup.com today!