Okna dialogowe i paski boczne w dodatku Editor

Większość dodatków do Editora korzysta z okien dialogowych i paneli bocznych jako głównych interfejsów użytkownika. Oba te elementy można w pełni dostosować za pomocą standardowego kodu HTML i CSS. Gdy użytkownik wchodzi w interakcję z boczną belką lub oknem, możesz użyć modelu komunikacji klient-serwer w Google Apps Script, aby uruchomić funkcje Google Apps Script. Twoje rozszerzenie może definiować wiele pasków bocznych i okne dialogowe, ale może wyświetlać tylko jedno z nich naraz.

Jeśli chcesz uniemożliwić użytkownikowi interakcję z edytorem, dopóki nie wybierze opcji w interfejsie dodatku, użyj okna dialogowego. W przeciwnym razie użyj paska bocznego.

Okna

Dialogi to okna, które nakładają się na główną zawartość edytora. Dialogi Apps Script są modalne, co oznacza, że podczas ich otwierania użytkownik nie może wchodzić w interakcję z innymi elementami interfejsu edytora. Możesz dostosować treść i rozmiar dialogów.

Okna dialogowe dodatku tworzysz w taki sam sposób jak niestandardowe okna dialogowe w Apps Script. Ogólna zalecana procedura wygląda tak:

  1. Utwórz plik projektu skryptu, który definiuje strukturę HTML, CSS i zachowanie JavaScript po stronie klienta dialogu. Podczas definiowania dialogu zapoznaj się z wytycznymi dotyczącymi stylu dodatku Editor.
  2. W kodzie po stronie serwera, w którym chcesz otworzyć okno, wywołaj funkcję HtmlService.createHtmlOutputFromFile(filename), aby utworzyć obiekt HtmlOutput, który będzie reprezentować okno. Jeśli używasz HTML-a ze szablonem, możesz wywołać funkcję HtmlService.createTemplateFromFile(filename), aby wygenerować szablon, a potem funkcję HtmlTemplate.evaluate(), aby przekonwertować go na obiekt HtmlOutput.
  3. Wywołaj funkcję Ui.showModalDialog(htmlOutput, dialogTitle), aby wyświetlić okno dialogowe za pomocą funkcji HtmlOutput.

Okna dialogowe nie zawieszają skryptu po stronie serwera, dopóki są otwarte. Kod JavaScript po stronie klienta może wykonywać asynchroniczne wywołania po stronie serwera za pomocą funkcji google.script.run() i powiązanych funkcji obsługi. Więcej informacji znajdziesz w artykule Komunikacja między klientem a serwerem.

Okna otwierania plików

Okna otwierania plików to wstępnie utworzone okna, które umożliwiają użytkownikom wybieranie plików z Dysku Google. Możesz dodać do dodatku okno otwierania pliku bez konieczności jego projektowania, ale wymaga to dodatkowej konfiguracji. Aby włączyć interfejs Google Picker API, musisz też mieć dostęp do projektu Cloud Platform dodatku.

Szczegółowe informacje znajdziesz w artykule Przestroga dotycząca plików.

Pasek boczny to panele, które pojawiają się po prawej stronie interfejsu edytora. Są one najczęstszym typem interfejsu dodatku. W odróżnieniu od dialogów, podczas korzystania z paska bocznego możesz nadal korzystać z innych elementów interfejsu edytora. Paski boczne mają stałą szerokość, ale możesz dostosować ich zawartość.

Paski boczne dodatków tworzy się tak samo jak paski boczne niestandardowe w Apps Script. Ogólna zalecana procedura wygląda tak:

  1. Utwórz plik projektu skryptu, który definiuje strukturę HTML, CSS i zachowanie JavaScript po stronie klienta paska bocznego. Podczas definiowania paska bocznego zapoznaj się z wytycznymi dotyczącymi stylu dodatku do edytora.

  2. W kodzie po stronie serwera, w którym chcesz otworzyć pasek boczny, wywołaj funkcję HtmlService.createHtmlOutputFromFile(filename), aby utworzyć obiekt HtmlOutput reprezentujący pasek boczny. Jeśli używasz HTML-a ze szablonem, możesz wywołać funkcję HtmlService.createTemplateFromFile(filename), aby wygenerować szablon, a potem funkcję HtmlTemplate.evaluate(), aby przekonwertować go na obiekt HtmlOutput.

  3. Aby wyświetlić pasek boczny, naciśnij Ui.showSidebar(htmlOutput), aby wyświetlić pasek boczny za pomocą tego HtmlOutput.

Podczas gdy są otwarte, nie zawieszają skryptu po stronie serwera. Kod JavaScript po stronie klienta może wykonywać asynchroniczne wywołania po stronie serwera za pomocą funkcji google.script.run() i powiązanych funkcji obsługi. Więcej informacji znajdziesz w artykule Komunikacja między klientem a serwerem.