Скрипт 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> элементы с типом color. Пожалуйста, подумайте об этом как об одном из нескольких ответов.

Пример сценария:

HTML: index.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 на стороне клиента)

Answer 2

Мне удалось найти следующую статью, которая помогла мне реализовать решение https://yagisanatode.com/2019/08/07/google-apps-script-google-standard-color-palette-picker-for-sidebar-and-dialog-boxes-in-google-sheets-google-docs-and-google-slides/