Embedded Files
Webapps
Webapps
webapps maken gebruik van HTML interfaces en staan los van google workspace maar kunnen interacties uitvoeren hiermee.
De combinatie van een webapp en de Workspace tools kan volledig geprogrammeerd worden met GAS en de aanwezige ID, waardoor je geen aparte tools nodig hebt.
Volledige video (2h) over het maken van een webapp met sheet als backend:
Web App Example w/ Google Sheets, Tabulator, JavaScript, Apps Script, HTML, CSS Tutorial
Stand alone script
Stand alone script
Google Sheets Web App Example - Google Apps Script Web App Tutorial - Part 1
Het aanmaken van een stand alone script, los van een sheet, maakt dit onafhankelijk van een sheet, wat de basis vormt voor het maken van een webapp.
Wil je een interactie met een sheet, kan je best vanuit de sheet apps script beginnen, zodat de OAuth actie automatisch kan worden uitgevoerd.
doGet functie
doGet functie
Een webapp bevat minstens de functie doGet, zodat de HTML data kan worden aangeboden.
Hier wordt de HTML pagina page gerendert in de client browser.
Met de (e) kan je parameters terug krijgen in je script, die bruikbaar zijn om verdere afhandeling te doen.
n bovenstaand URL geval zal er een parameter met name=Joe en een parameter array worden terug gegeven voor Category=6,44,22 als de pagina wordt geladen.
Je ziet dat het antwoord een JSON Array is waarbij parameter een enkelvoudig antwoord is en parameters een array vormt van de antwoorden.
Passing multiple data
Passing multiple data
het is mogelijk om meerdere data door te geven aan de frontend en visa versa.
De video legt je uit hoe je datums, welke een specifiek type zijn, kan transfereren.
Deploy as webapp
Deploy as webapp
Om een webapp te testen is er een deployment nodig van de app:
Google Sheets Web App Deployment Process - Apps Script V8
Je kan een deploy doen op verschillende manieren en de webapp laten draaien onder verschillende users.
Head deployment is voor testdoeleinden en krijgt de URL extensie /dev
User access van een Webapp wordt gebruikt voor het toepassen en krijgt de URL extensie /exec
Iedere deployment krijgt een nieuwe link!
Er is ook versie controle en je kan bepalen of een app er alleen voor jou is (test versie) of beschikbaar wordt via Google play (voorwaarden zijn verschillend ikv privacy en access).
Je krijgt een URL terug met een link naar de webapp.
Deze dient om het te testen en uit te voeren als hij voor het grote publiek wordt gebruikt, zo niet kan je via test deployment werken.
Update webapp
Update webapp
Voor het updaten van een bestaande app kan je op 3 manieren tewerk gaan:
Je kan een volledige nieuwe versie maken waardoor er twee apps bestaan via New Deployment.
Hierdoor wordt er een nieuwe link gemaakt en kunnen zowel de oude als de nieuwe samen gebruikt worden
Je kan voor een update gaan van een bestaand project via Manage Deployment, waarbij je dit project kiest en er een nieuwe versie aan toe voegt of het project archive (rechts bovenaan) om het te bewaren of vanuit het archived terug deployen om een bepaalde versie terug te halen.
Je kan gaan voor een test update, wat enkel de huidige /dev versie gebruikt en je deze kan testen
Wil je enkel je kleine aanpassing testen, dien je niet telkens opnieuw een versie met nieuwe nummer te deployen, maakt kan je gebruik maken van test Deployments en/of de update van de pagina/link die je reeds hebt in een tabblad.
Je ziet dat deze testversie opent doordat de URL eindigt op DEV
Apps script function (server site) aanroep vanuit HTML
Apps script function (server site) aanroep vanuit HTML
Om vanuit de webpagina een zelfgemaakte functie te kunnen aanroepen in apps script, voeg je aan de pagina een script toe:
Met de call:
google.script.run.<userfunction(params)>;
Object als parameter
Object als parameter
Het doorgeven van een object als parameter vanuit de HTML pagina geeft je de mogelijkheid om meerdere variabelen in één aanroep door te geven.
Template Partials & Passing Objects - Google Apps Script Web App Tutorial - Part 2
De code in apps scrip kan dmv de property info van het object de data terug halen en in een array plaatsen om toe te voegen aan een tabel in sheets.
HTML in multiple files
HTML in multiple files
Template Partials & Passing Objects - Google Apps Script Web App Tutorial - Part 2
Wanneer je een HTML pagina wil splitsen in verschillende files, waarbij je de Stylesheet en Javascript delen opdeelt in verschillende bestanden, dan dien je in je apps code ook een aantal functies te creëren om deze files terug als een geheel te laten doorgeven op de doGet aanroep.
Het principe is
Deel je code in in 3 HTML files (dus geen echte CSS file)
Include (dit is een nieuwe functie) deze in de oorspronkelijke hoofdpagina op de juiste plaats
Voor de CSS HTML pagina is dit in de Head sectie
Voor de JS is dit in de script sessie, juist voor het einde van de body
Maak een nieuwe functie “include” in je Apps script>
Deze zal de inhoud van de file die include moet worden halen en terug geven.
Verander de functieaanroep in de doGet zodat zodat de samengestelde pagina wordt gemaakt alvorens deze geleverd wordt aan de client browser.
Dit doe je met createTemplateFromFile(“main-page”),evaluate();
Variables van Apps script naar Webapp
Variables van Apps script naar Webapp
In principe kan je dmv de <? Opereator inHTML verschillende dingen doen:
Web App - Load Data From Spreadsheet - Google Apps Script Web App Tutorial - Part 4
Met <?!= ….?>wordt de HTML vorm uitgevoerd die terug gegeven wordt, vanuit een functie of VAR
Met <? …..?> voer je de JS code uit die in de pagina zit
Met <?= var; ?> laat je de inhoud van de var zien als tekst.
Voor het doorgeven van properties via de doGet functie naar de pagina kan je gebruik maken van de volgende functie properties.
Door de property .title te gebruiken, kan ik deze waarde doorgeven aan de webpagine en zal deze verschijnen op de plaats <?=title;?>
Op dezelfde wijze kan je een lijst van waardes (array) doorgeven, in ons voorbeeld wordt de property .list gemaakt met twee waardes.
Om vanuit een array, de drop down list te genereren die je wil zien op de pagina, moet je een aantal stappen doorlopen.
Je voert een JS code uit van een for loop, die de volledige code omsluit, dit wil zeggen dat de laatste } onderaan staat tussen de tags die aangeven dat het JS is.
Je laat de for loop zo dikwijls draaien als er elementen zijn in de list
De HTML code die moet gegenereerd worden, krijgt de tekst waarde van de elementen in de list door gebruik te maken van de <?=...?> template met verwijzing naar het betrokken element.
De overeenkomstige code in Apps Script die een kolom in een sheet leest en deze als parameter doorgeeft aan de webapp is de volgende:
Vermits de getRange een 2D array terug geeft, die je deze met de map functie om te vormen tot een 1D array.
Nu wordt het mogelijk om zonder aanpassing van HTML of script, via een config in de sheet, de dropdown selectie mogelijkheden aan te passen vanuit een sheet (options) in kolom 1. (zie video)
HTML van Apps script naar Webapp
HTML van Apps script naar Webapp
In voorgaande werd de data naar de HTML gestuurd om daar ter plaatse te renderen tot wat nodig was.
Het is ook mogelijk om de specifieke HTML code klaar te maken in je Apps Script en deze door te geven aan de webapp.
Dmv de .Join methode kunnen we de data samen brengen tot één HTML geheel, bestaande uit een concat van HTML tags en de data.
Deze kan nu aan de variabele list mee gegeven worden.
In de Webpage moet deze nu gerenderd worden als een HTML JS, waardoor daar de code dient veranderd te worden in <?!= list;?> waardoor de list parameter als HTML code wordt aanzien.
Web development integratie Materialize of Metro UI Frameworks
Web development integratie Materialize of Metro UI Frameworks
Principe integratie framework
Principe integratie framework
Principieel moet je telkens een aantal stappen doorlopen:
Voeg de koppeling met de style bib in in je heading style deel van je HTML pagina
Gebruik in de body de functies/styles die je nodig hebt
Gebruik in de JS script sectie de stukken die gebruik maken van deze templates
Maak een soort van backend app script om de koppelingen en afhandeling te maken in sheets of G-suite.
Ga op de pagina naar Get started en kopieer de volgende 4 lijnen naar je eigen webpagina.
Vanaf nu kan je allerhande HTML zaken integreren.
Voor sommige zaken zoals dropdowns, is er eveneens een overeenkomstige JS functie nodig om dit te initialiseren.
Gebruik van Event listeners in JS Webapp
Gebruik van Event listeners in JS Webapp
Wanneer je een user automatische feedback wil geven wanneer hij een veld ingeeft zonder het drukken van een knop, dien zowel code te voorzien in de webpagina (JS) als in de Apps Script deel.
Het ondervangen van een ingave in de webapp doe je dmv een event listener in de JS deel van je pagina
Het JS script geeft de zipcode door aan een Apps script getCost.
Door gebruik te maken van de methode withSuccessHandler en een extra functie updateEstimate, kan je ook de return van de waarde asychroon maken met het doorgeven van de waarde.
Dit is nodig om de server side tijd te geven om iets af te handelen en de pagina zal pas aangepast worden als het gelukt is om data binnen te krijgen.(getCost(zipCode))
M.update is er om de Materialcss te updaten (UI)
De Apps Script functie die uit een 2D range met zip en cost kolommen een antwoord van de cost geeft of ‘unavailable’, maakt het geheel af.
Dit wordt weer een dynamisch geheel, waardoor het aanpassen van een tabel in sheet, resulteert in het aanpassen van de website en mogelijkheden.
Wanneer de user de run it button zal drukken, komen deze waardes ook terug in de Apps Script en kunnen daar verwerkt worden door ze mee te geven vanuit JS.(client side)
En af te handelen in Apps Script.(server side)
Page loaded event listener
Page loaded event listener
Indien een functie pas kan uitgevoerd worden als de pagina volledig geladen is, dan dien je gebruik te maken van het event DOMContentLoaded, alvorens de JS functie uit te voeren.
Dit is belangrijk als je wil toegrijpen op tags in de pagina (dynamic content)
Het testen van methods in Meterial css
Het testen van methods in Meterial css
Uitleg hoe de datepicker bepaalde data kan blokkeren vind je hier:
Integrate Google Calendar in Web App - Google Apps Script Web App Tutorial - Part 6
Page updated
Report abuse