編輯器外掛程式的對話方塊和側欄

對大多數 Editor 外掛程式而言，對話方塊和側邊欄面板是主要的外掛程式使用者介面。 兩者都可使用標準 HTML 和 CSS 完全自訂，而且您可以使用 Apps Script 的用戶端/伺服器通訊模型，在使用者與側欄或對話方塊互動時執行 Apps Script 函式。外掛程式可以定義多個側欄和對話方塊，但一次只能顯示一個。

如要禁止使用者與編輯器互動，直到他們在外掛程式介面中做出選擇為止，請使用對話方塊；否則請使用側欄。

對話方塊

對話方塊是覆蓋主要編輯器內容的視窗面板。Apps Script 對話方塊是強制回應模式，開啟後使用者就無法與編輯器介面的其他元素互動。您可以自訂對話方塊的內容和大小。

您建立外掛程式對話方塊的方式，與 Apps Script 的自訂對話方塊相同；一般建議程序如下：

  1. 建立指令碼專案檔案，定義對話方塊的 HTML 結構、CSS 和用戶端 JavaScript 行為。定義對話方塊時，請參閱編輯器外掛程式樣式規範。
  2. 在要開啟對話方塊的伺服器端程式碼中，呼叫 HtmlService.createHtmlOutputFromFile(filename)，建立代表對話方塊的 HtmlOutput 物件。或者，如果您使用範本化 HTML，可以呼叫 HtmlService.createTemplateFromFile(filename) 生成範本，然後呼叫 HtmlTemplate.evaluate() 將其轉換為 HtmlOutput 物件。
  3. 呼叫 Ui.showModalDialog(htmlOutput, dialogTitle)，使用該 HtmlOutput 顯示對話方塊。

對話方塊開啟時，不會暫停伺服器端指令碼。用戶端 JavaScript 可以使用 google.script.run() 和相關聯的處理常式函式，對伺服器端進行非同步呼叫。詳情請參閱「用戶端與伺服器之間的通訊」。

檔案開啟對話方塊

檔案開啟對話方塊是預先建構的對話方塊，可讓使用者從 Google 雲端硬碟選取檔案。您可以在外掛程式中新增檔案開啟對話方塊，不必自行設計，但需要進行一些額外設定。您也必須存取外掛程式的 Cloud Platform 專案，才能啟用 Google Picker API。

詳情請參閱「檔案開啟對話方塊」。

側欄是顯示在編輯器介面右側的面板，也是最常見的附加元件介面類型。與對話方塊不同，側欄開啟時，您可以繼續與編輯器介面的其他元素互動。側欄的寬度固定，但你可以自訂內容。

建構外掛程式側欄的方式與 Apps Script 的 自訂側欄相同；一般建議程序如下：

  1. 建立指令碼專案檔案，定義側欄的 HTML 結構、CSS 和用戶端 JavaScript 行為。定義側邊欄時，請參閱編輯器外掛程式樣式指南。

  2. 在要開啟側欄的伺服器端程式碼中，呼叫 HtmlService.createHtmlOutputFromFile(filename)，建立代表側欄的 HtmlOutput 物件。或者，如果您使用範本化 HTML，可以呼叫 HtmlService.createTemplateFromFile(filename) 生成範本，然後呼叫 HtmlTemplate.evaluate() 將其轉換為 HtmlOutput 物件。

  3. 呼叫 Ui.showSidebar(htmlOutput)，即可使用該 HtmlOutput 顯示側欄。

側欄開啟時，不會暫停伺服器端指令碼。用戶端 JavaScript 可以使用 google.script.run() 和相關聯的處理常式函式，對伺服器端進行非同步呼叫。詳情請參閱「用戶端與伺服器之間的通訊」。