2024年3月18日 星期一

Google Apps Script (GAS) 學習筆記 (三) : 使用者介面元件 (上)

本篇要來測試 Google Apps 的常用 UI 元件. 


UI 元件是用來與 Google Apps 互動的介面, 本測試主要是以試算表為例, 其實每一種 Google Apps (文件, 試算表, 表單等) 上都可以放 UI 元件. 


一. 按鈕與訊息盒 : 

在 Google Apps 上放置按鈕主要是用來觸發執行一個函式. 首先如前一篇測試所示, 在雲端硬碟的自訂資料夾 GAS 下新增一個試算表, 並更名為 ui_test : 




然後點選 "擴充功能" 再選 "Apps Script" : 




 將產生的未命名 GAS 專案名稱與預設函式 myFunction() 都改為 hello :




然後在 hello() 函式中輸入下列程式碼 : 

Browser.MsgBox('Hello World!');

此處 Browser 為 GAS 的瀏覽器物件, 可在網頁中顯示按鈕, 訊息框與輸入框等元件. 其實在輸入函式的第一個字元時就會顯示下拉式選單讓我們點選物件或方法名稱, 輸入方法的括號時也會顯示參數說明 :






按 "儲存專案" 鈕存檔後, 右邊的 "執行" 鈕才會變成可按 :




按 "執行" 鈕先測試程式碼效果, 這時會彈出一個 "需要授權" 視窗, 請按 "審查權限" 鈕 : 




然後會彈出 Google 帳戶選擇視窗, 點選自己的 Google 帳戶 :




接著會彈出 "這個應用程式未經 Google 驗證" 的警告, 按左下角的 "進階" :



這時底下會出現一段若不信任開發人員 (就是自己啦) 勿繼續操作警語, 請按底下的 "前往 hello 」 (不安全)" 超連結進行授權 :



在彈出視窗中按右下角的 "允許" 鈕即完成執行此程式之授權 :




這時再次按下專案視窗中的 "執行" 鈕, 就會在試算表視窗中彈出一個訊息框 (注意, 執行結果不是顯示在 GAS 專案視窗, 而是它寄生的試算表視窗) : 





按下 "確定" 鈕即可關閉訊息框, 此按鈕為 msgBox() 方法第二參數所控制, 如果沒有傳入第二參數, 預設為 Browser.Buttons.OK (確定), 其他可傳入值如下 :
  • Browser.Buttons.OK_CANCEL
  • Browser.Buttons.YES_NO
  • Browser.Buttons.YES_NO_CANCEL
以上只是測試此 GAS 專案程式碼是否可順利執行 (並授予該帳戶執行權), 但這次目的不是要在 GAS 專案視窗上直接按執行鈕來執行程式碼, 而是要在試算表 App 上放一個按鈕, 讓使用者按下按鈕時執行 hello(), 所以接下來要在試算表視窗上繪製一個按鈕. 

回到試算表 App 視窗, 點選上方的 "插入" 選單, 再點選 "繪圖" :




這樣會彈出一個繪圖板視窗, 點選圖案按鈕, 選擇 "圖案" 第一排適合做按鈕的圖形, 在繪圖板上畫出一個按鈕圖形 : 





點選此按鈕, 按滑鼠右鍵, 點選 "編輯文字", 輸入按鈕上的文字例如 "按我執行" :




按上方的 "儲存並關閉鈕" : 關閉繪圖板視窗 : 




這時試算表上就會出現一個浮動的按鈕 (可拖曳到任何位置, 不屬於任一儲存格) :




接下來是要將此按鈕綁定按下動作 (click) 要執行的函式, 重點來了, 先點選此按鈕, 這時按鈕右上發會出現三個垂直小點, 按它會彈出一個選單, 點選其中的 "指派指令碼" :




這時會彈出一個視窗, 請在輸入框中輸入欲執行的函式名稱 (不要加括號) 即完成指派 : 




這時按下試算表上的 "按我執行" 鈕就會直接執行 hello() 了 : 




以上雖然只是簡單的功能, 但實際應用時函式可能會很複雜, 但只要按一個按鈕就可以執行此函式, 而不需要開啟 GAS 專案視窗來執行. 

參考 : 


GAS 的 UI 除了輸入外也可以用 Browser 物件的 InputBox() 方法來取得使用者輸入, 我們修改上面的 hello 專案, 將 hello() 函式改成如下 :

function hello() {
  var name=Browser.inputBox('請輸入名字');
  Browser.msgBox('Hello, ' + name);
}




此處 Browser.InputBox() 的傳入參數為輸入框的提示語 (prompt) 或標題, 其傳回值為輸入框內的字串, 我們先將其存在 name 變數中, 然後傳入 msgBox() 的組合字串中輸出. 將此專案存檔後, 切回試算表視窗, 按下 "按我執行" 鈕, 這時會彈出一個輸入框, 填入名字按確定, 就會在談出的訊息框李顯示名字了 :




沒有留言 :