Можно ли создать интерактивное веб-приложение с помощью GAS? - PullRequest
0 голосов
/ 28 мая 2019

Разбираемся до самого элементарного, что я хочу сделать из контекста веб-приложения:

  • Запросить данные у пользователя.
  • Отображение некоторых данных для пользователя.
  • Запросите у пользователя дополнительные данные.
  • Используйте все эти данные в веб-приложении.

В частности, я пытаюсь создать веб-приложение Google Script, которое выполняет следующие действия:

  1. Представляет html-страницу, где пользователь может ввести идентификационный номер пользователя.
  2. Берет это число и находит последнюю строку в электронной таблице, принадлежащей этому пользователю.
  3. Отображает последний номер строки для пользователя (это первая точка, в которой я озадачен - см. Ниже о том, что я пытался).
  4. Представляет вторую страницу ввода html, где пользователь может либо принять отображаемую им информацию о последней строке, либо ввести альтернативный номер (и некоторую другую информацию).
  5. Вся эта информация затем используется для создания Google Doc и добавления информации об этом Google Doc в новую строку в таблице Google.

Я пробовал:

(a) Класс PromptResponse [ui.prompt]
(b) alert (Prompt)
(c) showModalDialog
(d) show ModelessDialog

Все это не удалось, так как ониочевидно, должен быть запущен из связанного приложения.

Я рассмотрел концепцию наличия двух операторов doGet в одном веб-приложении, что привело меня к Связи с другой HTML-страницей в скрипте Google Apps , но этоПохоже, что он имеет дело с двухстраничным HTML-файлом, а не двумя отдельными html-страницами (что, как мне кажется, мне нужно).

Я также рассмотрел использование Browser.msgBox в классе CacheService, но это привело к тому же контекстуошибка как (a) th (d) выше.

Наконец, я подумал о том, чтобы вместо отображения идентификатора пользователя из (1) выше сохранить переменную и вставить ее позже в скрипт (т.е. загрузитьэто в (4) абове).Это привело меня к CacheService.Но я не мог понять, как заставить это работать, и в любом случае, это не совсем то, что я хочу сделать.

GS

function doGet() {
  return HtmlService   
  .createTemplateFromFile('Index')
      .evaluate();
}
function getSongId(objArgs){
  // Get User's Catalog SS URL from Master Users List
  var userId = objArgs.user;
  var masterSSId = "ID";//This is the ID to the master users list SS.
  var userSS = SpreadsheetApp.openById(masterSSId);//Open
  var userSheet = userSS.getActiveSheet();
  var nameOfUserRange = "User" + userId; //this constructs the user ID, like "user101"
      Logger.log("nameOfUserRange = " + nameOfUserRange);
  var userNamedRange = userSS.getRangeByName(nameOfUserRange); //this returns "Range" to pass its value on to future code lines
  var cell = userNamedRange.activate(); //activates range and first cell in range
  var namedUrlRange = userSS.getRange('SongsSheetUrl'); //this gets the SongSheetUrl named range
  var userCol = namedUrlRange.getColumn(); //this gets col # of namedUrlRange
      Logger.log("userCol = " + userCol);
  var userSsUrl = cell.offset(0, userCol-1, 1, 1). getValue(); //this gets the user's Catalog SS URL
      Logger.log("userSsUrl = " + userSsUrl);
  var ss = SpreadsheetApp.openByUrl(userSsUrl);
  var sheet = ss.getActiveSheet();
  var lastRow = sheet.getLastRow();
  var songId = lastRow+1;
  Logger.log("songId = " + songId);
  //some code here that displays songID to user

HTML "Index"

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
<center>    Enter your User ID below.
    <input id="userId" type="text" placeholder="User ID"><br><br>
    <button onclick="saveUserInput()">Continue</button>
    </center>

    <script>
      window.saveUserInput = function() {
        var user = document.getElementById('userId').value;

        console.log('userId: ' + userId)

        google.script.run

          .withSuccessHandler(openPrompt)
          .getSongId({user:user})

      }

       function openPrompt(results){
           window.open(results.url, '_blank').focus();
       }
    </script>
  </body>
</html>

SongId Code

function getSongId() {
    var masterSSId = "ID";//This is the ID to the master users list SS.
    var userSS = SpreadsheetApp.openById(masterSSId);//Open
    var userSheet = userSS.getActiveSheet();
    var nameOfUserRange = "User" + userId; //this constructs the user ID, like "user101"
    var userNamedRange = userSS.getRangeByName(nameOfUserRange); //this returns "Range" to pass its value on to future code lines
    var cell = userNamedRange.activate(); //activates range and first cell in range
    var namedUrlRange = userSS.getRange('SongsSheetUrl'); //this gets the SongSheetUrl named range
    var userCol = namedUrlRange.getColumn(); //this gets col # of namedUrlRange
    var userSsUrl = cell.offset(0, userCol-1, 1, 1). getValue(); //this gets the user's Catalog SS URL
    var ss = SpreadsheetApp.openByUrl(userSsUrl);
    var sheet = ss.getActiveSheet();
    var lastRow = sheet.getLastRow();
    var songId = lastRow+1;
}

Как уже отмечалось, я получал "контекстные" ошибки со всем, что пытался.Кстати, я также создал веб-приложение, которое имело 2 GS-страницы и 2 Index-страницы и отображало только html-страницы на одной странице, и я все еще не мог понять, как отобразить идентификатор пользователя.

Наконец, я потратил много часов и использовал множество поисковых терминов, как в SO, так и в Интернете, в целом, пытаясь найти кого-то еще, кто занялся этой проблемой - и нашел гусиные яйца.

Примечание:Чтобы уважать «минимальный и проверяемый», я не включил скрипт, который запрашивает 2-й набор информации, но он написан и работает.

Обновление: следующий SO Вопрос / Ответ появился справана этот вопрос: « Веб-приложения + удаленно используя скрипт » после того, как я его опубликовал

Кажется, частично это решает мою проблему.По крайней мере, он отображает ввод идентификатора пользователя, но он мне нужен для отображения информации, которую я извлекаю из листа Google на основе идентификатора пользователя (т. Е. SongId).Используя подход doGet (e), я до сих пор не знаю, куда поместить getSongIdcode, который получает songId.Я добавил этот код выше.

Пересмотренный код

gs

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

function getSongId(uObj) {
  var userId = uObj.user;
  var masterSSId = "ID";//This is the ID to the master users list SS.
  var userSS = SpreadsheetApp.openById(masterSSId);//Open
  var userSheet = userSS.getActiveSheet();
  var nameOfUserRange = "User" + userId; //this constructs the user ID, like "user101"
    Logger.log("nameOfUserRange = " + nameOfUserRange);
  var userNamedRange = userSS.getRangeByName(nameOfUserRange); //this returns "Range" to pass its value on to future code lines
  var cell = userNamedRange.activate(); //activates range and first cell in range
  var namedUrlRange = userSS.getRange('SongsSheetUrl'); //this gets the SongSheetUrl named range
  var userCol = namedUrlRange.getColumn(); //this gets col # of namedUrlRange
  var userSsUrl = cell.offset(0, userCol-1, 1, 1). getValue(); //this gets the user's Catalog SS URL
  var ss = SpreadsheetApp.openByUrl(userSsUrl);
  var sheet = ss.getActiveSheet();
  var lastRow = sheet.getLastRow();
  var songId = lastRow+1;
    Logger.log("songId = " + songId);
  return songId;
}

html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
  <center>
Enter your User ID below.
<input id="userId" type="text" placeholder="User ID"><br>
<input type="button" value="Continue" onclick="saveUserInput()">
<div  id="results"></div>
</center>
<script>
      function saveUserInput() {
        var user = document.getElementById('userId').value;
        google.script.run
          .withSuccessHandler(function(hl){
            document.getElementById('results').innerHTML=hl;
          })
          .getSongId({user:user})
        }

    </script>
  </body>
</html>

1 Ответ

0 голосов
/ 28 мая 2019

Попробуйте сначала что-нибудь простое. Просто чтобы убедиться, что вы можете установить связь между клиентом и сервером:

HTML:

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
Enter your User ID below.
<input id="userId" type="text" placeholder="User ID"><br>
<input type="button" value="Continue" onclick="saveUserInput()">
<div  id="results"></div>
<script>
      function saveUserInput() {
        var user = document.getElementById('userId').value;
        google.script.run
          .withSuccessHandler(function(hl){
            document.getElementById('results').innerHTML=hl;
          })
          .getSongId({user:user})
        }

    </script>
  </body>
</html>

Затем используйте простую функцию getSongId ():

function getSongId(uObj) {
  return uObj.user
}

Я бы использовал этот вид doGet ()

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

В вашем html нет скриплетов, которые нужно оценивать. Это не совсем шаблон.

Затем протестируйте getSongId самостоятельно, и, как только он заработает, вы можете вернуть его в div и позже, если захотите, можете создать другую страницу.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...