Tot nu toe kan je alleen interactief werken door gebruik te maken van de functies inputBox (LEES) en msgBox. Nadeel van deze functies is dat je de gegevens slechts één voor één kan doorgeven. Meerdere onderwerpen tegelijk doorgeven kan in Google Apps Script via eigen gebruikers interface (GUI).
Een GUI is eigenlijk een zelfgemaakt dialoogvenster met besturingselementen zoals tekstvakken, keuzelijsten, opdrachtknoppen. Het grote voordeel van een GUI is dat je daarmee in een keer veel informatie kan opvragen en die daarna ook in een keer kan verwerken. Het werkt voor een gebruiker aanzienlijk eenvoudiger dan met een aantal opeenvolgende Input- en MsgBoxen.
Voor het ontwerpen van een GUI is er geen 'drag and drop' mogelijk. Google heeft er voor gekozen voor een integratie met HTML. We gaan niet werken met popups maar gaan een 'sidebar' maken.
Maak alvast je eerste GUI. Maak in een scriptbestand in Google Spreadsheet de procedure aan openDialog(). Voor het inladen van de GUI gaan we gebruik maken van de klasse Htmlservice om gebruik te maken van een html pagina.
Procedures.gs
function showSidebar() {
var html = HtmlService.createHtmlOutputFromFile('Pagina').setTitle('My custom sidebar');
SpreadsheetApp.getUi().showSidebar(html);
}
Nu moet je uiteraard nog een html pagina voorzien die hij kan open in zijn dialoogvenster. Ga in de scripteditor en druk op + rechts van bestanden en kies voor HTML. Benoem deze pagina 'Pagina'. Merk op dat deze naam in bovenstaande code staat. Neem op deze pagina de volgende code op:
Hello, world! <input type="button" value="Close" onclick="google.script.host.close()" />
In bovenstaande voorbeeld ben je erin geslaagd een eigen GUI op het scherm te toveren. Natuurlijk een GUI dat je enkel kan sluiten heeft niet zijn meerwaarde. In een voorgaande oefening heb je aan de gebruiker zijn Naam, Voornaam en Klas gevraagd. Het zou gebruiksvriendelijker zijn dit te verwerken in 1 formulier in plaats van 3x een invoervenster te tonen.
Om hier in te slagen moeten we de voorgaande oefening verder uitbreiden door invoervakken toe te voegen. Voorzien een html-pagina -> Formulier.html
Voorzie de volgende code in Formulier.html
<b>Geef uw persoonlijke gegevens op</b><br>
<form onsubmit="event.preventDefault(); google.script.run.verwerkFormulier(this)">
<input type="text" name="naam"><br>
<input type="submit" value="Voeg rij toe"> <input type="button" value="Sluit zonder bewaren" onclick="google.script.host.close()"/>
</form>
<b>Tekst</b>
De tekst tussen <b> en </b> krijgt een vette opmaak. Dit werkt ook voor <i> en <u> zoals je ze kent bij een tekstverwerker.
<br>
Zorgt voor een enter.
<form> tags </form>
Om een formulier op een html-pagina te maken heb je de tags form nodig. Binnen deze tags plaats je nodige input van je formulier.
<input type="type" name="naam"/>
Binnen een formulier heb je nood aan instrumenten. De meeste interactie naar de gebruiker geef je aan met de tag <input />. Op basis van het type kan je dan aangeven of het gaat om een tekstvak, knop, selectierondjes of selectievakjes.
Submit maakt ook een knop aan maar die zorgt ervoor dat het formulier ingezonden wordt.
Om het formulier te kunnen verwerken moet elke input van de gebruiker een unieke naam krijgen.
<input type="text" name="naam"/>
<input type="radio" name="naam" value="value">
Een vraag heeft meer opties. Elke optie moet dezelfde naam krijgen. Elke optie moet een waarde/value meekrijgen om de keuze van de gebruiker te identificeren.
Voorbeeld
<input type="radio" value="man" name="geslacht">Man<br>
<input type="radio" value="vrouw" name="geslacht">Vrouw<br>
Om plaats te besparen kan je verschillende keuzes opsommen in een keuzelijst ipv keuzerondjes te gebruiken. De tag is hier niet input maat select om aan te geven dat je een selectie wilt. Binnen de selectietags ga je de verschillende opties geven via option-tags.
Voorbeeld
<select name="levensbeschouwing">
<option value="KDG">Katholieke Godsdienst</option>
<option value="NCZ">Niet Conventionele Zedenleer</option>
</select> <br>
Soms wil je bij een vraag een gebruiker meerdere keuzes laten geven. Hiervoor heb je input-tag nodig met het type "checkbox".
<input type="checkbox" name="name" value="value"/>
In tegenstelling tot bij keuzerondjes mag de naam van het inputveld niet bij elke optie gelijk zijn. Elke optie moet een andere naam hebben en waarde.
Voorbeeld
<input type="checkbox" name="middagetenMa" value="Maandag" />Maandag