Скрипт приложений: показывать загрузчик при нажатии кнопки

Question

Я пытаюсь показать загрузчик на боковой панели листов Google при нажатии кнопки либо на полной странице, либо, по крайней мере, на кнопке, чтобы пользователи, отправляющие форму, не должны нажимать снова, пока не будет отправлена ​​более ранняя форма. Я добавил загрузчик через js/jquery. Хотя они работают нормально, но они слишком быстры, чтобы их можно было даже показать пользователям. Я могу добавить некоторые задержки, но опять же, я не знаю, сколько времени займет выполнение сценария. Поэтому может быть полезно запускать его из сценария приложения/на стороне сервера.

HTML-страница:

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

Скрипт приложений:

      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);
}

Answer 1

Точки модификации:

• addvaluesиз <button id="btn" onclick="addvalues" >Add</button>должно быть addvalues();
• В вашей ситуации я подумал, что это может быть уместно.

Когда эти моменты отражаются на вашем сценарии, он становится следующим.

Модифицированный скрипт:

HTML

Из:

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

К:

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

Javascript

Из:

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

}

К:

      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();
}

• Когда приведенные выше изменения отражаются в вашем скрипте, в качестве простого примера, при нажатии кнопки текст кнопки изменяется с на и кнопка отключается, когда скрипт Google Apps завершен, кнопка активируется, а текст кнопки меняется с Adding..к Add.
• Пожалуйста, измените скрипт в withSuccessHandlerк вашему загрузчику.

Примечание:

• Я не уверен насчет всего вашего сценария. Поэтому я предложил простую модификацию вашего сценария показа.

Ссылка:

• withSuccessHandler(функция)