Google Drive spreadsheet invoegen

Voor wie gebruik maakt van Google Drive & Google spreadsheets is het mogelijk een tabel in een jouwweb website in te voegen. De tabel wordt dan gekoppeld en bijgewerkt als er veranderingen in de spreadsheet/tabel zijn gemaakt.

Nadeel is in 1e instantie dat het gehele werkblad wordt ingevoegd. Met wat aanpassingen in de code is echter weergave van een bepaald cellenbereik mogelijk.

Bron: o.a. https://wp-glogin.com/2014/08/embedding-google-spreadsheets-with-more-control-over-appearance/

Voorbeeld:

  • Een voorbeeld spreadsheet: 'Invoegen jouwweb voorbeeld' blad: Voorbeeld01
  • Niet noodzakelijk, maar toch zet ik onder 'Weergave' de rasterlijnen en de formulebalk even uit.

  • Optioneel: Vervolgens ga ik de cellen die ik in de Jouwweb pagina wil invoegen/koppeln een 'bereik' naam geven.
    Selecteer daarvoor de cellen en klik in het menu op:
    Gegevens - Benoemde bereiken.
  • Aan de rechterzijde van het blad kan je nu een bereik toevoegen, vervolgens hernomen en na het klikken op 'Gereed' is het bereik zichtbaar. In dit voorbeeld met de naam Regel1tot10.
  • Als er rijen of kolommen moeten worden toegevoegd, kan je het bereik handmatig aanpassen.

  • Vergeet niet je werkblad een naam te geven.
  • Vervolgens willen we de code zoeken die nodig is voor het invoegen en koppelen in Jouwweb.
  • Klik aan de rechterzijde op de naam van het bereik dat je wilt gaan gebruiken.
  • De selectie wordt nu zichtbaar.
  • We kiezen in het menu: Bestand - publiceren op het internet.
  • Kies vervolgens het tabje 'INVOEGEN'
  • Kies voor de naam van het tabblad en niet voor het gehele bestand.
  • Geef aan dat je wilt dat de tabel wordt bijgewerkt als er iets in veranderd.
  • Klik op 'Publiceren'
  • Hierna kom een scherm in beeld waarin de code <iframe ...   > staat.
  • Hier kan je ook nog aangeven dat je het publiceren wilt stoppen en dat je geen automatische update wilt.
  • Kopieer de code naar het kladblok/Notepad voor verdere bewerking.
  • Als je de code zoals deze nu is zo gebruikt krijg je onderstaand resulaat:

UITLEG van de parameters:

single – setting to true displays just one sheet in the spreadsheet. The default sheet it will display is the first one created in the spreadsheet. This can be changed using ‘gid’ below.

gid – this needs to be a numeric identifier of the sheet you want to display. The first sheet created is 0, but others will have longer identifiers. To find the ‘gid’ for the sheet you want to display, go to the spreadsheet in Google Apps itself, and click on to your desired sheet. The URL in your browser should change to something like this: https://docs.google.com/a/mycompany.com/spreadsheets/d/15B___SOYjsRmU9tiwZly318HZnFHOHeayS6UTHx7Pu2I/edit#gid=419657423

The bit at the end of the URL shows you the ‘gid’ for the sheet, and that is the number you need to bring into the shortcode in your website.

range – set this to the cell range you want to display within the sheet (or leave it out to display the whole sheet). In our example, we set this to f2:g6. Note if you’re being pedantic then you should really change the ‘:’ to ‘%3A’ since colons should be encoded in URLs – but most browsers should understand the colon, so don’t worry. If you like to be correct, you’d use range=f2%3Ag6 instead.

widget – setting this to false removes the sheet selector bar when it’s embedded.

chrome – setting this to false removes the title bar showing the spreadsheet name, above the sheet.


  • De code moet nu worden aangepast zodat we zelf de breedte en hoogte kunnen instellen.
    .
  • In dit gebruikte voorbeeld verwijst deze naar MIJN spreadsheet, dus de code zal in het begin niet helemaal overeen komen met uw eigen blad.
    .
  • Verwijder alles vanaf het gedeelte: /pubhtml
    <iframe src="https://docs.google.com/spreadsheets/d/1QmYEkaMrAsSyF-kSPcmgmR6LTALvhD8xmT_371v_T20/pubhtml?gid=0&amp;single=true&amp;widget=true&amp;headers=false"></iframe>
    .
  • Wat overblijft=: <iframe src="https://docs.google.com/spreadsheets/d/1QmYEkaMrAsSyF-kSPcmgmR6LTALvhD8xmT_371v_T20/
    .

  • Voeg toe: htmlembed?single=true&gid=0&range=a2:g11&widget=false&chrome=false" width="100%" height="200" style="embed" ></iframe>
    .
  • wijzig nu je eigen cellenbereik toe: &range=A1:g11"
    .
  • Pas eventueel je gewenste hoogte en breedte aan: width="100%" height"200"
    .
  • De volledige regel is nu:
    <iframe src="https://docs.google.com/spreadsheets/d/1QmYEkaMrAsSyF-kSPcmgmR6LTALvhD8xmT_371v_T20/htmlembed?single=true&gid=0&range=a2:g11&widget=false&chrome=false" width="100%" height="200" style="embed" ></iframe>

  • Plak deze regel in een HTML item in je jouwweb pagina.

Als je het bereik in de parameters 'range' aanpast kan je dus een gedeelte meer of minder zichtbaar maken.
Hieronder een voorbeeld waarbij in de bovenste tabel rode tekst zichtbaar is. Daarna is de 'range'  aangepast zodat de rode tekst niet meer zichtbaar is.

Zie ook: https://wp-glogin.com/2014/08/embedding-google-spreadsheets-with-more-control-over-appearance/

en http://www.labnol.org/software/embed-tables-spreadsheet-data-in-websites/7435/

Resultaat:


Het gedeelte wat buiten het opgegeven bereik/range valt wordt dus ook niet getoond.

Bijwerken gegevens:

Als je nu in Google Drive je spreadsheet aanpast zullen deze automatisch worden bijgewerkt in Jouwweb.

De wijzigingen worden zichtbaar nadat je het Google bestand hebt afgesloten en je de Jouwweb pagna hebt ververst [Ctrl+ F5]

PDF
Jouwweb Google spreadsheet invoegen
PDF [365.3 KB]
Download (23 downloads)