How to view Microsoft Documents on your Moodle site the JQuery way (Part 1)

Microsoft Store. That's a nice logo. Source: http://en.wikipedia.org/wiki/Microsoft

Disclaimer: For Microsoft Office files (Word, Excel, PowerPoint) this only works with  files that are available publicly via a public URL. It won't work for Ms Office documents that are added to a Moodle course as a resource.

Ever since I started using Moodle as a file repository for the teachers and lecturers at my work place, I had always wanted to view Microsoft Word, Excel and PowerPoint files easily on my Moodle site. The easier and faster, the better. You know the story.

Figure 1. Many thanks to Davo Smith and others for
the time-saving drag-and-drop feature of Moodle!

Figure 2. What the file looks, sitting pretty on your Moodle coursepage.

Figure 3. Click on the Ms Word file, and Google
Chrome instantly downloads it. So this means I need to run Microsoft Office to view the file's contents.
Fine and good. Everyone does this. But what if I just wanted to view the file without any fuss?

Figure 4. Using Internet Explorer to access and download the Moodle file resource
invokes a Window prompt like this. Clicking on "Open" gives you...

Figure 5. ..this! You will need at least another two
mouse-clicks before you get to view the file.

So after uploading a Word file to your course page by dragging and dropping, each time you click on the file, depending on which browser you use, the file either gets downloaded instantly or you are prompted to either open the file or download the file. Why can't I just view the file there and then without having to invoke Microsoft Office ?



As this is now my 200th blog post on Moodurian.blogspot.com, I am happy to announce that I have finally cracked the puzzle. In a nutshell, I am using these three tools:

1. FancyBox JQuery tool
2. Zoho's online Excel viewer
3. Microsoft's view.officeapps.live.com website
4. Plus some Moodle core code hacking (sorry!)

The main sources of inspiration were this 2014 post by Harmut Scherer

(who was originally inspired by a 2013 blog post by Paolo Oprandi 

entitled Making Moodle More Engaging By Rethinking The display Of Content), this lets-develop.com Tutorial entitled "How to use fancybox, a popup window containing what ever you want", the excellent demo page of How to use the Fancybox by Olivia Hoback and Fancyapps website by Janis Skarnelis.

What is FancyBox? It is "a tool that offers a nice and elegant way to add zooming functionality for images, html content and multimedia on your webpages".

In this blog post I will share with you what I managed to train my Moodle site to do.

Figure 6. Log into my Moodle 2.9 site for a demo.
Click on the Le Boffin's Lab coursepage.

Firstly you can experience it yourself by logging into my Moodle 2.9 site (I can't wait for Moodle 3.0!). Use the Guest login to access the Le Boffin's Lab coursepage.

Figure 7. Two sections with accordion links.

Click on the "+ Click-to-reveal content" links to open the accordion sections...

Figure 8. The top section with an opened accordion.

Figure 9. Clicked on an image. The lightbox effect is used.

Figure 10. An image gallery.

Figure 11. An embedded website (www.moodurian.com) inside an iFrame.

Figure 12. A Zoho online Excel viewer link.

Figure 13. An Ms Excel file viewed by the Microsoft Online App site.

Figure 14. An Ms Word file viewed by the Microsoft Online App site.

Figure 15. An Ms PowerPoint file viewed by the Microsoft Online App site.

Figure 16. A textfile's contents.

Figure 17. A PDF file.

Figure 17. An Instagram image.

Figure 18. An embedded Youtube. You do not need to leave the tab or
webpage when viewing the video. How nice and convenient!

Figure 19. A Vimeo embedded video.

Figure 20. A window with multiple elements.

Figure 21. This is an Open Document format (ODT) file. Originally it was a Ms Word (docx) file that I saved as
an ODT file.As long as there are no complicated tables or figures in the original document, the ODT version
will stay faithful to the original. By the way, this file was uploaded into a Moodle folder resource. The URL of the file
is internal to Moodle and it shows up ok in the viewer. This could never happen with a docx file!
I am also able to view ODS (Open Document spreadsheet) and ODP (Open Document presentation) files.

Conclusion:
It is impossible at this time (for me at least) to upload Ms Office files into a Moodle resource type like the folder type, AND to be able to view them with an internal viewer. At best, I can upload Ms Office files into a 755 permissions folder and use Microsoft's online viewer tool to view them. That works fine except that such Ms Office files will be exposed to the public and is not hidden by Moodle from the outside world. At the moment, this post and my current work proves that I can upload PDF, TXT, ODS, ODT, ODP, PHP, PNG, JPG, GIF format files to a Moodle folder resource, and view then without leaving the course page by using JQuery.

In Part II of this post, I will share with you the code that allowed my Moodle site to behave this way. If you can't wait for my second post on this subject, you are most welcome to send me an E-mail at boonsengkam@gmail.com. Cheers!

regards
Frankie Kam, 19th May 2015

If you like this post or site
a small donation would be nice but would last only a day,
otherwise leaving a comment (or a compliment) below will last me a month!