Google Sites (Classic) – Embed Live (working) Google Sheet “Range”

This one has been annoying me for a while but I finally arrived at a solution. It is especially usefeul when working inside a G Suite domain, and you wish to share information on a spreadsheet with some selectable cells (e.g. with drop downs) via a classic googlesites page, so for people with the right permissions they can use the functionality of the sheet without causing damage to the underlying data.

The default options and gadgets for presenting a spreadsheet offer too much of the sheet for my liking.

The way to sort this out is to create a web App that can be displayed on the page. The apps script is created on the website (Manage Site > Apps Script), and once the two parts are created inside a project, the app can be deployed and will then show up when added to you page.

So here is what you need to put in your code.gs

and this is what you need to put in your index.html

Explanation. To hide all (very nearly all – depends on the sheet) google sheet paraphenalia, you need to embed an iframe inside two divs, both with overflow hidden. Two are needed because sheets will always seek to put the sheet page footer (the bit that shows the sheet tabs) visible inside the first div, you need a second with a smaller size to hide this part. Depending on what you want to display, you will have to fiddle about with the heights, widths and margins to get things just right. My example was to display a sheet that roughly outputted the size and shape of an A4 layout. You will note that I used the “rm-minimal” parameter in the spreadsheet url, this presents the sheet with just the row numbers and column letters boxes showing (and the darned sheet footer/Add a 1000 rows thingy)

Anyway the whole thing looks a lot tidier and more professional on our intranet pages. FWIW, if doing the same on a non googlesites page, you still need the two divs, but you can simply paste the iframe and divs codes straight to the html page, no need to create the webApp.

Leave a Reply

Your email address will not be published. Required fields are marked *