CODEWITHSUNDEEP
user-interfacegoogle-apps-scriptgoogle-sheets
Harold
Harold

Reputation: 3337

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

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

Upvotes: 2

Views: 3309

Answers (2)

Serge insas
Serge insas

Reputation: 46792

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>

Upvotes: 4

Gene
Gene

Reputation: 114

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>

Upvotes: 1

Related Questions