Оптимізація завантаження форми з даними з Google Sheets

5 Березня 2024 в 22:07 23

Проблема оптимізації завантаження даних з Google Sheets до HTML форми виникає досить часто, коли веб-розробники використовують Google Apps Script для автоматизації взаємодії з електронними таблицями Google. У цій статті ми розглянемо конкретний випадок, коли форма, яка містить приблизно 30 полів, повинна бути заповнена автоматично значеннями з останнього рядка електронної таблиці.

Сценарій включає в себе використання Google Apps Script для отримання значень з електронної таблиці та їх подальше відображення в HTML формі. Однак існує проблема з продуктивністю, оскільки для кожного поля форми здійснюється окремий виклик методу getValue(), що призводить до затримок у завантаженні форми при кількості полів більше ніж декілька.

Щоб оптимізувати цей процес та покращити продуктивність завантаження форми, ми пропонуємо використовувати метод getValues() для одержання всіх значень одразу з електронної таблиці, замість окремих викликів для кожного поля форми. Це дозволить зменшити кількість запитів API та прискорити завантаження форми.

Нижче наведений оптимізований сценарій Google Apps Script:

function getTodayValues() {
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var scheduleSheet = ss.getSheetByName("Scheduled");
  var lastRowValues = scheduleSheet.getRange(scheduleSheet.getLastRow(), 2, 1, 8).getValues()[0];
  return lastRowValues;
}

function getTodayValues() {

var ss = SpreadsheetApp.getActiveSpreadsheet();

var scheduleSheet = ss.getSheetByName("Scheduled");

var lastRowValues = scheduleSheet.getRange(scheduleSheet.getLastRow(), 2, 1, 8).getValues()[0];

return lastRowValues;

}

У цій функції getTodayValues() використовується метод getRange() для одержання всіх значень одразу для останнього рядка та вказаного діапазону стовпців (від 2 до 9). Значення повертаються у вигляді масиву, що дозволяє ефективно заповнювати поля форми.

Тепер у вашому HTML файлі ви можете викликати цю оптимізовану функцію, щоб одержати всі значення одразу та присвоїти їх відповідним полям форми:

<!DOCTYPE html>
<html>
<head>
  <base target="_top">
  <link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css" />
  <style>
    .container {
      margin: 5px 5px 5px 5px;
    }
  </style>
</head>
<body>
  <div class="container">
    <form id="inputForm" onkeydown="return event.key != 'Enter'">
      <h1 style="color:#cc0000;text-align:center;font-weight:bold;">Scheduled for Today</h1>
      <label for="L_Scheduled">Label1</label>
      <input type="text" name="L_Scheduled" id="L_Scheduled" style="width: 50px; text-align: center; float: right" value="<?=getTodayValues()[0]?>" />
      <br /><br />
      <!-- Додаткові поля форми тут зі значеннями, отриманими з масиву getTodayValues() -->
    </form>
  </div>

<!DOCTYPE html>

<html>

<head>

<style>

.container {

margin: 5px 5px 5px 5px;

}

</style>

</head>

<body>

<h1 style="color:#cc0000;text-align:center;font-weight:bold;">Scheduled for Today</h1>

<label for="L_Scheduled">Label1</label>

</form>

</div>

Завдяки цій оптимізації значення отримуються одразу для всіх полів форми з електронної таблиці, що значно зменшує час завантаження та забезпечує плавніший досвід користувача.