Embedded Files
Webdesign
Webdesign
Multiple web views
Multiple web views
De bedoeling is om een app te maken met meerdere pagina’s die data uitwisselen met Apps Script.
Hiervoor is het noodzakelijk om via een parameter in de URL de omschakeling naar de betreffende pagina te laten gebeuren.
Deze parameter wordt afgevraagd in de doGet functie en voert daarna een specifieke functie uit.
De functie loadform, zal de form pagina laten zien, waar de andere de “home” pagina laat zien.
Om vanuit de Home pagina de omschakeling te laten gebeuren naar de form pagina dient er aan de URL de parameter V=form doorgegeven te worden.
Dit kan je door via HTML/JS aan de bestaande link de parameter toe te voegen en door de druk op de knop door te sturen naar de webapp.
Door de huidige pagina link af te vragen en achteraan te vervolledigen met ?v=form, kan je bestaande linken (of dit nu de DEV of de deployed app is) vervolledigen in een dynamische manier.
Route Object
Route Object
Het opzet is om een Object te maken (route) waaraan je properties meegeeft in de vorm van pagename, function om zo een dynamische structuur te maken in de afhandeling van parameters komende van de URL.
Om dynamisch aan het object elementen te kunnen toevoegen, heb je een functie nodig.
Het toevoegen van deze elementen doe je dmv .path method.
In bovenstaande voorbeeld is route=pagina en callback wordt de functie die wordt opgeroepen als de pagina gevraagd wordt.
Hierdoor wordt het nu mogelijk om op eenvoudige wijze nieuwe pagina’s en bijbehorende functies toe te voegen aan de doGet.
In de bovenste lijnen voeg je de pagina, functie toe aan het object Route.
Met de if statement controleer je of de V parameter van de URL bestaat en als deze bestaat, wat wil zeggen dat er ook een element in het Route object zit (key,value paar), kan je met de return dit als “functie” laten uitvoeren.
Dit doe je door achteraan de oproep van het Object element () toe te voegen.
Route[e.parameters.v]();
Waarbij [e.parameters.v] slaat op de key en de () duiden op de execute van de value van de key
Zo zal voor de key “form” de functie “loadform” worden uitgevoerd en
Voor de key “about” de functie “loadAbout”.
Het toevoegen van nieuwe pagina’s wordt dus gedaan door het bijvoegen van elementen(key,value) in het object Rout dmv Route.path.
Render object
Render object
Het renderen van de verschillende pagina’s is een steeds terugkerende instructie, die best ook in een functie wordt gestoken.
Het genereren van een template, het doorgeven van de argumenten en dan de evaluate gebruiken om de pagina te maken, kan je verder automatiseren.
Het idee is om een functie te creëren die je bovengaande vervangt door een single line oproep
Hierbij worden de parameters die aan tmp worden gegeven (hier was dit list, maar er kunnen er meerdere zijn), doorgegeven als een object met key: value paren.
De alternatieve syntax van tmp.list is tmp[“list”], omdat een object als een array wordt bekeken.
De functie heeft twee parameters:
File zal de HTML pagina zijn die moet geladen worden
ArgsObject, zijn alle key: value zaken die je als parameters wil doorgeven aan de pagina.
Als er element zijn in het argsObject, dan worden de waardes toegekend aan een array bestaande uit key: value door de method Object.keys(argObjects)
Hierna ga je voor ieder key: value paar de tmp variabele aanvullen door tmp[key]= argObject[key]
Uiteindelijk wordt het geheel van pagina en arguments gerendert met tmp.evaluate();
Principe werking
Principe werking
Het geheel ziet er dus als volgt uit:
Via de URL kan je een bepaalde parameter meegeven die door de route object wordt vertaald naar een specifieke functie.
?v=about
Deze URL kan je maken door in een pagina een link/knop of iets dergelijks te maken.Eens deze parameter binnen komt in de (e) van de doGet functie, wordt de betrokken functie opgeroepen dmv de nieuwe functie
Route.path(“page”, function);In de betrokken functie is het nu de bedoeling om een nieuwe pagina te maken die door de webapp wordt aangeboden.
In deze pagina kan je bepaalde parameters laten vervangen door waardes die je meegeeft.
Hiervoor is er een functie render(“HTMLpagetemplate”, {key: value, key:....}); die parameters doorgeeft aan de pagina.De HTML pagina kan deze parameters gebruiken om een dynamische content aan te bieden:
Materialize CSS autocomplete
Materialize CSS autocomplete
Zorg dat je een lijst van woorden die je in een sheet zet, kan gebruiken voor een autocomplete veld in een webformulier.
Vb zou kunnen dienen om callsigns op te zoeken van de gebruikers die geregistreerd zijn, enkel deze komen in de lijst voor.
Web App Materialize CSS AutoComplete with JavaScript - Google Apps Script Web App Tutorial - Part 9
IFRAME toelaten van een webapp
IFRAME toelaten van een webapp
Web App - Remove "This application was created by another user, not by Google." - Part 11
Standaard kan je bij de .evaluate opties meegeven die nadien toelaten dat je webapp embed wordt in een pagina.
Om er nu voor te zorgen dat iedere pagina van de webapp in dezelfde frame wordt weergegeven, moet je de base target van iedere pagina aanpassen naar _self
Hierdoor kan je je webapp ook in Google Sites gebruiken door de URL te gebruiken van de gedeployed webapp
Chips door gebruik te maken van Materialize
Chips door gebruik te maken van Materialize
Chips zijn verschillende woorden, die je als keywords kan gebruiken. Vb een lijst van keywords die een persoon beschrijven.
Deze lijst toevoegen aan je sheet als CSV lijst is de bedoeling van deze tutorial.
Materialize CSS Chips - Google Apps Script Web App Tutorial - Part 12
HTML data from spreadsheet
HTML data from spreadsheet
Hiermee kan je een tabel vanuit een sheet als HTML code weergeven op een pagina.
Dit is in zijn naakte vorm niet nodig, vermits je in Google sites direct een sheet kan laten zien, maar als je een ander format/layout wil kan dit handig zijn.
HTML Table from Spreadsheet Data - Google Apps Script Web App Tutorial - Part 13
Send Personalized Email Confirmation
Send Personalized Email Confirmation
Send Personalized Email Confirmation - Google Apps Script Web App Tutorial - Part 14
Page updated
Report abuse