Okna dialogowe i paski boczne w dodatku Editor

Większość dodatków Editor 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. Możesz też użyć modelu komunikacji klient-serwer w Apps Script, aby uruchamiać funkcje Apps Script, gdy użytkownik wchodzi w interakcję z bocznym paskiem lub oknem dialogowym. Twoje rozszerzenie może definiować wiele pasków bocznych i okienek dialogowych, 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 panele 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 tworzy się 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 okna dialogowego 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 reprezentujący okno. Jeśli używasz HTML-a w szablonie, 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 gotowe 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 Okna dialogowe otwierania plików.

Pasemka 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ę w ten sam sposób co 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 w szablonie, 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.