Google Apps Script 入門到進階(3) --- 功能表

在Excel中可以在功能表中加入客製化的功能，如果想在 Google Sheet 加入自己的定義功能表是否也可以做到呢?答案是Yes，Google Apps Script有提供新增功能表的API，讓使用者做出屬於自己的功能表。
在Google硬碟中新增一個試算表檔案，開啟指令碼編輯器新增Code.gs、Test1.html、Test2.html、Test3.html。
分別在檔案中輸入以下的程式碼，完成後存檔，關閉文件再重新開啟文件。
在Code.gs輸入以下程式碼。

function onOpen() { 
  SpreadsheetApp.getUi().createMenu('測試功能')
  .addItem('測試1', 'showTest1')
  .addSeparator()
  .addSubMenu(SpreadsheetApp.getUi().createMenu('項目')
              .addItem('測試2', 'showTest2')
              .addItem('測試3', 'showTest3'))
  .addToUi();  
}

function showTest1() {
 var html = HtmlService.createHtmlOutputFromFile('Test1')
 .setWidth(300)
 .setHeight(200);
 SpreadsheetApp.getUi().showModalDialog(html, '測試1');
}

function showTest2() {
 var html = HtmlService.createHtmlOutputFromFile('Test2')
 .setWidth(300)
 .setHeight(200);
 SpreadsheetApp.getUi().showModalDialog(html, '測試2');
}

function showTest3() {
 var html = HtmlService.createHtmlOutputFromFile('Test3')
 .setWidth(300)
 .setHeight(200);
 SpreadsheetApp.getUi().showModalDialog(html, '測試3');
}

在Test1.html輸入以下程式碼。

<style>
h2{ color: red; font:20px; }
p{ font:14px; }
</style>
<h2>測試1</h2>
<p>Hello! 這是測試1</p>

在Test2.html輸入以下程式碼。

<style>
h2{ color: green; font:20px; }
p{ font:14px; }
</style>
<h2>測試2</h2>
<p>Hello! 這是測試2</p>

在Test3.html輸入以下程式碼。

<style>
h2{ color: blue; font:20px; }
p{ font:14px; }
</style>
<h2>測試3</h2>
<p>Hello! 這是測試3</p>

執行結果：

參考資料：

• Converting from UiApp + Chart Service to Html Service + Google Visualization API
• Custom Dialogs in Google Apps Script