Access data in Google App Script from spread sheet modal html form

Question

I have Google spreadsheet script which will show modal dialog using SpreadsheetApp.getUi().showModalDialog using a html form which is created as a file in the SpreadSheet Script project.

This is how my Google Script project structure is :

--Code.gs
 |
 |- openFormModalDialog()
 |- fetchData()
 |- updateSheet()
 |
--form.html

When click button in my form.html which is showed in the modal from the Code.gs I wan to call a function in my Code.gs to process the data entered by the user in the form. I have multiple input fields in the form.

I want to access form input values to make external service call and fetch and updated sheet rows.

I am not able to figure out how to access the data in the form filed in App Script.

This is how I am opening my form:

function openFormModalDialog() {
  var ui = SpreadsheetApp.getUi();
  var htmlOutput = HtmlService
     .createHtmlOutputFromFile('form')
     .setWidth(400)
     .setHeight(300);
  SpreadsheetApp.getUi().showModalDialog(htmlOutput, 'User Information');
}

Is there a way I can pass my App-Script function as parameter to html? I am not able to find any relevant document related to this.

As of now I have added multiple prompt to take input from user to use in the app script. — Dipak
I have updated my answer, let me know if you need explanations — Umair Mohammad
The documentation for the method you use explicitly states how you can communicate with Apps Script: developers.google.com/apps-script/reference/base/… — tehhowch

Umair Mohammad Umair Mohammad · Accepted Answer · 2018-03-23T07:24:43

I think you should use the google.script.run api

Example :

<button onClick = "google.script.run.test();">Click me to run test()</button>

This will run your test()

Check this out : https://developers.google.com/apps-script/guides/html/reference/run#myFunction(...)

We can pass arguments to function like this google.script.run.test("value1");

We can run another function(javascript function in web page/dialog here) after this function has completed execution, like this google.script.run.withSuccessHandler(nextFunctionName).test("value1");

We can also run another function(javascript function in web page/dialog here) if this function fails its execution, like this google.script.run.withFailureHandler(nextFunctionName).test("value1");

Access data in Google App Script from spread sheet modal html form

1 Answers