时间戳

首页 > 解决方案 > 如何将 google sheet 中的单元格值设置为 HTML 侧边栏的 textarea 的默认值？

javascript - 如何将 google sheet 中的单元格值设置为 HTML 侧边栏的 textarea 的默认值？

问题描述

我有一个独立的 Google 脚本用作库。<textarea>该库包含使用带有一个元素和脚本的类似侧边栏的 HTML 表单。我想从活动谷歌电子表格的单元格中获取一些值，以将其设置为<textarea>边栏中元素的默认值。然后使用手动输入文本对其进行更新，并将其作为新值发送到源单元格，保持侧边栏处于打开状态。

图书馆的脚本

function showSidebar() {
    var html = HtmlService.createHtmlOutputFromFile('method.html')
        .setTitle('Cooking method')
        .setWidth(300);
    SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp.
        .showSidebar(html);
  }

function addNewMethod(form_data)
{  
  var ss = SpreadsheetApp.getActiveSpreadsheet();//modified 
  var sheet = ss.getSheetByName('Method');
  var cookingMethod = form_data.method;   
  sheet.getRange('A2').setValue(cookingMethod);
}

function getDefaultMethod() {
  const ss = SpreadsheetApp.getActiveSpreadsheet();
  const sheet = ss.getSheetByName('Method');
  const currentMethod = sheet.getRange('A2').getValue();
  return currentMethod

}

HTML 侧边栏

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>
      $(function()
      {
         google.script.run
             .withSuccessHandler(updateMethod)
             .getDefaultMethod();
      });
      function updateMethod(method_val)
      {
         document.getElementById('method').innerHTML=method_val;
      }
    </script>
  </head>
  <body>
    <form id="mysidebar">
    <div class="block form-group">
    <label for="method"></label>
        <textarea id="method" name="method" rows="30" cols="40">
        </textarea>
    </div>   

    <div class="block">
    <button type="submit" class="action">Add cooking method</button>
    </div>
    </form>
    <script>
    document.querySelector("#mysidebar").addEventListener("submit", 
    function(e)
    {
    e.preventDefault();    //stop form from submitting
    google.script.run.withSuccessHandler().addNewMethod(this);
    }
    )
    </script>
  </body>
</html>

客户电子表格上的功能。图书馆的名字是RecipeBuilder

```
function showSidebar() {
var html = HtmlService.createHtmlOutputFromFile('method.html')
    .setTitle('Cooking method')
    .setWidth(900);
SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp.
    .showSidebar(html);
  }

function addNewMethod(form_data)
{  
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var sheet = ss.getSheetByName('Method');
  var cookingMethod = form_data.method;   
  sheet.getRange('A2').setValue(cookingMethod);
}

function getDefaultMethod() {
  const ss = SpreadsheetApp.getActiveSpreadsheet();
  const sheet = ss.getSheetByName('Method');
  const currentMethod = sheet.getRange('A2').getValue();
  return currentMethod

}
```

我的脚本不起作用。边栏显示为空白<textarea>，并且不会将更新的值发送到单元格。我错在哪里以及如何解决？我可以让侧边栏更广泛然后 300？

标签： javascripthtmlgoogle-apps-scriptgoogle-sheets

解决方案

我相信你的目标如下。

  • 您希望将从Method活动电子表格中工作表的单元格“A2”检索到的值设置为textarea.
  • 单击“添加烹饪方法”按钮时，您希望从活动电子表格中的工作表textarea单元格“A2”中检索值并将这些值放入单元格“A2”中。Method
  • 您想知道问题的原因Sidebar appears with blank <textarea> and does not send updated value to the cell.。

为此，这个答案怎么样？

修改点：

  • 关于getDefaultMethod()在客户端，在您的脚本中，需要从RecipeBuilder.getDefaultMethod(). 在您当前的脚本中，不会返回该值。Method因此，当加载 HTML 时，从活动电子表格中工作表的单元格“A2”检索的值未设置为textarea.
  • 关于addNewMethod()在GAS库端，var ss = SpreadsheetApp.getActiveSpreadsheet;是没有运行方法的。所以请补充()。
    • 我认为这是您的问题的原因。

修改后的脚本：

当您的脚本被修改时，请进行如下修改。

请修改getDefaultMethod()客户端如下。

从： 
function getDefaultMethod(){
  RecipeBuilder.getDefaultMethod();
}
至： 
function getDefaultMethod(){
  return RecipeBuilder.getDefaultMethod();  // Modified
}

并且，请addNewMethod()对 GAS 库端进行如下修改。

从： 
function addNewMethod(form_data)
{  
  var ss = SpreadsheetApp.getActiveSpreadsheet;
  var sheet = ss.getSheetByName('Method');
  var cookingMethod = form_data.method;   
  sheet.getRange('A2').setValue(cookingMethod);
}
至： 
function addNewMethod(form_data)
{  
  var ss = SpreadsheetApp.getActiveSpreadsheet();  // Modified
  var sheet = ss.getSheetByName('Method');
  var cookingMethod = form_data.method;   
  sheet.getRange('A2').setValue(cookingMethod);
}

笔记：

  • 在您的脚本中，如果客户端不是 Google 电子表格的容器绑定脚本，并且客户端的 Google 电子表格没有 的工作表Method，则会发生错误。所以请注意这一点。

推荐阅读