可以使用GAS创建一个交互式Web应用程序吗？

时间：2019-05-28 09:21:25

标签： google-apps-script

归根结底，我想从Web应用程序上下文中做的是：

  • 向用户询问一些数据。
  • 向用户显示一些数据。
  • 向用户询问更多数据。
  • 使用Web应用程序中的所有数据。

更具体地说，我正在尝试构建一个执行以下操作的Google Script网络应用：

  1. 显示一个html页面，用户可以在其中输入用户ID号。
  2. 获取该数字并找到电子表格中的最后一行 给那个用户。
  3. 向用户显示最后一个行号（这是 我感到难过的第一点-见下文 尝试）。
  4. 显示第二个html输入页面，用户可以在其中输入 接受显示给他们的最后一行信息，或输入备用 号（以及其他一些信息）。
  5. 所有这些信息然后用于 创建一个Google文档，并在新行上添加有关该Google文档的信息 在Google电子表格中。

我尝试过：

（a）类PromptResponse [ui.prompt]
 （b）警报（提示）
 （c）showModalDialog
 （d）显示ModelessDialog

所有这些都失败了，因为它们显然必须从绑定的应用程序中触发。

我考虑了在单个webApp中具有两个doGet语句的概念，这使我 Linking to another HTML page in Google Apps Script，但这似乎处理的是两页单页html，而不是两个单独的html页（这是我认为我需要的）。

我还考虑过在CacheService类中使用Browser.msgBox，但它会产生与上述（a）至（d）相同的上下文错误。

最后，我考虑了-不是显示上面（1）的用户ID号-而是保存变量并将其稍后插入脚本中（即，将其加载到上面的（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“索引” 

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

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

如前所述，我尝试的所有内容均出现“上下文”错误。顺便说一句，我还创建了一个Web应用程序，它具有2个GS页面和2个Index页面，并且只在一个页面上显示了两个html页面，但我仍然不知道如何显示用户ID。

最后，我花了很多时间，并在SO和整个网络上使用了很多搜索词，试图找到其他可以解决该问题的人-并且想到了鹅卵。

注意：为了尊重“最小且可验证的”，我没有提供要求第二套信息的脚本，但该脚本已编写且可以使用。

更新：以下问题/答案出现在该问题的右侧：“ Web apps+ remotely using script”

似乎部分解决了我的问题。至少它确实显示了用户的用户ID输入，但是我需要它来显示我根据用户ID（即songId）从Google表格中提取的信息。使用doGet（e）方法，我仍然不知道将获取songId的getSongIdcode放在哪里。我已经在上面添加了该代码。

修改后的代码

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 :(得分：0)

首先尝试简单的操作。只是看到您可以使客户端和服务器进行通信：

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没有任何需要评估的scriptlet。它不是真正的模板。

然后单独测试getSongId，一旦成功，您可以将其返回到div，如果您希望创建另一个页面，可以稍后再添加它。

相关问题
最新问题