Embed excel file using Javascript (or some other method)

[charliemullin]

In a project, I want the learner to use Excel for some exercises. I think it's possible to publish an Excel file to a website, then grab both the embed syntax as well as the javascript code that will display that excel file with most of its functionality intact. I've managed to get both these sets of code for a test Excel file using the Microsoft WebApp capability.

Here's the Javascript code for this sample file:

<div id="myExcelDiv" style="width: 402px; height: 346px"></div>

<script type="text/javascript" src="http://r.office.microsoft.com/r/rlidExcelWLJS?v=1&kip=1"></script>

<script type="text/javascript">

  /*

  * This code uses the Microsoft Office Excel Javascript object model to programmatically insert the

  * Excel Web App into a div with id=myExcelDiv. The full API is documented at

  * http://msdn.microsoft.com/en-US/library/hh315812.aspx. There you can find out how to programmatically get

  * values from your Excel file and how to use the rest of the object model.

  */

  // Use this file token to reference Monthly-college-budget1.xlsx in Excel's APIs

  var fileToken = "SDF7DD05E3DFEB03A5!116/-586305900215860315/t=0&s=0&v=!ADQIX85gdpgH9M4";

  // run the Excel load handler on page load

  if (window.attachEvent) {

  window.attachEvent("onload", loadEwaOnPageLoad);

  } else {

  window.addEventListener("DOMContentLoaded", loadEwaOnPageLoad, false);

  }

  function loadEwaOnPageLoad() {

  var props = {

  uiOptions: {

  selectedCell: "'Monthly College Budget'!N1"

  },

  interactivityOptions: { }

  };

  Ewa.EwaControl.loadEwaAsync(fileToken, "myExcelDiv", props, onEwaLoaded);

  }

  function onEwaLoaded(result) {

  /*

  * Add code here to interact with the embedded Excel web app.

  * Find out more at http://msdn.microsoft.com/en-US/library/hh315812.aspx.

  */

  }

</script>

I tried dropping this code into the script window for a button action in Captivate 8, then previewed using F12, but there was no response when I clicked the button. 9Wouldn't that have been great if it was that simple?)

I'm guessing I need to invoke the new Captivate 8 common JavaScript API, and maybe more.

Can anyone advise on a way to do this?

Thanks!

[Jim_Leichliter]

I'd recommend using the HTML page you have posted above and copying that file to your published project.  Then user a web object to display that web page.  The web page would have the embedded excel file inside.  Hope that makes sense.

[charliemullin]

Do you mean copy the HTML file to the directory where my published Captivate files reside?

Here is the url generated by MS OneDrive to my sample file (I've excluded the http:// prefix)

onedrive.live.com/redir?resid=F7DD05E3DFEB03A5!116&authkey=!AA5CqGV1HXFpQNQ&ithint=file%2cxlsx

When I paste the whole url, along with the http:// prefix, into the address property of a Cp8 web object, I am able to see a preview of the excel file. But when I use either F12 or F11 to preview in a browser, the web object is white - nothing is there.

I have no trouble adding other sites, which preview just fine after hitting F11 or F12. I'm guessing is there some secret sauce on one drive when trying to use excel online that may be confounding things.

By the way, here's what that url I listed above resolves itself like this when I include the http:// prefix:

Microsoft OneDrive - Access files anywhere. Create docs with free Office Online.

So, that's snarky.

What I'm actually trying to do is display an excel workbook in Cp8 that a user can interact with. I think I can probably do this using MS Excel Online via One Drive but it's eluding me.

I think I need more specific guidance, if possible. You can try using that url above in a web object to see if it works for you.

Thanks!

Charlie

[Jim_Leichliter · Accepted solution]

I just tested this and it works:

In your excel workbook, go to the "File" tab, then "Share", then "Embed".

At the bottom of the dialog, you'll see the embed code.  What you want is the "src" attribute that has the URL to the sheet.  Copy only this URL and use that in the web object.  See if that makes a difference.

[charliemullin]

That worked perfectly! It's so obvious once you tell me the answer. Thanks for helping me out with this. This capability seems very powerful to me and extends some eLearning design possibilities that weren't easily available.

Thanks for all you help, Jim.