18 december 2015

Google Sheets 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/12vTcsXMc8CuM8
cVuQRDDzu5JBr9AtP6KV8z_NaBB54
w/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 en vooral ook betere 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. De hoogte alleen in pixels:
<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/12vTcsXMc8CuM8cVuQRDDzu5JBr9
AtP6KV8z_NaBB54w/pubhtml?gid=712512223&amp;
single=true&amp;widget=true&amp;headers=false" style="float: left;" width="170"></iframe>

breedte en uitlijnen
Hier zie je dat nu ook de breedte is aangepast via width="170"
Verder zie je dat je een iFrame ook links of rechts kunt uitlijnen met behulp van style="float: left;"

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="320"></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.

Geen opmerkingen:

Een reactie plaatsen