對於大多數編輯器外掛程式,對話方塊視窗和側邊欄面板是主要的外掛程式使用者介面。這兩種介面都能使用標準 HTML 和 CSS 進行完全自訂,您也可以在使用者與側欄或對話方塊互動時,使用 Apps Script 的用戶端-伺服器通訊模式來執行 Apps Script 函式。外掛程式可以定義多個側邊欄和對話方塊,但一次只能顯示一個。
如果您想在使用者在外掛程式介面中做出選擇之前,禁止他們與編輯器互動,請使用對話方塊;否則請使用側欄。
對話方塊
對話方塊是覆蓋主要編輯器內容的視窗面板。Apps Script 對話方塊是模式對話方塊,在對話方塊開啟時,使用者無法與編輯器介面的其他元素互動。您可以自訂對話方塊的內容和大小。
您可以使用與 Apps Script 自訂對話方塊相同的方式建構外掛程式對話方塊;一般建議的程序如下:
- 建立指令碼專案檔案,定義對話方塊的 HTML 結構、CSS 和用戶端 JavaScript 行為。定義對話方塊時,請參閱編輯器外掛程式樣式規範。
- 在您要開啟對話方塊的伺服器端程式碼中,請呼叫
HtmlService.createHtmlOutputFromFile(filename)
來建立代表對話方塊的HtmlOutput
物件。或者,如果您使用範本 HTML,可以呼叫HtmlService.createTemplateFromFile(filename)
產生範本,然後呼叫HtmlTemplate.evaluate()
將其轉換為HtmlOutput
物件。 - 呼叫
Ui.showModalDialog(htmlOutput, dialogTitle)
即可使用該HtmlOutput
顯示對話方塊。
對話方塊在開啟時不會暫停伺服器端指令碼。用戶端 JavaScript 可以使用 google.script.run()
和相關聯的處理常式函式,對伺服器端進行非同步呼叫。詳情請參閱「用戶端對伺服器通訊」。
檔案開啟對話方塊
檔案開啟對話方塊是預先建構的對話方塊,可讓使用者從 Google 雲端硬碟中選取檔案。您可以將檔案開啟對話方塊新增至外掛程式,而無須自行設計,但需要進行一些額外設定。您還必須具備外掛程式的 Cloud Platform 專案存取權,才能啟用 Google Picker API。
詳情請參閱「檔案開啟對話方塊」一文。
Sidebars
側欄是顯示在編輯器介面右側的面板,也是最常見的附加元件介面類型。與對話方塊不同,您可以在側欄開啟時繼續與編輯器介面的其他元素互動。側欄的寬度固定,但您可以自訂側欄內容。
建構外掛程式側欄的方式與 Apps Script 自訂側欄相同;一般建議的程序如下:
- 建立定義側欄 HTML 結構、CSS 和用戶端 JavaScript 行為的腳本專案檔案。定義側欄時,請參閱編輯器外掛程式樣式規範。
在您要開啟側欄的伺服器端程式碼中,請呼叫
HtmlService.createHtmlOutputFromFile(filename)
來建立代表側欄的HtmlOutput
物件。或者,如果您使用範本 HTML,可以呼叫HtmlService.createTemplateFromFile(filename)
產生範本,然後呼叫HtmlTemplate.evaluate()
將其轉換為HtmlOutput
物件。呼叫
Ui.showSidebar(htmlOutput)
即可使用該HtmlOutput
顯示側欄。
側邊欄不會在開啟時暫停伺服器端指令碼。用戶端 JavaScript 可以使用 google.script.run()
和相關聯的處理常式函式,對伺服器端進行非同步呼叫。詳情請參閱「用戶端對伺服器通訊」。