CODEWITHSUNDEEP
javascriptgoogle-apps-scriptgoogle-sheets
Rjoel
Rjoel

Reputation: 66

Confirming Sheet Update to User on Google Script Web Application

So I am working on a basic system that will add a value to a specific cell when a button is clicked on the web application that is hosted on Google Scripts. As of now I have the button working and it calls a function that look like thisL:

function increment(cell) {
  var range = SpreadsheetApp.getActiveSpreadsheet().getSheets()[0].getRange(cell);
  range.setValue(range.getValue() + 1);
}

It added just as it should, but I would like for the function to return something to the user to confirm that it was added to the Google Sheet. I was thinking at the top of the page either in the middle or off to the right. Is this possible?

To go into a bit more detail, I would prefer to utilize something like the Bootstraps alert formatting in the long run just to make it easier, but at this point I would just like to get it displaying to the user and then I can deal with making it look nice later.

Any suggestions would be greatly appreciated as I feel I have hit a wall with this as I can not get the code to show after the user presses the button. Does Google not allow for HTML to be added to the page after it loads?

My other idea was to have a variable load with the page that is just hidden and then displayed by the function and then re-hidden after some time, but I am having a hard time finding a way to do that from information online.

All suggestions are welcome, thank you in advance!

Upvotes: 0

Views: 113

Answers (1)

Martí
Martí

Reputation: 2851

Update

The way to update the page after clicking the button is with the withSuccessHandler(function) and the withFailureHandler(function) of google.script.run from the WebApp itself (reference). So basically what you do it's to modify the page from the frontend's JavaScript. In the reference you can see the following example:

Code.gs

function doGet() {
  return HtmlService.createHtmlOutputFromFile('Index');
}

function getUnreadEmails() {
  return GmailApp.getInboxUnreadCount();
}

Index.html

<!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>

As you can see, the page itself is modified with the result of the dynamically called function. You can also use any number of regular web-based libraries.

Original answer (show it in the spreadsheet)

Your can use an alert pop-up or a sidebar with the class Ui. Another option is to use the first row of the spreadsheet as the messages bar: merge all the first row, and then you can set the format and message dynamically.

References

Upvotes: 1

Related Questions