Okna dialogowe i paski boczne w dodatku Editor

W przypadku większości dodatków do edytora oknami dialogowymi i panelami bocznymi są główne interfejsy użytkownika dodatku. 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 Apps Script, aby uruchamiać funkcje Apps Script, gdy użytkownik wchodzi w interakcję z panelem bocznym lub oknem. Dodatek może definiować wiele paneli bocznych i okien, ale może wyświetlać tylko jedno z nich naraz.

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

Okna

Okna dialogowe to panele okien, które nakładają się na główną zawartość edytora. Okna dialogowe Apps Script są modalne. Gdy są otwarte, użytkownik nie może wchodzić w interakcję z innymi elementami interfejsu edytora. Możesz dostosować zawartość i rozmiar okien.

Okna dodatków tworzy się w taki sam sposób jak okna niestandardowe w Apps Script. Ogólna zalecana procedura jest następująca:

  1. Utwórz plik projektu skryptu, który definiuje strukturę HTML, CSS i zachowanie JavaScript po stronie klienta w oknie dialogowym. Podczas definiowania okna dialogowego zapoznaj się z wytycznymi dotyczącymi stylu dodatku do Edytora.
  2. W kodzie po stronie serwera, w miejscu, w którym chcesz otworzyć okno, wywołaj funkcję HtmlService.createHtmlOutputFromFile(filename) aby utworzyć obiekt HtmlOutput reprezentujący okno. Jeśli używasz szablonowego kodu HTML, możesz wywołać funkcję HtmlService.createTemplateFromFile(filename), aby wygenerować szablon, a potem HtmlTemplate.evaluate(), aby przekonwertować go na obiekt HtmlOutput.
  3. Wywołaj Ui.showModalDialog(htmlOutput, dialogTitle), aby wyświetlić okno za pomocą tego HtmlOutput.

Gdy okna dialogowe są otwarte, nie wstrzymują skryptu po stronie serwera. 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 projektowania go, ale wymaga to dodatkowej konfiguracji. Aby włączyć interfejs Google Picker API, musisz też mieć dostęp do projektu dodatku w Cloud Platform.

Więcej informacji znajdziesz w sekcji Okna otwierania plików.

Paski boczne to panele, które pojawiają się po prawej stronie interfejsu edytora. Są one najczęstszym typem interfejsu dodatku. W przeciwieństwie do okien dialogowych, gdy pasek boczny jest otwarty, 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 niestandardowe paski boczne w Apps Script. Ogólna zalecana procedura jest następująca:

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

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

  3. Zadzwoń pod numer Ui.showSidebar(htmlOutput), aby wyświetlić pasek boczny za pomocą tego numeru HtmlOutput.

Paski boczne nie wstrzymują skryptu po stronie serwera, gdy są otwarte. 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.