Javascript, HTML, CSS e... !
4 commenti

Passaggio di valori da HTML ad Apps Script e viceversa

Recuperare i valori dei campi di input in un Form in Google Apps Script

L'utilizzo di form per l'inserimento dei dati da parte di un utente e la relativa gestione ed elaborazione sono alla base, praticamente, della quasi totalità delle applicazioni web, data l'importanza ho creato questo tutorial dedicato al fine di mostrare un metodo con il quale è possibile avere il controllo dei dati immessi nel form, ovvero riceverli e gestirli lato apps script e riutilizzarli o visualizzarli lato HTML.

L'esigenza di proporre il seguente esempio risiede nel fatto che utilizzando l'HTML Services per gestire l'interfaccia utente, che risulta in un file HTML, non è possibile utilizzare i metodi di UI Services (come ad esempio getElementById()) dal file .gs per accedere ai valori dei campi di input, come invece viene fatto lavorando direttamente in Javascript.
Quello che pertanto può essere fatto è associare all'onClick del pulsante di Invio una funzione Javascript direttamente nel file HTML che passerà un parametro contenente tutte le coppie chiave:valore degli input del form (la chiave è il nome del campo) ad una funzione specificata lato Apps Script. Con la gestione degli errori è possibile poi richiamare 2 funzioni di callback (una in caso di successo ed una in caso l'operazione non vada a buon fine) per recuperare l'output elaborato lato .gs e averlo a disposizione lato .html, in interfaccia.

Dato che un esempio in molti casi spiega di più che troppe parole, riporto di seguito i codici, del file .gs e del file .html, riferiti ad un semplice form con campi di input di tipo text e checkbox, textarea e select che richiedono l'immissione dei dati da parte dell'utente e l'invio degli stessi:

Codice .gs

function doGet() {
  return HtmlService.createTemplateFromFile('index').evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME);
}

function recuperaDati(form) {
  
  Logger.log(form);
  
  var nome = form.nome;
  var chk1 = form.chk1;
  var chk2 = form.chk2;
  var txt = form.txt;
  var num = form.num;
  
  var message = "";
  message = message + "Il nome inserito è: " + nome + "n";
  message = message + "Hai spuntato la prima casella? " + (chk1 ? 'Sì' : 'No') + "n";
  message = message + "Hai spuntato la seconda casella? " + (chk2 ? 'Sì' : 'No') + "n";
  message = message + "Hai detto che ti piace: " + txt + "n";
  message = message + "Hai dichiarato di aver letto il seguente numero di libri: " + num + "n";
  
  return message;
}

Codice .html

<html>
    <head>
        <title>Come recuperare i valori dei campi in un form con Google Apps Script</title>
    </head>

    <body>
        <form>
            <input type="text" name="nome" value="" placeholder="il tuo nome" /><br />
            <input type="checkbox" name="chk1" value="1" /> Sei stato in vacanza quest'anno?<br />
            <input type="checkbox" name="chk2" value="1" /> Hai fatto attività fisica nell'ultimo mese?<br />
            <textarea name="txt" placeholder="scrivi qualcosa che ti piace"></textarea><br />
            Quanti libri hai letto quest'anno?
            <select name="num">
            <option value="0">0</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="più di 2">più di 2</option>
            </select><br />
            <input type="button" onClick="formSubmit()" value="Invia" />
        </form>
        <div id="output" style="margin-top: 10px;"></div>
    </body>

    <script type="text/javascript">
        function onFailure(error) {
                var div = document.getElementById('output');
                div.innerHTML = "ERROR: " + error.message;
        }    
        function onSuccess(result) {
                var div = document.getElementById('output');
                div.innerHTML = result.replace(/n/g, "<br />");
        }
        function formSubmit() {
            google.script.run
                  .withFailureHandler(onFailure)
                  .withSuccessHandler(onSuccess)
                  .recuperaDati(document.forms[0]);
        }
    </script>

</html>

Di seguito uno screenshot (Fig . 1) che mostra il contenuto della variabile inviata dalla funzione in Javascript al submit del form con tutte le coppie chiavi:valore pronte per essere gestite lato Apps Script.



Log del parametro contenente le coppie chiave:valore dei campi compilati del form

Fig. 1 - Log del parametro contenente le coppie chiave:valore dei campi compilati del form


Quest'altro screenshot (Fig. 2) riepiloga invece i passaggi di completamento del form (punto 1 form da compilare; punto 2 form compilato; punto 3 form inviato):



Form esemplificativo per il recupero dei dati al submit con Google Apps Script

Fig. 2 - Recuperare i valori dei campi di input in un Form in Google Apps Script


Su questa base è possible realizzare applicazioni complesse che richiedono il passaggio di dati, il loro controllo e la gestione degli errori.

Tags

Michele Pisani

Michele Pisani

Sviluppatore Javascript ed esperto in Digital Analytics

L'esperienza nel settore Digital Analytics unita ad anni di sviluppo in Javascript ha trovato la massima espressione in Google Apps Script che mi ha permesso, con estrema facilità e poche righe di codice, di realizzare potenti applicazioni interattive e processi automatizzati integrati con i prodotti della G Suite.

Come contattarmi
scrivi un commento

4 Commenti

  1. venerdì 30 marzo 2018 alle ore 18.22 max

    Salve, avrei bisogno di un parere. Nel compilare una domanda per un concorso ministeriale sono andati persi dei dati scritti all'interno di un form. Mi domandavo se quei tipi di siti (o server) andando a visionare i log riportano anche i dati digitati in un campo che però dopo aver caricato la pagina non sono stati presi in considerazione. Oppure sono delle richieste troppo specifiche per essere ritrovate tramite log? Grazie mille

    Rispondi a questo commento
    • venerdì 30 marzo 2018 alle ore 20.47 Michele PisaniAutore

      Ciao Max,
      la tua domanda è off-topic rispetto al contesto di questo articolo ma mi hai dato uno spunto per scrivere il prossimo :)

      Rispondendoti, comunque, se si parla di fattibilità ovviamente è possibile (ci sono strumenti di A/B test che lo fanno al fine di verificare se ci sono campi bloccanti nei form, anche se tendenzialmente inviano a sistemi analitici l'informazione del nome del campo piuttosto che il suo contenuto, anche per una questione di privacy policy), se invece si parla di probabilità che un'implementazione simile sia presente su un sito di concorsi ministeriali lo trovo un po' più difficile in quanto, di base, non credo sia un'informazione che interessa ai fini delle loro attività.
      Dovresti provare a verificare, in console del browser, se compilando i campi del form in questione vengono inviate chiamate asincrone (ad esempio al passaggio da un campo compilato al successivo) e, nel caso, provare a capire se passano il contenuto del campo compilato come parametro.

      Rispondi a questo commento
      • sabato 31 marzo 2018 alle ore 13.15 Max

        Grazie mille per la risposta, purtroppo ora non posso fare prove perchè la domanda è chiusa.
        Comunque scusa ma non sono sicuro di aver capito una cosa: quindi se si mette caso che loro siano sprovvisti di questo strumento di implementazione, loro sono comunque in grado di vedere se io avevo provato a compilare quel form (anche senza sapere il contenuto) oppure non risulta nulla?
        Grazie mille e buona Pasqua!

    • sabato 31 marzo 2018 alle ore 14.56 Michele PisaniAutore

      Dipende se hanno implementato quel tipo di tracciamento o meno.

      Non è un'implementazione necessaria per il funzionamento del form, così come non è un'implementazione che avviene in modo automatico, ci deve essere la volontà da parte di chi gestisce il sito, o i tracciamenti su di esso, di voler acquisire quel tipo di informazione, che solitamente serve per lo più per capire se ci sono, a livello statistico, molti utenti che si bloccano ad un determinato punto del form (o perché non capiscono la richiesta o perché non vogliono fornire quel determinato dato richiesto o per altre eventuali ragioni da indagare) e prendere successivamente decisioni tecniche o di usabilità per modificare il form al fine di rendere la compilazione dello stesso più semplice.

      Per questo motivo si tende a raccogliere l'informazione della semplice compilazione del campo indipendentemente dal suo contenuto, considerando anche il fatto che per raccogliere questi dati si utilizzando, tendenzialmente, servizi di terze parti, ad esempio Google Analytics, al quale non possono essere inviate informazioni identificative di una persona e pertanto si invia solo un identificativo del campo compilato (ad esempio il suo id).

      Detto questo, che rientra principalmente in attività di marketing (da qui la mia scetticità nel fatto che ci sia un'implementazione simile in un form per una domanda per un concorso ministeriale, ma è solo il mio parere personale), non posso garantirti ne rassicurarti che non ci sia stato un sistema integrato del genere, soprattutto non potendo visionare il form in questione. Di certo se hai caricato alcuni documenti, da qualche parte nei loro server, è molto probabile che siano sempre presenti, ma sulle informazioni digitate nei campi tutto è possibile e niente è scontato.

      Un saluto e buona Pasqua anche a te!

      Rispondi a questo commento

Scrivi un commento

Il tuo indirizzo email non sarà pubblicato.I campi contrassegnati da un * sono obbligatori
Puoi utilizzare i seguenti tag nei commenti:
[bold]testo[/bold] se vuoi evidenziare un testo con il grassetto[code]function helloworld() { }[/code] se vuoi pubblicare una porzione di codice[url]http://www.appsscript.it[/url] se devi riferirti ad un indirizzo web