Apps script: Show loader on button click

Question

I am trying to show a loader in the google sheets sidebar on the button click either on the complete page or at least on the button so that users submitting the form should not press again until the earlier form is submitted. I have added loader through js/jquery. Although they work fine but they are too quick to be even shown to users. I can add some delays but again I don't know how much time will the script take to complete. Therefore it may be good to run it from the apps script/server-side.

Html page:

<form >
    <div class="inputbox">
        <label for="name"><strong>Client Business Name</strong></label>
        <input type="text" placeholder="Client Business Name" name="name" required>
    </div>
    <div class="inputbox">
        <label for="description"><strong>Client Description</strong></label>
        <input type="text" placeholder="Client Description" name="description" required>
    </div>
    <div class="inputbox">
        <label for="domain"><strong>Domain</strong></label>
        <input type="url" placeholder="www.example.com" name="domain">
    </div>
    <div class="inputbox">
        <label for="homepage"><strong>Home Page</strong></label>
        <input type="url" placeholder="www.example.com/home" name="homepage" >
    </div>
    <div class="inputbox">
        <label for="kpi"><strong>Link Goal Per month</strong></label>
        <input type="url" placeholder="www.example.com/home/blog" name="kpi" >
        
    </div>
    <button id="btn" onclick="addvalues" >Add</button>
  </form>

JS:

<script>
    function addvalues() {
        document.getElementById("btn").innerHTML = "Adding.."
        document.getElementById("btn").setAttribute('disabled', 'disabled')
        google.script.run.clientAdd()

    }
</script>

Apps Script:

function clientAdd(form) {
  var ss = SpreadsheetApp.getActive();
  var sheet = ss.getSheetByName('Clients');
  sheet.getRange(sheet.getLastRow() + 1, 2).setValue(form.name);
  sheet.getRange(sheet.getLastRow(), 3).setValue(form.domain);
  sheet.getRange(sheet.getLastRow(), 4).setValue(form.homepage);
  sheet.getRange(sheet.getLastRow(), 5).setValue(form.description);
  sheet.getRange(sheet.getLastRow(), 6).setValue(form.kpi);
}

score 2 · Accepted Answer · answered Jan 24 '22 at 00:39

2

Modification points:

addvalues of <button id="btn" onclick="addvalues" >Add</button> should be addvalues();
In your situation I thought that withSuccessHandler might be suitable.

When these points are reflected to your script, it becomes as follows.

Modified script:

HTML

From:

<button id="btn" onclick="addvalues" >Add</button>

To:

<button id="btn" onclick="addvalues();return false;" >Add</button>

Javascript

From:

function addvalues() {
    document.getElementById("btn").innerHTML = "Adding.."
    document.getElementById("btn").setAttribute('disabled', 'disabled')
    google.script.run.clientAdd()

}

To:

function addvalues() {
  const button = document.getElementById("btn");
  button.innerHTML = "Adding..";
  button.setAttribute('disabled', 'disabled');
  google.script.run.withSuccessHandler(_ => {

    // Please set the loading animation here.

    // In this sample modification, when the button is clicked, the button is disabled, when Google Apps Script is finished, the button is enabled.
    button.removeAttribute('disabled');
    button.innerHTML = "Add";
  }).clientAdd();
}

When the above modifications are reflected in your script, as a simple sample, when the button is clicked, the text of the button is changed from Add to Adding.. and the button is disabled, when Google Apps Script is finished, the button is enabled and the text of the button is changed from Adding.. to Add.
Please modify the script in withSuccessHandler to your loader.

Note:

I'm not sure about your whole script. So I proposed a simple modification from your showing script.

Reference:

withSuccessHandler(function)

answered Jan 24 '22 at 00:39

Tanaike

181,128
11
97
165

Thank you so much @Tanaike for help. I have added the code in the form and it works perfectly fine for some but for the one that has some more components like multistep, dropdowns that fetch dynamic data from sheet and google drive, dynamically changing button ids, and onclick attributes through js, etc. and complications, it throws the error ```Uncaught TypeError: google.script.withSuccessHandler```. – Mubashir Rehman Jan 24 '22 at 09:20
I am sharing the link of the [Google sheet](https://docs.google.com/spreadsheets/d/1GboAd8d5Ig6brFMTxvugza-quQnp0NYtfL95RJOR9Ic/edit?usp=sharing) with sidebar. In here if the sidebar is opened, it has the option of copy templates. and in the apps script, the code lies in **copy_temp** file. The loader works for all other pages except for this one. Thank in advance for your time and efforts. – Mubashir Rehman Jan 24 '22 at 09:29
@Mubashir Rehman Thank you for replying. I have to apologize for my poor English skill. Unfortunately, I cannot understand your new question. But I would like to support you. So can you provide the detail of your new question? By this, I would like to try to understand it. If you can cooperate to resolve your new question, I'm glad. Can you cooperate to do it? – Tanaike Jan 24 '22 at 11:46
Thank you so much for the support. Basically, I am creating a sidebar in google sheets with multiple pages. The snippet that you have provided works perfectly fine on some pages i.e., the pages with fewer components. but it fails and gives the above-mentioned error on the page with some complicated components like dynamic dropdown, checkboxes, multistep form, etc. The link to the google sheet that I have shared in the above comment has all the code that I am having. If you open the sheet > apps script. In the apps script, you will find the file with the copy_temp name. – Mubashir Rehman Jan 24 '22 at 14:30
Specifically, the code/form in the cop_temp file is the one I am getting the error on. So instead of sharing the code, I thought sharing the file with all the code may be fine. Hope I have made my point this time. Please do reply if there is any confusion. Thanks again for such great support. – Mubashir Rehman Jan 24 '22 at 14:34
@Mubashir Rehman Thank you for replying. From your replying, I would like to propose to post it as a new question. Because I thought that your new question is a different situation from your this question, and also, I thought that your new question will be also useful for other users. When you post it as a new question by including more information, it will help users including me think of the solution. If you can cooperate to resolve your new question, I'm glad. Can you cooperate to do it? – Tanaike Jan 25 '22 at 00:08
Sure it will be my pleasure to take it as a new question. Will ask that shortly. – Mubashir Rehman Jan 25 '22 at 13:33
@Mubashir Rehman Thank you for your response. When I saw your new question, I would like to check it. – Tanaike Jan 26 '22 at 00:08
I have added new question [here](https://stackoverflow.com/questions/70851154/apps-script-show-loader-on-button-click-in-a-form-page-with-components-like-dyn/70854356#70854356). – Mubashir Rehman Jan 26 '22 at 11:34

Apps script: Show loader on button click

1 Answers1

Modification points:

Modified script:

HTML

From:

To:

Javascript

From:

To:

Note:

Reference:

Linked