Creating webpages with Excel Web App mashups

Pages in this article

  1. Preparations
  2. JavaScript
  3. Web controls
  4. Demo with controls
  5. Dynamic demo
  6. Conclusion

Prepare an Excel file to create a Mashup

First of all, you need to create a file on your OneDrive which is public, i.e. everyone can "see" that file. Alternatively, you can also create a public folder. All files in that folder can be viewed by anyone.

Skydrive folder

A folder in my Onedrive.

Once the file is uploaded, check the box just before its name and then click the "Embed" link shown in the screenshot above.

The window shown below opens up:

The second embed screen

The embed screen

If you want to embed a static file and do not need to change the size of the box the embedded file will be in on your page, just click the Copy link highlighted in the screenshot. The code will look similar to this:

<iframe title ="Preview" scrolling="no" marginheight="0" marginwidth="0" frameborder="0" width="402px" height="346px" style="padding:0;background-color:#fcfcfc;" src="https://r.office.microsoft.com/r/rlidExcelEmbed?su=-5430218907388983095&Fi=SDB4A3FCAC9C7848C9!285&ak=t%3d0%26s%3d0%26v%3d!AJHqJpkd-Q5axR8&kip=1"></iframe>

More often however, you will want to change some settings, such as whether or not the visitors of your site can interact with the file. Click the "Customize this embedded Excel workbook" link highlighted above. Another screen pops open:

Customize embedded Excel workbook dialog

The Customize embedded Excel workbook dialog

I have put a red rectangle around some parts of this screen. The top box has the items in your file which you can select. The Excel Web App will only show the item you select in the embedded file on your website. Very convenient if you only want to show a chart.

The second box highlights one of the interaction restrictions you can put into action.

Once you have the settings you need, you can copy the needed HTML code from the textbox at the bottom. Note the JavaScript link; this is what the rest of this article will use to build communication between the web page on the client and the Excel web app control.


 


Comments

All comments about this page:


Comment by: illnino (19-12-2011 07:11:15) deeplink to this comment

Hi, Jan

I couldnt find the way to get file token. You mentioned in your second post(embeddedexcel02.asp). The method could be found in this page. But I could only find something similar

<iframe width="402" height="346" frameborder="0" scrolling="no" src="https://r.office.microsoft.com/r/rlidExcelEmbed?su=3104269156659581890&Fi=SD2B149459D1E553C2!1357&ak=t%3d0%26s%3d0%26v%3d!ADMak9JFq12jrXE&kip=1&wdAllowInteractivity=False&wdHideGridlines=True&wdHideHeaders=True&wdDownloadButton=True"></iframe>

File token:SDB4A3FCAC9C7848C9!285/-5430218907388983095/t=0&s=0&v=!AK3ybHnbJCLh5H0

May you please help?


Comment by: Jan Karel Pieterse (19-12-2011 08:11:00) deeplink to this comment

Hi Illnino,

Best is if you click on the JAVAScript link shown in the last screenshot shown above. The filetoken will be listed in the JAVAScript. Click the Copy link and paste the copied script into e.g. Word so you can easily see the JAVAScript code. Look for a line like:

// Use this file token to reference the skydrive file in the Excel APIs
var fileToken = "SDB4A3FCAC9C7848C9!285/-5430218907388983095/t=0&s=0&v=!AJHqJpkd-Q5axR8";


Comment by: sharath (28-2-2018 09:59:03) deeplink to this comment

how file token can be retrived from th url


Comment by: Jan Karel Pieterse (28-2-2018 13:58:54) deeplink to this comment

Hi sharath,

The file token is embedded into the iframe tag which is shown above. The token equals the part after the parameter su in the url.
?su=-5430218907388983095&Fi=SDB4A3FCAC9C7848C9!285&ak=t%3d0%26s%3d0%26v%3d!AJHqJpkd-Q5axR8

So this is the file token:
-5430218907388983095&Fi=SDB4A3FCAC9C7848C9!285&ak=t%3d0%26s%3d0%26v%3d!AJHqJpkd-Q5axR8


Comment by: shararth (1-3-2018 05:45:17) deeplink to this comment

Hi jan,thanks for the reply.
Can you pick a file token from this url

WopiFrame.aspx?sourcedoc={4e16ddfa-e7ec-45e8-8e22-b68f927eb648}&action=embedview&wdAllowInteractivity=False&wdHideGridlines=True&wdHideHeaders=True&wdDownloadButton=True&wdInConfigurator=True"


Comment by: Jan Karel Pieterse (1-3-2018 08:42:51) deeplink to this comment

Hi,

I would expect it to be 4e16ddfa-e7ec-45e8-8e22-b68f927eb648, but since I have not exerimented with the new (changed!) Excel embedding experience I am not entirely sure.


Have a question, comment or suggestion? Then please use this form.

If your question is not directly related to this web page, but rather a more general "How do I do this" Excel question, then I advise you to ask your question here: www.eileenslounge.com.




To post VBA code in your comment, use [VB] tags, like this: [VB]Code goes here[/VB].