Passing parameters from Dialog to server side script

Question

I have a Google sheet template. Each time this is opened, I would like to open a Dialog to get two parameters and pass those parameters to a script bound to the Google sheet template. So far I have managed to define and open the Dialog. But the parameters don't show up in the server side script.

It seems like readFormData is not called when I push the "Create" button. If I replace readFormData with google.script.host.close(), the dialog box will close down. But not with readFormData. The same problem goes with close(). So my take on this is the Java script does not execute.

EDIT: I have solved the problem with a workaround. I replaced onclick="readFormData" with onclick="google.script.run.withSuccessHandler(google.script.host.close).getFormData(this.parentNode)" and then everything work as expected. (required a few changes on GS side as well) However, I can't figure out why I can't call my own javascript procedure readFormData(). With help form Chrome Developer Tool I can notice readFormData is not defined, raising an exception "Uncaught ReferenceError: readFormData is not defined". It fires every time i click on the button. So I guess it must be a syntax error that fools the parser or similar.

GS:

function getFormData(obj) {

  Logger.log(obj);
  return "hello";
}


function openDialog() {
  var html = HtmlService.createHtmlOutputFromFile('index');
  SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp.
     .showModalDialog(html, 'Create file');
}


function onOpen(e) {

   openDialog(); 
}

HTML:

        <!DOCTYPE html>
        <html>
           <head>
              <base target="_top">
              <link rel="stylesheet" 
                  href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
           </head>
           <body>

           <form id="getSomeData">
             <div class="inline form-group">
               <label for="fname">Destination</label>
               <input type="text" name="fname" style="width: 150px;">
             </div>

             <div class="inline form-group">
                <label for="date">Date</label>
                <input type="text" name="date" style="width: 40px;">
             </div>

             <div>
                <input type="button" class = "action" value= "Create" onclick="readFormData()" >     
             </div>

           </form>

   <!--  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> -->

    <script>

       function success(msg) {        // I have fixed the ((msg) error
         alert(msg);
       }


       function readFormData(){
          console.log("readFormData");
          var form = document.getElementById("getSomeData").elements;
          var obj ={};
          for(var i = 0 ; i < form.length ; i++){
            var item = form.item(i);
            obj[item.name] = item.value;
          }
          google.script.run.withSuccessHandler(close).getFormData(obj);
       }

       function close(){
         google.script.host.close();
       }
    </script>
  </body>
</html>

Tristan · Accepted Answer · 2019-01-23 16:13:54Z

1

It seems to me there is a misprint on "success" function which could lead to an interpretation problem :

success( ( msg).

Did you try without this "(" ?

answered Jan 23, 2019 at 16:13

Tristan

1087 bronze badges

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

5 Comments

TheWizEd Over a year ago

Also your elements don't have names, try item.id instead.

Ulf Over a year ago

Thanks, the extra parenthesis was a an error. Bur still it doesn't work. If I replace onclick="readFormData()" with onclick="close()", I expect the result should be the same as onclick="google.script.host.close()", i.e. the dialog box should be closed. But nothing happens. So I get a feeling the java script does not execute at all. I have checked the syntax with a javascript validator, no issues found.

Ulf Over a year ago

@TheWizEd: Thanks, that´s another thing. Changed to name in input, but the major problem is still there....

Tristan Over a year ago

Do you still have errors ? With the code you posted, it works like wanted : I can see "readFormData" in FF's console and " {date=, =Create, fname=test}" in the execution logger GS side...

Ulf Over a year ago

@Tristan Unfortunately I still have errors. Uncaught "ReferenceError: readFormData is not defined". Weird, I can't figure out what´s wrong. However, I have workaround that works fine. My plan was to do some processing of the form data on the client side, but I can do it on the server side. So it´s OK to just pass the parameters to the apps script and continue with further processing on that side.

Collectives™ on Stack Overflow

Passing parameters from Dialog to server side script

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related