如何使用应用程序脚本在 Google 电子表格的单元格内添加 UI？

Question

我想向 Google 文档电子表格中的特定单元格添加按钮。 应用脚本 UI 文档介绍了如何添加新面板，但尚不清楚 UI 如何添加该面板中的内容可以附加到特定的行或单元格。

是否可以将 UI 添加到特定单元格，或者我们仅限于添加新面板？

Answer 1

应用程序 UI 仅适用于面板。

您能做的最好的事情就是自己绘制一个按钮并将其放入电子表格中。您可以向其中添加宏。

进入“插入>绘图...”，绘制一个按钮并将其添加到电子表格中。
然后单击它并单击“分配宏...”，然后在其中插入您要执行的函数的名称。该函数必须在电子表格的脚本中定义。

或者，您也可以在其他地方绘制按钮并将其作为图像插入。

详细信息：https://developers.google.com/apps-script/guides/menus< /a>

Answer 2

2018 年状态：

似乎无法将按钮（绘图、图像）放置在单元格内，以允许它们链接到 Apps 脚本功能。

---

话虽如此，您确实可以做一些事情：

您可以...

您可以使用 IMAGE(URL) 将图像放置在单元格内，但它们无法链接到 Apps 脚本函数。

您可以将图像放置在单元格中并使用以下方法将它们链接到 URL：
=HYPERLINK("http://example.com"; IMAGE("http://example.com/myimage.png"; 1))

您可以按照 @ 的答案中的描述创建绘图Eduardo 和它们可以链接到 Apps 脚本函数，但它们将是独立的项目，可以自由浮动在电子表格“上方”，并且不能放置在单元格中。它们无法从一个单元格复制到另一个单元格，并且它们没有脚本函数可以读取的行或列位置。

Answer 3

使用复选框（例如，在 F1 中）而不是按钮/图像。这是单元格内完整用户界面的中间版本。然后挂钩您的函数，该函数应该在单击按钮时运行到 onEdit() 触发函数。

示例脚本：

function onEdit(e){
  const rg = e.range;
  if(rg.getA1Notation() === "F1" && rg.isChecked() && rg.getSheet().getName() === "Sheet1"){
    callFunctionAttachedToImage();
    rg.uncheck();
  }
}

参考：

• 类范围
• 事件对象

Answer 4

按钮可以作为图像添加到冻结行。将附加脚本中的函数分配给按钮可以运行该函数。说你不能的评论当然是一个非常古老的评论，可能现在情况已经改变了。

Answer 5

有一个愚蠢的技巧可以帮助您：

1. 您可以使绘图对象与工作表一样高（以显示在工作表中的每一行）。

2. 您可以通过以下代码使脚本影响当前单元格的值：

   SpreadsheetApp.getActiveSpreadsheet().getActiveCell().setValue(cellValue);

Answer 6

我无法将图纸附加到单元格上。相反，我使用视觉错觉使单元格看起来类似于按钮，然后使用 onSelectionChange() 在单击该单元格时运行脚本。不过，您不能连续单击两次。您必须在单元格外部单击，然后再次返回。

对于视觉 3D 着色错觉，我使用粗彩色边框。我给出“按钮”单元格：

• 厚的底部和右边框，比表格单元格的其余部分颜色更深
• 厚的顶部和左边框，比底部/右边框浅，比其余单元格浅

如果我需要多个按钮彼此相邻，我会在它们之间放置一个额外的列，否则对我来说看起来不对，因为它们之间的边框只能有一种颜色。合作起来有点烦人。这里它们没有额外的列：

这里有一个额外的列：

应用程序脚本无法侦听某人单击单元格。不过，它可以侦听某人更改选择的单元格。当你这样做时，检查点击是否在正确的单元格中很重要：

function onSelectionChange(event) {
  // Act based on text content
  var activeCell = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet().getActiveCell();
  var text = activeCell.getValue();
  console.log("text", text);  // for the debugger

  if (text === "thing 1") { function1(); }
  else if (text === "thing 2") { function2(); }
}

我有很多这样的“按钮”，当我想编辑它们时，我发现与这些单元格交互很烦人，所以我还使用了“属性”来激活和停用该交互：

function onSelectionChange(event) {
  var isActive = PropertiesService.getScriptProperties().getProperty("active")
  console.log("Cells are active", JSON.stringify(isActive));
  if ( isActive !== "true" ) { return; }
  
  // Act based on text content
  var activeCell = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet().getActiveCell();
  var text = activeCell.getValue();
  console.log("text", text);  // for the debugger

  if (text === "thing 1") { function1(); }
  else if (text === "thing 2") { function2(); }
}

function activate() {
  // I think these get saved as strings even if you give
  // a boolean value, so I just gave a string
  PropertiesService.getScriptProperties().setProperty("active", "true");
  console.log("After activated", JSON.stringify(PropertiesService.getScriptProperties().getProperty("active")));
}

function deactivate() {
  PropertiesService.getScriptProperties().setProperty("active", "false");
  console.log("After deactivated", JSON.stringify(PropertiesService.getScriptProperties().getProperty("active")));
}

我确实使用绘图作为带有activate和deactivate功能的按钮而不是单元格，因为这样编程起来不那么烦人。我确实有很多细胞类型的“按钮”，所以这是值得的。

当我激活和停用它们时，我还改变了细胞的颜色。这部分有点未经测试。我的代码更适合我的情况。我正在为更大的范围着色并使用不同的颜色。

function activate() {
  PropertiesService.getScriptProperties().setProperty("active", "true");
  setStyle("#cccccc", "#000000", "A1");
}

function deactivate() {
  PropertiesService.getScriptProperties().setProperty("active", "false");
  setStyle("#b7b7b7", "#999999", "A1");  // Maybe not enough contrast for some people
}

function setStyle(backgroundColor, fontColor, cellAddress) {
  var range = SpreadsheetApp.getActiveSheet().getRange(cellAddress);
  range.setBackground(backgroundColor);
  range.setFontColor(fontColor);
}