How to embed Excel, PowerPoint, Word document into ADV

Discussion in 'Ask Baldy, Blame Cannonshot' started by chrome bandit, Nov 1, 2012.

  1. chrome bandit

    chrome bandit Wide footed adventurer

    Joined:
    Oct 3, 2009
    Oddometer:
    317
    Location:
    Seattle-ish
    This thread provides a tutorial describing how to embed a Microsoft Office Excel, PowerPoint, or Word document into a message here on ADV. These methods take advantage of the new release of Office Web Apps, which are free to use, as well as the HTML editor in vBulletin, which powers the forums on ADVRIDER.COM.

    Embedding a document into a forum message allows your thread 'readership' an easy and accessible way to read your document within the context of your message without spawning a new browser window. Here are some examples…

    Excel spreadsheet example
    <IFRAME height=676 src="https://r.office.microsoft.com/r/rlidExcelEmbed?su=68099805427695459&Fi=SDF1F06987CA7F63!931&kip=1&wdAllowInteractivity=False&Item=Itinerary&wdHideGridlines=True&wdDownloadButton=True" frameBorder=0 width=606 scrolling=no></IFRAME>
    This is a spreadsheet I used for mileage planning during my Alaska trip in 2011.


    PowerPoint example
    <IFRAME height=327 src="https://skydrive.live.com/embed?cid=00F1F06987CA7F63&resid=F1F06987CA7F63%21727&authkey=AKwsIJWqDwm6JzI&em=2" frameBorder=0 width=402 scrolling=no></IFRAME>
    This is a 'how-to' instruction guide for wiring up a Garmin to my 1200GS


    Word example
    <IFRAME height=288 src="https://skydrive.live.com/embed?cid=00F1F06987CA7F63&resid=F1F06987CA7F63%211437&authkey=AMkXAijmtAZwoOI&em=2" frameBorder=0 width=476 scrolling=no></IFRAME>
    This is just a sample document used to see how an embedded Word document works. Many people use Word as their go-to organization document (creating packing lists, itineraries, contact info, etc.)

    I'll use the next few messages in this thread to provide specific details for each of the apps.


    If you're comfortable with Microsoft Office and various web gymnastics, the 'how-to' overview looks like this, go right ahead and dive in&#8230;
    1) Upload or create your document on Skydrive in a public folder.

    2) Select the document while in folder view. Select the "Embed" menu that appears after you select.

    3) Follow the instructions to copy the embed code from Skydrive to your clipboard.

    4) Go to your message within whatever message you're creating.

    5) Select HTML editor mode - it's the icon in the upper right of the text message box with two versions of the letter "A". If you drift your mouse over it, the hover text reads "Switch Editor Mode"

    6) Paste the code at the appropriate location in your message.

    7) Preview to ensure everything looks good. Go back and edit if necessary.

    8) Punch the "Submit Reply" button!
    A few backgrounders...

    Your document must be on Skydrive in order for this to work. It's free to use up to 7GB of storage, which is plenty for document usage scenarios. There are a variety of ways to upload documents to Skydrive (from the Skydrive app, upload directly via web, or save from within Office), I'll refer you to Skydrive documentation if you need any assistance there.

    The instructions work for PCs and Macs. More background available on the Skydrive site.

    Skydrive works best with the latest versions of IE, FireFox, Chrome, and Safari. I'll be using the Windows/IE combo for instructional purposes below. FF/Chrome/Safari/Other users may experience slight differences&#8230;feel free to provide details below.

    Having a recent copy of Office for Windows or Mac is not required, but recommended for best editing and presentation experience. If you don't have Office on your computer (such as iPad users), you can create and edit documents on Skydrive with the Web Apps.

    If you're a fan of OneNote and know that there's also an OneNote web app (like me), alas, there is no embedded viewer for sharing notes with folks. To share OneNote Notebooks with people, just grab the link from Skydrive.


    More details about Office Web Apps are available here, including other embedding examples.
    #1
  2. chrome bandit

    chrome bandit Wide footed adventurer

    Joined:
    Oct 3, 2009
    Oddometer:
    317
    Location:
    Seattle-ish
    Here's an example of how embedding will appear on ADV...

    <IFRAME height=676 src="https://r.office.microsoft.com/r/rlidExcelEmbed?su=68099805427695459&Fi=SDF1F06987CA7F63!931&kip=1&wdAllowInteractivity=False&Item=Itinerary&wdHideGridlines=True&wdDownloadButton=True" frameBorder=0 width=606 scrolling=no></IFRAME>
    This is a spreadsheet I used for mileage planning during my Alaska trip in 2011.


    1) Create a public folder on Skydrive. http://www.skydrive.com

    2) Upload your spreadsheet to the public folder. You can do this via any of three ways: using the Upload feature via the web interface; using the Skydrive app; saving from Office 2010 or 2013.

    3) Grab the embed code to the spreadsheet: open the spreadsheet in the Excel Web App. Select File, then Share, then Embed. See the options menu...

    [​IMG]

    ...adjust your options as needed. Excel has the most options to fiddle with of all the web apps&#8230;if you're not sure what to select, use the default settings. Copy the Embed code to your clipboard.

    4) Go to your message on ADV. Click the Switch Editor Mode button to go to HTML mode, which is here&#8230;

    [​IMG]

    ...you will not see much happen when you click it, only the scroll bar appears in the document window.

    5) Paste your Embed code into the appropriate place within your message.

    6) Preview your post to ensure formatting works okay.

    7) Punch the "Submit Reply" button!
    #2
  3. chrome bandit

    chrome bandit Wide footed adventurer

    Joined:
    Oct 3, 2009
    Oddometer:
    317
    Location:
    Seattle-ish
    Here's an example of how embedding will appear on ADV
    <IFRAME height=327 src="https://skydrive.live.com/embed?cid=00F1F06987CA7F63&resid=F1F06987CA7F63%21727&authkey=AKwsIJWqDwm6JzI&em=2" frameBorder=0 width=402 scrolling=no></IFRAME>
    This is a 'how-to' instruction guide for wiring up a Garmin to my 1200GS


    1) Create a public folder on Skydrive. http://www.skydrive.com

    2) Upload your presentation to the public folder. You can do this via any of three ways: using the Upload feature via the web interface; using the Skydrive app; saving from Office 2010 or 2013.

    3) Grab the embed code to the presentation: open the document in the PowerPoint Web App. Select File, then Share, then Embed. See the options menu&#8230;

    [​IMG]

    ...adjust your options as needed. Copy the Embed code to your clipboard.

    4) Go to your message on ADV. Click the Switch Editor Mode button to go to HTML mode, which is here&#8230;

    [​IMG]

    ...you will not see much happen when you click it, only the scroll bar appears in the document window.

    5) Paste your Embed code into the appropriate place within your message.

    6) Preview your post to ensure formatting works okay.

    7) Punch the "Submit Reply" button!
    #3
  4. chrome bandit

    chrome bandit Wide footed adventurer

    Joined:
    Oct 3, 2009
    Oddometer:
    317
    Location:
    Seattle-ish
    Here's an example of how embedding will appear on ADV
    <iframe src="https://skydrive.live.com/embed?cid=00F1F06987CA7F63&resid=F1F06987CA7F63%211437&authkey=AMkXAijmtAZwoOI&em=2" width="476" height="288" frameborder="0" scrolling="no"></iframe>
    This is just a sample document used to see how an embedded Word document works. Many people use Word as their go-to organization document (creating packing lists, itineraries, contact info, trip report books, etc.)


    1) Create a public folder on Skydrive.

    2) Upload your document to the public folder. You can do this via any of three ways: using the Upload feature via the web interface; using the Skydrive app; saving from Office 2010 or 2013.

    3) Grab the embed code to the document: open the document in the Word Web App. Select File, then Share, then Embed. See the options menu…

    [​IMG]

    ...adjust your options as needed. Copy the Embed code to your clipboard.

    4) Go to your message on ADV. Click the Switch Editor Mode button to go to HTML mode, which is here…

    [​IMG]

    ...you will not see much happen when you click it, only the scroll bar appears in the document window.

    5) Paste your Embed code into the appropriate place within your message.

    6) Preview your post to ensure formatting works okay.

    7) Punch the "Submit Reply" button!
    #4
  5. Flood

    Flood F5lood.

    Joined:
    Oct 18, 2005
    Oddometer:
    10,248
    Location:
    Austria
    Very cool, and it doesn't seem to crash the thread. :thumb.

    FWIW, the PowerPoint doesn't work at all in Opera and crashes in Firefox 3.6. Works fine in Chrome.
    #5
  6. chrome bandit

    chrome bandit Wide footed adventurer

    Joined:
    Oct 3, 2009
    Oddometer:
    317
    Location:
    Seattle-ish
    Awesome. Thank for doing a browser cross check. I don't have Opera, so it's not in my matrix. Everything works fine in my FireFox, which is now up to v16.

    Let's have some more fun with Excel next.
    #6
  7. chrome bandit

    chrome bandit Wide footed adventurer

    Joined:
    Oct 3, 2009
    Oddometer:
    317
    Location:
    Seattle-ish
    There's a fun thread over in the Oilhead Boxers forum tracking mileage by model year. (Please do contribute to thread if you're a 1200 GS/GSA owner!)

    One of the current takeaways that mileage on the bike goes down with more recent ownership...

    <iframe width="485" height="318" frameborder="0" scrolling="no" src="https://skydrive.live.com/embed?cid=00F1F06987CA7F63&resid=F1F06987CA7F63%211447&authkey=AOivbOzZn9rQWMY&em=2&Item=AveMiles&wdDownloadButton=True"></iframe>

    ...although it's somewhat of an obvious data point, it is fun to see average bike mileage by model year.

    With the additional use of tables and filters, we can create a chart showing total submissions by mileage range, and we can also narrow down by model year using the filter in the upper left hand corner. Try it out...

    <iframe width="475" height="411" frameborder="0" scrolling="no" src="https://skydrive.live.com/embed?cid=00F1F06987CA7F63&resid=F1F06987CA7F63%211447&authkey=AOivbOzZn9rQWMY&em=2&Item=Distribution&wdDownloadButton=True"></iframe>

    When you're done playing with the year filter, just cancel the filter to get back to showing total distribution. Don't worry about making changes to the file with the filter, that activity happens locally in your browser, the source file doesn't change.

    This functionality requires the desktop version of Excel (2010 and higher) to create, but it's free to post on Skydrive and display in an embedded message.

    Enjoy!
    #7