Google App 脚本使用菜单项选择中的颜色选择器更改背景颜色

Question

我想实现一个菜单项，选择该菜单项时会弹出​​颜色选择器，然后将工作表上某些单元格的背景颜色更改为所选的颜色。

我已经成功地在我的脚本中完成了所有这些事情，但我没有一个好的方法让用户轻松传递可用于更改背景的颜色。（我想避免要求他们将某个单元格更改为他们想要的颜色，然后单击菜单项来更改工作表的其余部分）

这是我当前的代码：

//Function to create menu item
function onOpen(){
  var ui = SpreadsheetApp.getUi();
  ui.createMenu('Sheet Options')
      .addItem('Change Background Color', 'colorMe')
      .addToUi();
}  

function colorMe(){
   var spreadsheet = SpreadsheetApp.getActive();

   // Code to get color value selected by user from ui color picker 
   // Replace #000000 with that value

   spreadsheet.getRangeList(['A:A', '1:1', 'H:H', 'I:I', 'N:U', 'B8:G9', 'E10:E31', 'F14:G31', 'B32:G100', '101:142']).activate()
   .setBackground('#000000');  

}

Answer 1

• 您想要更改电子表格上单元格的背景颜色。
  • 范围是'A:A', '1:1', 'H:H', 'I:I', 'N:U', 'B8:G9', 'E10:E31', 'F14:G31', 'B32:G100', '101:142'.
• 您想通过颜色选择器选择颜色。
• 您可以使用对话框和侧边栏。

如果我的理解是正确的，那么这个示例脚本怎么样？在这个答案中，<input>使用了颜色类型的元素。请将此视为多个答案之一。

示例脚本：

HTML：索引.html

请将以下脚本复制并粘贴到脚本编辑器的 HTML 中。

<input type="color" id="color" value="#ffffff">
<script>
document.getElementById("color").addEventListener("change", function(e) {
  google.script.run.colorMe(this.value);
});
</script>

Google Apps 脚本：code.gs

请将以下脚本复制并粘贴到脚本编辑器的脚本中。

function openDialog() {
  var html = HtmlService.createHtmlOutputFromFile("index");
  SpreadsheetApp.getUi().showModalDialog(html, "sample");
}

function colorMe(color) {
  var spreadsheet = SpreadsheetApp.getActive();
  spreadsheet
  .getRangeList(['A:A', '1:1', 'H:H', 'I:I', 'N:U', 'B8:G9', 'E10:E31', 'F14:G31', 'B32:G100', '101:142'])
  .activate()
  .setBackground(color);
}

• 当您运行 的函数时openDialog()，将打开一个针对活动电子表格的对话框。并且，当您单击颜色选择器并选择颜色并单击“确定”时，将检索并colorMe运行颜色代码。然后，单元格的背景颜色更改为所选颜色。

笔记：

• 这是一个简单的示例脚本。所以请根据您的情况修改此内容。

参考：

• 自定义对话框
• <input type="color">
• 类 google.script.run（客户端 API）