Learn how to embed simple spreadsheets in your WordPress blogs with iframe and jQuery.sheet.
In my previous post, I explained how to embed very simple spreadsheets in a WordPress blog, using that cool little piece of Free Software called Gelsheet.
This time, as promised, I'll show you how to do the same thing with a different technique, easily extendable to any web page, based on another "online spreadsheets" package. Since the embedding technique and the spreadsheet software are completely independent from each other, I'll explain them one at a time.
The iframe HTML element
Inline frames, or iframes, are HTML elements that are used to embed another document within the current HTML document. Being part of the language standard, iframes have nothing specific to online spreadsheets — or to WordPress for that matter. If you know the corresponding HTML markup, which can be as simple as this:
you can use iframes wherever you want. To make life even simpler, most web content management systems (CMS) have standard functions or third-party extensions that make the insertion of iframes a no-brainer. WordPress has at least two plugins for this task. The one I used for this post, for the simple reason that it was already installed on my testing blog, is called iframe.
Its installation procedure is the standard one for these plugins: upload the ZIP archive available on that page to the wp-content/plugins subfolders of your Wordpress installation, and then activate it from the plugin page of the Dashboard. At that point, all you have to do to embed a document is to add this code in the right place of your post:
[iframe src="URL_OF_DOCUMENT_TO_BE_EMBEDDED" width="100%" height="480"]
Play as you wish with the width and height parameters, but don't forget to do it in the HTML view of the WordPress post editor instead of the visual one, otherwise you may mess up the source code of the post.
Secondly, jQuery.sheet is much more flexible than Gelsheet. Among other things, you get:
- freezable cells
- many formulas and formatting options
- multiple sheets and cross-sheet calculations
- support for custom formulas and variables
- in-line controls like buttons, checkboxes, and drop-down lists
- graphic themes and charts
jQuery.sheet inside WordPress? Here's how to do it!
Let me explain in detail how I got to what you can see in Figure A — that is, a dynamic spreadsheet stuck in the middle of a sample WordPress post.
A dynamic spreadsheet stuck in the middle of a sample WordPress post.
First, I uploaded and unpacked the last version of jQuery.sheeet in a dedicated folder of my web server, which I called http://example.com/jq/ for the sake of simplicity. Next, inside the "examples" subfolder, I made my own copy of one of the sample spreadsheets (mortgage.estimator.html) distributed with jQuery.sheet. Finally, I put the following code into my WordPress post:
[iframe src="http://zona-m.net/jq/examples/mymortgage_estimator.html" width="100%" height="480"]
Unlike what happens with Gelsheet, I got a spreadsheet that any reader of the post can play with, adding his or her own data (Figure B).
Any reader of the post can add data to the spreadsheet.
How do you make your own spreadsheets?
Right now, the main defect of jQuery.sheet may be its documentation. You do get quite a few very cool examples with the software, all shown in the online demo. However, there seems to be nothing between a too synthetic end-user documentation and the reference material for developers. Besides, jQuery is more complicated than Gelsheet, precisely because it is more flexible. Having said that, it's still possible to create spreadsheets from scratch with this software without being a real programmer. You must, however, know the basics of HTML and how spreadsheets generally work.
In practice, you should follow these steps:
- Write an HTML table with all the cells of your spreadsheet (you can use any HTML editor for this)
- In the HTML header of that page, load the jQuery.sheet functions (as explained here)
- Following the example in that same page, put the HTML table inside a div element, with an identity that marks it as THE table that jQuery.sheet should manage
- Write normal numbers as plain text inside their cells, e.g.
- Place formulas, instead, inside the TD marker, following this syntax:
Yes, this is just a bare outline of the general procedure, due to a lack of space. However, if the TechRepublic community expresses enough interest, I'd be happy to provide another post with a step-by-step explanation on how to build a jQuery.sheet spreadsheet from scratch. Please share your interest and/or any questions you may have in the discussion thread below.