How to call google apps script server-side functions synchronously?

Question

I wrote a google apps script code, it will open a google spread sheet, and list the values by row, but there are 2 problems: 1. The output by random order. 2. The div text which id "loding" change to "Finished!" before list all of values. I thought the script will wait for server-side function return when I run it by "withSuccessHandler()", but it's not. How can I correct it?

index.html:

<!DOCTYPE html>
<html>
    <head>
        <base target="_top">
        <script>
            function    jsListValue() {
                // Get count.
                google.script.run.withSuccessHandler(function(count) {
                    // List all values.
                    for( count; count>0; count=count-1) {
                        // Get a value.
                        google.script.run.withSuccessHandler(function(content) {
                            // Shows in "output".
                            var new_div = document.createElement("div");
                            new_div.appendChild(document.createTextNode(content));
                            document.getElementById("output").appendChild(new_div);
                        }).gsGetValue(count);
                    }
                    // Change loding notice.
                    document.getElementById("loding").innerHTML = "Finished!";
                }).gsGetCount();
            }
        </script>
    </head>
    <body onload="jsListValue()">
        <div id="output"></div>
        <div id="loding">Loding now...</div>
    </body>
</html>

code.gs

function                doGet() {
    return HtmlService.createHtmlOutputFromFile('index').setSandboxMode(HtmlService.SandboxMode.IFRAME);
}
function                gsOpenSheet() {
    // Return sheet of the note data.
    return (SpreadsheetApp.openById("xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx").getSheetByName("sheet1"));
}
function                gsGetCount() {
    // Return last row index in this sheet.
    return (gsOpenSheet().getLastRow());
}
function                gsGetValue(index) {
    // Return value in the (index,1).
    return (gsOpenSheet().getRange(index,1).getValue());
}

You shouldn't be getting individual values in this case. You don't need to get individual values in this case, because the `index` is the row, and the rows are all contiguous. If you needed to get non-contiguous rows, that would be different. You are making multiple, rapid calls to the same server side function. The order in which the server side functions will return a value can't be guaranteed in this situation. Multiple instances of the same function are running at the same time. They won't necessarily complete in order because server side functions can run simultaneously. — Alan Wells, Jun 18 '16 at 22:12
Related: http://stackoverflow.com/questions/35749500/client-javascript-receiving-outdated-values-from-server-side-document-set-and-fe/35752170 — Rubén, Jun 19 '16 at 12:40

score 3 · Accepted Answer · answered Jun 17 '16 at 09:42

3

GAS is very similar to Javascript, and all calls to Google's server side functions are asynchronous. You cannot change this (at least I haven't seen any doc reg. that).

What you can do, is, use a callback function on the client side which polls the server for a "success" return value. It'll keep polling it say for 1 minute, or else exit. Let it set a client flag to "true" if the success value is returned by the server. Nothing should proceed on the client side, unless the flag is true. In this way, you can control what happens on the client side.

answered Jun 17 '16 at 09:42

Sujay Phadke

2,145
1
22
41

Apps script has a built in way to handle this, see my answer below – howMuchCheeseIsTooMuchCheese Jun 09 '17 at 13:29
@howMuchCheeseIsTooMuchCheese well ya, that's the documented method. But the server side functions are still being called asynchronously, unlike what the OP wanted. – Sujay Phadke Jun 09 '17 at 13:56

score 1 · Answer 2 · answered Jun 09 '17 at 13:27

1

You want to use withSuccessHandler Docs

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <script>
      function onSuccess(numUnread) {
        var div = document.getElementById('output');
        div.innerHTML = 'You have ' + numUnread
            + ' unread messages in your Gmail inbox.';
      }

      google.script.run.withSuccessHandler(onSuccess)
          .getUnreadEmails();
    </script>
  </head>
  <body>
    <div id="output"></div>
  </body>
</html>

answered Jun 09 '17 at 13:27

howMuchCheeseIsTooMuchCheese

1,602
1
22
30

For those who still pass by - please note (just to alleviate possible misunderstandings) that the answer is concerned with how `withSuccessHandler` actually works. There is **no synchronous way** of working with client-to-server comms in Google Apps Script. – Oleg Valter is with Ukraine Jun 07 '20 at 15:01

score 0 · Answer 3 · answered Jun 18 '21 at 11:39

google.script.run is asynchronous, which means that is impossible to predict in what order gsGetValue(count) will return. When you're using withSuccessHandler you must perform the next action inside the callback function.

My suggestion is to get all the range you want and put it on an array. You can create a serverside function to do this. The code would look like this:

//Serverside function
function getDataForSearch() {
  const ws = SpreadsheetApp.openById("xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx").getSheetByName("sheet1");

  return ws.getRange(1,1,ws.getLastRow(),1).getValues();
}

getValues() will return an array of arrays that should contain all values from the range specified. More information about here

On your client-side, the script should be like this:


//array to get the data from getRange()
var data;

function jsListValue() {
   google.script.run.withSuccessHandler(function(dataReturned){
      data = dataReturned;
      var new_div;
      data.forEach(function(r){
         new_div = document.createElement("div");
         new_div.appendChild(document.createTextNode(r[0));
         document.getElementById("output").appendChild(new_div);
      });
      document.getElementById("loding").innerHTML = "Finished!";
   }).getDataForSearch();
}

score 0 · Answer 4 · answered Apr 08 '22 at 09:53

As hinted by @Iuri Pereira If you return a parameter from the google script code, and then use it in the page javascript, then the procedure runs synchronously.

HTML:

<button onclick="google.script.run.withSuccessHandler(js_function).gs_code();">action</button>

GS:

function gs_code() {
   // do Something;
   return true;
}

HTML javascript:

function js_function(gs_return_value) {
   console.log(gs_return_value);
}

How to call google apps script server-side functions synchronously?

4 Answers4