18 december 2015

Google Sheet embedden

Een Google Sheet embedden gaat heel makkelijk via de embedcode die je krijgt aangeboden bij het publiceren van een sheet.
Die code ziet er standaard zo uit:
<iframe src="https://docs.google.com/spreadsheets/d/12vTcsXMc8CuM8cVuQRDDzu5JBr9AtP6KV8z_NaBB54w/pubhtml?widget=true&amp;headers=false"></iframe>
En dat geeft het volgende resultaat:


Hierbij zie je de titel van de sheet en de verschillende tabbladen. Wil je een andere weergave, dan kun je extra parameters meegeven aan de embedcode.

height en width
Allereerst kun je iets doen aan de hoogte en de breedte door die te specificeren in de embedcode. De breedte kun je opgeven in pixels of in een percentage.
<iframe height="300" src="https://docs.google.com/spreadsheets/d/12vTcsXMc8CuM8cVuQRDDzu5JBr9AtP6KV8z_NaBB54w/pubhtml?widget=true&amp;headers=false" width="100%"></iframe>


single en gid *)
Wil je slechts één werkblad weergeven, dan voeg je toe: single=true
Verder heb je dan de gid nodig van het betreffende werkblad. Van het 1e blad is de gid altijd 0. Vervolgbladen hebben een veel langere code:
<iframe height="300" src="https://docs.google.com/spreadsheets/d/12vTcsXMc8CuM8cVuQRDDzu5JBr9AtP6KV8z_NaBB54w/pubhtml?gid=0&amp;single=true&amp;widget=true&amp;headers=false" width="100%"></iframe>


Code voor het tweede werkblad:
<iframe height="300" src="https://docs.google.com/spreadsheets/d/12vTcsXMc8CuM8cVuQRDDzu5JBr9AtP6KV8z_NaBB54w/pubhtml?gid=712512223&amp;single=true&amp;widget=true&amp;headers=false" width="200"></iframe>
 Hier zie je dat nu ook de breedte is aangepast via width

range *)
Je kunt ook een bereik kiezen dat je wilt laten zien, bijvoorbeeld alleen de eerste 10 rijen van de kolommen D, E en F
Daarvoor gebruik je de toevoeging range
<iframe height="300" src="https://docs.google.com/spreadsheets/d/12vTcsXMc8CuM8cVuQRDDzu5JBr9AtP6KV8z_NaBB54w/pubhtml?gid=0&amp;single=true&amp;widget=true&amp;headers=false&amp;range=D1:F11" width="100%"></iframe>


widget
Zet je het attribuut widget naar false dan wordt de onderste balk niet weergegeven.
Daarvoor in de plaats komt dan wel te staan: Published by Google Sheets
<iframe height="300" src="https://docs.google.com/spreadsheets/d/12vTcsXMc8CuM8cVuQRDDzu5JBr9AtP6KV8z_NaBB54w/pubhtml?gid=0&amp;single=true&amp;widget=false&amp;headers=false" width="100%"></iframe>


chrome
Wil je de titel weglaten van de sheet, gebruik dan chrome=false:
<iframe height="300" src="https://docs.google.com/spreadsheets/d/12vTcsXMc8CuM8cVuQRDDzu5JBr9AtP6KV8z_NaBB54w/pubhtml?gid=0&amp;single=true&amp;widget=true&amp;headers=false&amp;chrome=false" width="100%">


headers
Het attribuut headers staat standaard op false. Wanneer je dat op true zet zie je de rij- en kolomnamen.
<iframe height="300" src="https://docs.google.com/spreadsheets/d/12vTcsXMc8CuM8cVuQRDDzu5JBr9AtP6KV8z_NaBB54w/pubhtml?gid=0&amp;single=true&amp;widget=true&amp;headers=true&amp;chrome=false" width="100%"></iframe>


*) Beveiliging
Sommige mensen denken dat door gebruik te maken van de attributen single, gid en/of range de rest van een sheet niet beschikbaar is voor kijkers. Dat is natuurlijk niet zo! Door het simpelweg aanpassen van wat attributen kan altijd een hele sheet getoond worden zoals ik hierboven heb laten zien. Dat is dus echt wel iets om rekening mee te houden.

Voorbeeldnamen
Bij de getoonde voorbeelden heb ik gebruik gemaakt van een sheet met voorbeeldnamen. Handig als je willekeurige namen nodig hebt om een blad mee te vullen. Verder laat de sheet zien hoe je namen die vaak slordig worden ingevuld in een formulier toch netjes kunt weergeven. Lees daarvoor dit bericht, met link naar de sheet die je mag gebruiken.