how return data from HTML service (UI) to google spreadsheet

Question

I'm trying to build a user interface in html service available directly in a spreadsheet.
It's quite easy to display and to close a dialog box following the google tutorial.
But this exemple only show how to close the dialogbox, there is nothing to interact with the google script.
What I want to do is to build a little form and at the end the button submit should return a value to the script so it can follow the process.
Using something like: google.script.run.withSuccessHandler(showConfirmation).processData("data") open a new windows that say there is nothing there. and the script don't process the data (I got an error:"Cannot read property 'processData_m___' of undefined" ).
So, my question is, does that's something doable? In the sample given by google I saw they changed the "google.script.run" for "google.script.host" I tried to do something with that but it revealed to be unsuccessfull.

here my sample code:
Script code:

function onOpen() {
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var menuEntries = [{name: "show dialog", functionName: "showDialog"}];       

  ss.addMenu("script center menu", menuEntries);
}

function showDialog(){
  var htmlTemplate = HtmlService.createTemplateFromFile("index");
  var html = htmlTemplate.evaluate();
  try{
    return(SpreadsheetApp.getUi().showDialog(html));
  }
  catch(err){
    return(SpreadsheetApp.getActive().show(html));
  } 
}

function processData(e){
  Logger.log(e);
  Logger.log(JSON.stringify(e));
}

Html code:

<div>
  <div>please type something</div>
  <form>
    <input type="text" id="text">
    <input type="submit" value="submit" onClick="showConfirmation();google.script.host.run.processData(document.getElementById('text').value);">
  </form>
</div>
<script>
  function showConfirmation(){
    console.log(document.getElementById("text").value);
    google.script.host.run.processCsv(document.getElementById("text").value);
    google.script.host.close();
  }
</script>

Thank's in advance for your help.

Harold

Serge insas · Accepted Answer · 2014-02-08 00:43:28Z

4

Here is a possible way to make it work :

code.gs

function onOpen() {
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var menuEntries = [{name: "show dialog", functionName: "showDialog"}];       

  ss.addMenu("script center menu", menuEntries);
}

function showDialog(){
  var uiDialog = HtmlService.createHtmlOutputFromFile('index').setSandboxMode(HtmlService.SandboxMode.NATIVE);
  return SpreadsheetApp.getUi().showDialog(uiDialog);
}

function processData(e){
SpreadsheetApp.getActiveSheet().getRange(1,1).setValue('done '+JSON.stringify(e));
}

index.html

<div>
<input type="text" id="text">
<input type="button" value="validate"
    onclick="google.script.run
        .withSuccessHandler(showConfirmation(document.getElementById('text').value))
        .processData(document.getElementById('text').value)" />
</div>
<script>
  function showConfirmation() {
  google.script.host.close();
}
</script>

edited Feb 8, 2014 at 0:43

answered Feb 7, 2014 at 23:01

Serge insas

46.9k7 gold badges113 silver badges135 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Gene · Accepted Answer · 2014-02-07 22:41:18Z

1

Trying bring the google.script call into it's own function within the script tags.

<script>
  function proccess(){
    return google.script.run.processData(document.getElementById("text").value);
  }
  //Your other function
</script>

edited Feb 7, 2014 at 22:41

answered Feb 7, 2014 at 19:52

Gene

1141 gold badge1 silver badge6 bronze badges

Collectives™ on Stack Overflow

how return data from HTML service (UI) to google spreadsheet

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related